jQuery實(shí)現(xiàn)下拉菜單(內(nèi)容為時(shí)間)的實(shí)時(shí)更新及圖表的隨動(dòng)更新的方法
工程分享:
模塊1:下拉菜單的實(shí)時(shí)顯示最近一周時(shí)間:
//顯示日期下拉選框 for(var i=0;i<7;i++){ $("#choose1>option:eq("+i+")").html(GetDateStr(-i)); $("#choose1>option:eq("+i+")").attr("value",GetDateStr(-i));//該語(yǔ)句為了便于下拉選中的數(shù)據(jù)的值 } //這個(gè)是上述的對(duì)應(yīng)函數(shù) //以下為日期下拉選擇框自動(dòng)調(diào)整 function GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+AddDayCount);//獲取AddDayCount天后的日期 var y = dd.getFullYear(); var m = dd.getMonth()+; var d = dd.getDate(); return y+"-"+m+"-"+d; }
輸出格式為年-月-天
在工程中,實(shí)現(xiàn)的是選擇對(duì)應(yīng)傳參刷新table值,對(duì)應(yīng)內(nèi)容如下:
$("#choose1").bind("change",function(){ var value=$(this).val(); var result={"time":value+" 00:15:00"};//工程刷新時(shí)間為凌晨,所以設(shè)置時(shí)間格式為延遲15分鐘 //注意,此處的result是將字符串格式化為對(duì)象 refreshData(result);//調(diào)用Hcharts繪制函數(shù) }); //對(duì)應(yīng)的函數(shù)為: function refreshData(result){ $.ajax({ type: "POST",//請(qǐng)求格式設(shè)置為post類型 url:actionname, dataType:"text", //ajax返回值設(shè)置為text(json格式也可用它返回,可打印出結(jié)果,也可設(shè)置成json) data:result,//此處的result是格式化的傳過來的所選的時(shí)間,進(jìn)而使得action帶時(shí)間參數(shù)傳遞 success: function(json){ var obj = $.parseJSON(json); //使用這個(gè)方法解析json var xAxisData=new Array();//轉(zhuǎn)換成數(shù)組 var yAxisData=new Array(); var AxisData=new Array(); var str=new Array(),x=new Array();y=new Array(); for(var i=0;i<obj.resultData.length;i++){ xAxisData[i]=obj.resultData[i].date; yAxisData[i]=obj.resultData[i].value; str=xAxisData[i].split(" "); x=str[0].split("-"); y=str[1].split(":"); for(var j=0;j<3;j++) {x[j]=parseInt(x[j]); y[j]=parseInt(y[j]);} var year=x[0],month=x[1]-1,day=x[2],hour=y[0],minute=y[1],second=y[2]; AxisData[i]=[Date.UTC(year,month,day,hour,minute,second),yAxisData[i]];//注意,這里是格式化的時(shí)間格式(符合hcharts表的要求) } $('#box').highcharts({ chart: { type: 'spline',//類型設(shè)置 marginBottom:70 }, title: { margin:10 }, xAxis: { type: 'datetime', title: { text: '時(shí)間', align:'high' }, dateTimeLabelFormats:{ second:'%Y-%m-%d %H:%M:%S' } }, yAxis: { title: { text: '能耗', rotation:0, align:'high' } }, tooltip: { formatter: function () { return '<b>' + "乙烯生產(chǎn)能效值: "+this.y + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' ; //格式化輸出 } }, plotOptions: {//在這個(gè)位置可以設(shè)置比如像折線圖中點(diǎn)的點(diǎn)擊事件 spline: { marker: { enabled: true } }, series:{ cursor:'pointer', point:{ events:{ click: function(){//點(diǎn)擊事件對(duì)應(yīng)的函數(shù)實(shí)現(xiàn)以及參數(shù)定義 var timee=new Date(this.x); timee.setHours(timee.getHours()-8);//獲取AddDayCount天后的日期 var yy = timee.getFullYear(); var mt = timee.getMonth()+1; var dd = timee.getDate(); var hh=timee.getHours(); var mm=timee.getMinutes(); var ss=timee.getSeconds(); if(hh<10) hh="0"+hh; if(mm<10) mm="0"+mm; if(ss<10) ss="0"+ss; if(dd<10) dd="0"+dd; if(mt<10) mt="0"+mt;//對(duì)于個(gè)位數(shù),對(duì)應(yīng)的十位設(shè)置為0 var action=yy+'-'+mt+'-'+dd+' '+hh+':'+mm+':'+ss; $("#Time_click").html(action); var result={"time":action}; refreshTable(result)//刷新表 } } } }, series:[{ name:meaning, data:AxisData//此處寫入要進(jìn)行顯示的數(shù)據(jù) }] }); refreshTable(result); } } }); }
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)下拉菜單(內(nèi)容為時(shí)間)的實(shí)時(shí)更新及圖表的隨動(dòng)更新的方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
從零開始學(xué)習(xí)jQuery (九) jQuery工具函數(shù)
我們經(jīng)常要使用腳本處理各種業(yè)務(wù)邏輯, 最常見的就是數(shù)組和對(duì)象的操作. jQuery工具函數(shù)為我們操作對(duì)象和數(shù)組提供了便利條件.2011-02-02jquery實(shí)現(xiàn)簡(jiǎn)潔文件上傳表單樣式
這篇文章向大家推薦了一款基于jquery實(shí)現(xiàn)的簡(jiǎn)潔文件上傳表單樣式,實(shí)現(xiàn)效果大方精致,極力推薦給大家,希望大家可以喜歡。2015-11-11jquery實(shí)現(xiàn)tab菜單切換內(nèi)容(精簡(jiǎn)版demo)
這篇文章主要為大家介紹了jquery實(shí)現(xiàn)tab菜單切換內(nèi)容的精簡(jiǎn)方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10jquery實(shí)現(xiàn)多屏多圖焦點(diǎn)圖切換特效的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)多屏多圖焦點(diǎn)圖切換特效的方法,涉及jQuery插件jquery.kinMaxShow實(shí)現(xiàn)焦點(diǎn)圖的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05