Un exemple de tutoriel sur l'utilisation du plug-in my97 dans js-js tutoriel-php.cn

Un exemple de tutoriel sur l'utilisation du plug-in my97 dans js

零下一度

Libérer： 2017-06-24 14:25:43

original

2594 Les gens l'ont consulté

Pour créer une page, vous avez besoin de deux zones de saisie de l'heure, une pour afficher l'heure actuelle et une pour afficher l'heure précédente, et une zone de liste déroulante de sélection pour contrôler la différence entre les deux zones de saisie de l'heure. comme suit :

My97DatePicer est utilisé ici, ce qui est simple et pratique. Le plug-in my97 est introduit pour définir le format de la zone de temps de saisie. voici l'heure actuelle. La case de l'heure de début ne peut pas être plus grande que la case de l'heure de fin

 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>

Copier après la connexion

Après cela, vous pouvez cliquer sur l'heure, mais ce que vous il faut afficher l'heure lorsque vous entrez dans la page. Le principe est d'obtenir la valeur de l'heure actuelle puis de la saisir dans la case heure

Obtenir l'heure actuelle, car le mois obtenu est de 0 à 11. , donc le mois obtenu plus un est le mois réel

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

Copier après la connexion

Rassemblez le temps obtenu dans une chaîne, car en considérant que lorsque le nombre de temps obtenu est inférieur à 10, le format est comme ça 2017-9-1 10:1:8, donc quand il est inférieur à 10, il est plus habituel de le assembler

 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;

Copier après la connexion

C'est la fin des temps , parce que la plage contrôlée par la liste déroulante de sélection correspond à l'heure actuelle et que l'heure de début est limitée par la liste déroulante, nous devons trouver le décalage horaire

C'est la milliseconde du heure actuelle Numéro 1 var time = date.getTime();

Il s'agit de la plage horaire contrôlée par le drop- case vers le bas, convertie en millisecondes Nombre

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

Copier après la connexion

Heure actuelle - heure de la liste déroulante = heure de début, puis convertissez l'heure de début au format standard

 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;

Copier après la connexion

Obtenez l'heure de début et l'heure de fin et entrez-les dans la zone de saisie de l'heure

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

Copier après la connexion

Vous pouvez écrire les js ci-dessus dans une fonction, sélectionnez la plage horaire de contrôle d'exécution de la fonction de contrôle, la liste complète est la suivante

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!