在Windows系統(tǒng)上安裝PHP運(yùn)行環(huán)境文字教程
757
2023-12-09
工程分享:
模塊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是格式化的傳過(guò)來(lái)的所選的時(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ì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)綠夏網(wǎng)網(wǎng)站的支持!
#免責(zé)聲明#
本站[綠夏技術(shù)導(dǎo)航]提供的一切軟件、教程和內(nèi)容信息僅限用于學(xué)習(xí)和研究目的;不得將上述內(nèi)容用于商業(yè)或者非法用途,否則,一切后果請(qǐng)用戶自負(fù)。本站信息來(lái)自網(wǎng)絡(luò)收集整理,版權(quán)爭(zhēng)議與本站無(wú)關(guān)。您必須在下載后的24個(gè)小時(shí)之內(nèi),從您的電腦或手機(jī)中徹底刪除上述內(nèi)容。如果您喜歡該程序或內(nèi)容,請(qǐng)支持正版,購(gòu)買注冊(cè),得到更好的正版服務(wù)。我們非常重視版權(quán)問(wèn)題,如有侵權(quán)請(qǐng)郵件[admin@lxwl520.com]與我們聯(lián)系進(jìn)行刪除處理。敬請(qǐng)諒解!