Ein Beispiel-Tutorial zur Verwendung des my97-Plug-Ins in js-js-Tutorial-php.cn

Ein Beispiel-Tutorial zur Verwendung des my97-Plug-Ins in js

零下一度

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

Original

2594 Leute haben es durchsucht

Um eine Seite zu erstellen, benötigen Sie zwei Zeiteingabefelder, eines zur Anzeige der aktuellen Uhrzeit und eines zur Anzeige der vorherigen Zeit sowie ein Auswahl-Dropdown-Feld zur Steuerung der Differenz zwischen den beiden Zeiteingabefeldern. Der Effekt ist wie folgt:

Hier wird My97DatePicer verwendet, das einfach und bequem ist. Das My97-Plugin wird eingeführt, um das Format des Eingabezeitfelds festzulegen Hier ist die aktuelle Uhrzeit. Das Startzeitfeld darf nicht größer sein als das Endzeitfeld.

 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>

Nach dem Login kopieren

Danach können Sie auf die Uhrzeit klicken, aber was Sie möchten Sie müssen die Uhrzeit anzeigen, wenn Sie die Seite aufrufen. Das Prinzip besteht darin, den aktuellen Zeitwert abzurufen und ihn dann in das Zeitfeld einzugeben.

Erhalten Sie die aktuelle Uhrzeit, da der erhaltene Monat zwischen 0 und 11 liegt , also ist der erhaltene Monat plus eins der tatsächliche Monat

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();

Nach dem Login kopieren

Fügen Sie die erhaltene Zeit in einer Zeichenfolge zusammen, denn wenn die erhaltene Zeitzahl kleiner als 10 ist, ist das Format das Format ist so 2017-9-1 10:1:8, wenn es also weniger als 10 ist, ist es üblicher, es zusammenzufügen

 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;

Nach dem Login kopieren

Dies ist die Endzeit , da der durch das Auswahl-Dropdown-Feld gesteuerte Bereich bis zur aktuellen Zeit reicht und die Startzeit durch das Dropdown-Feld begrenzt ist, müssen wir den Zeitunterschied ermitteln

Dies ist die Millisekunde des aktuelle Zeit Nummer 1 var time = date.getTime();

Dies ist der Zeitbereich, der durch das Drop- gesteuert wird. Down-Box, konvertiert in Millisekunden Zahl

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

Nach dem Login kopieren

Aktuelle Zeit - Dropdown-Box Zeit = Startzeit, und konvertieren Sie dann die Startzeit in das Standardformat

 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;

Nach dem Login kopieren

Erhalten Sie die Start- und Endzeit und geben Sie sie in das Zeiteingabefeld ein

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

Nach dem Login kopieren

Sie können die oben genannten js in eine Funktion schreiben und auswählen Für den Zeitbereich der Steuerungsfunktionsausführung lautet die vollständige Liste wie folgt

  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     });

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEin Beispiel-Tutorial zur Verwendung des my97-Plug-Ins in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!