js에서 my97 플러그인을 사용하는 방법에 대한 예제 튜토리얼
- 零下一度원래의
- 2017-06-24 14:25:432573검색
페이지를 만들려면 두 개의 시간 입력 상자가 필요합니다. 하나는 현재 시간을 표시하고 다른 하나는 이전 시간을 표시하며, 두 시간 입력 상자의 차이를 제어하는 선택 드롭다운 상자는 다음과 같습니다. :
여기서 사용되는 것은 My97DatePicer 입니다. my97 플러그인을 도입하고 여기서 설정하는 최대 시간은 현재 시간이 될 수 없습니다.
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:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endTime\')}'&&'%y-%M-%d'})">13 <br/>14 结束时间：<input type="text" id="endTime" class="Wdate" onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'startTime\')}',maxDate:'%y-%M-%d'})">15 </body>
이렇게 마친 후 시간을 클릭해도 되지만, 페이지 진입 시 현재 시간을 표시해 주는 것이 원칙입니다.
현재 시간을 가져옵니다. 얻은 달은 0-11이므로 월에 1을 더한 값을 얻습니다.
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();
는 얻은 시간을 문자열로 표시합니다. 획득한 시간 개수가 10개 미만이면 형식은 2017-9-1 10:1:8과 같으니 10개 미만이면 연결해 주세요. 커스텀
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;여기까지가 끝입니다 시간, 선택 드롭다운 상자로 제어되는 범위는 현재 시간이고, 시작 시간은 드롭다운 상자로 제한되기 때문에 시차를 알아내야 합니다
이것은 시간의 밀리초 단위입니다. current time 1 var time = date.getTime();
이것은 드롭다운 상자에 의해 제어되는 시간 범위이며, 밀리초로 변환됩니다.
var cTime = $('#sDate').val()*24*3600*1000;현재 시간 - 드롭다운 상자 시간 = 시작 시간을 설정한 다음 시작 시간을 설정합니다. 표준 형식으로 변환
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;시작 시간과 종료 시간을 가져와서 시간 입력란에 입력하세요
$('#endTime').val(endTimeStr);
$('#startTime').val(startTimeStr);위 js를 함수에 작성하고, 제어 기능 실행 제어 시간 범위, 전체 목록은 다음과 같습니다
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 });
위 내용은 js에서 my97 플러그인을 사용하는 방법에 대한 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：H5+JS 2차원 애니메이션 제작 사례다음 기사：H5+JS 2차원 애니메이션 제작 사례