Maison > Article > interface Web > Un exemple de tutoriel sur l'utilisation du plug-in my97 dans js

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

零下一度original: 2017-06-24 14:25:432549parcourir

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>

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

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;

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;

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;

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

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Un exemple de production d'animation bidimensionnelle H5+JSArticle suivant：Un exemple de production d'animation bidimensionnelle H5+JS

Articles Liés

Voir plus