An example tutorial on using my97 plug-in in js-JS Tutorial-php.cn

An example tutorial on using my97 plug-in in js

零下一度

Release： 2017-06-24 14:25:43

Original

2546 people have browsed it

To create a page, you need two time input boxes, one to display the current time and one to display the previous time, and a select drop-down box to control the difference between the two time input boxes. The effect is as follows:

My97DatePicer is used here, which is simple and convenient. Introduce the my97 plug-in and set the format of the input time box. The maximum time set here is the current time. The start time box cannot be greater than the end time box.

 1 <script src="lib/date/WdatePicker.js?1.1.11"></script> 2 <body> 3 选择时间范围：<select name="selectDate" id="sDate"> 4                 <option value="1">一天</option> 5                 <option value="2">两天</option> 6                 <option value="3">三天</option> 7                 <option value="7">一周</option> 8                 <option value="14">二周</option> 9                 <option value="21">三周</option>10             </select>11             <br/>12             开始时间：<input type="text" id="startTime" class="Wdate" onFocus="WdatePicker({lang:&#39;zh-cn&#39;,dateFmt:&#39;yyyy-MM-dd HH:mm:ss&#39;,maxDate:&#39;#F{$dp.$D(\&#39;endTime\&#39;)}&#39;&&&#39;%y-%M-%d&#39;})">13             <br/>14             结束时间：<input type="text" id="endTime" class="Wdate" onFocus="WdatePicker({lang:&#39;zh-cn&#39;,dateFmt:&#39;yyyy-MM-dd HH:mm:ss&#39;,minDate:&#39;#F{$dp.$D(\&#39;startTime\&#39;)}&#39;,maxDate:&#39;%y-%M-%d&#39;})">15 </body>

Copy after login

After finishing these, you can click on the time, but what you need is to display the current time when entering the page. The principle is to get the current time value and then enter it into the time box

Get the current time, because the obtained month is from 0-11, so the obtained month plus one is the real month

1 var date = new Date();2 var year = date.getFullYear();3 var month = date.getMonth()+1;4 var day = date.getDate();5 var hour = date.getHours();6 var minutes = date.getMinutes();7 var seconds = date.getSeconds();

Copy after login

Put the obtained time into a string, Because considering that when the obtained time number is less than 10, the format is like this 2017-9-1 10:1:8, so when it is less than 10, it is more in line with the custom

 1 var endTimeStr,startTimeStr; 2  var str1,str2,str3,str4,str5; 3         if(month<10){ 4             str1='-0'; 5         }else { 6             str1='-' 7         } 8  9         if(day<10){10             str2='-0';11         }else{12             str2='-';13         }14 15         if(hour<10){16             str3=' 0';17         }else {18             str3=' ';19         }20         if(minutes<10){21             str4=':0';22         }else {23             str4=':';24         }25         if(seconds<10){26             str5=':0';27         }else {28             str5=':';29         }30 31 32     endTimeStr = year+str1+month+str2+day+str3 +hour+str4+minutes+str5+seconds;

Copy after login

This What we get is the end time, because the range controlled by the select drop-down box is to the current time, and the start time is limited by the drop-down box. We need to find out the time difference

This is the number of milliseconds of the current time 1 var time = date.getTime();

This is the time range controlled by the drop-down box, converted into milliseconds

var cTime = $('#sDate').val()*24*3600*1000;

Copy after login

Current time-drop-down box time=start time, and then convert the start time into the standard format

 1 var dif = time-cTime; 2 var nTime = new Date(dif); 3  4 var year1 = nTime.getFullYear(); 5 var month1 = nTime.getMonth()+1; 6  7 var day1 = nTime.getDate(); 8  9 var hour1 = nTime.getHours();10 var minutes1 = nTime.getMinutes();11 var seconds1 = nTime.getSeconds();12 var str11.str12,str13,str14,str15;13 14         if(month1<10){15             str11='-0';16         }else {17             str11='-'18         }19 20         if(day1<10){21             str12='-0';22         }else{23             str12='-';24         }25 26         if(hour1<10){27             str13=' 0';28         }else {29             str13=' ';30         }31         if(minutes1<10){32             str14=':0';33         }else {34             str14=':';35         }36         if(seconds1<10){37             str15=':0';38         }else {39             str15=':';40         }41 42     startTimeStr = year1+str11+month1+str12+day1+str13 +hour1+str14+minutes1+str15+seconds1;

Copy after login

Get the start time and end time and enter them into Just enter the time input box

$('#endTime').val(endTimeStr);
$('#startTime').val(startTimeStr);

Copy after login

The above js can be written as a function, and the select control function execution control time range is as follows

  1 function timeSet(){  2     3          var date = new Date();  4          var time = date.getTime();  5   6          var year = date.getFullYear();  7          var month = date.getMonth()+1;  8           9          var day = date.getDate(); 10  11           12          13  14         var hour = date.getHours(); 15         var minutes = date.getMinutes(); 16         var seconds = date.getSeconds(); 17         var endTimeStr,startTimeStr; 18         var str1,str2,str3,str4,str5; 19         if(month<10){ 20             str1='-0'; 21         }else { 22             str1='-' 23         } 24  25         if(day<10){ 26             str2='-0'; 27         }else{ 28             str2='-'; 29         } 30  31         if(hour<10){ 32             str3=' 0'; 33         }else { 34             str3=' '; 35         } 36         if(minutes<10){ 37             str4=':0'; 38         }else { 39             str4=':'; 40         } 41         if(seconds<10){ 42             str5=':0'; 43         }else { 44             str5=':'; 45         } 46  47  48     endTimeStr = year+str1+month+str2+day+str3 +hour+str4+minutes+str5+seconds; 49  //求时间差， 50  var cTime = $('#sDate').val()*24*3600*1000; 51      52     var dif = time-cTime; 53      54     var nTime = new Date(dif); 55  56     var year1 = nTime.getFullYear(); 57      var month1 = nTime.getMonth()+1; 58  59      var day1 = nTime.getDate(); 60  61     var hour1 = nTime.getHours(); 62     var minutes1 = nTime.getMinutes(); 63     var seconds1 = nTime.getSeconds(); 64  65     var str11.str12,str13,str14,str15; 66  67         if(month1<10){ 68             str11='-0'; 69         }else { 70             str11='-' 71         } 72  73         if(day1<10){ 74             str12='-0'; 75         }else{ 76             str12='-'; 77         } 78  79         if(hour1<10){ 80             str13=' 0'; 81         }else { 82             str13=' '; 83         } 84         if(minutes1<10){ 85             str14=':0'; 86         }else { 87             str14=':'; 88         } 89         if(seconds1<10){ 90             str15=':0'; 91         }else { 92             str15=':'; 93         } 94  95     startTimeStr = year1+str11+month1+str12+day1+str13 +hour1+str14+minutes1+str15+seconds1; 96  97     $('#endTime').val(endTimeStr); 98     $('#startTime').val(startTimeStr); 99     }100 101 102     timeSet();103 104     $('#sDate').on('change',function(){105 106         timeSet();107     108     });

Copy after login

The above is the detailed content of An example tutorial on using my97 plug-in in js. For more information, please follow other related articles on the PHP Chinese website!