关于时间控制和制定时间日期
关于时间控制，动画效果
<meta charset="UTF-8"> <title></title> <style> #dh { width: 50px; height: 50px; background-color: royalblue; } </style> </head> <body> <div id="dh"></div> </body> <script> var dh = document.getElementById("dh"); //alert(dh.offsetLeft); function move() { dh.style.marginLeft = dh.offsetLeft + 1 + 'px'; } var x = window.setInterval('move()', 20); var y = window.setInterval('move()', 500); function clear() { window.clearInterval(x); } window.setTimeout("clear()",2500); </script>
显示年月日代码
<body> <select id="year"></select> <select id="month"></select> <select id="day"></select> </body> <script> var time = new Date(); var year_now = time.getFullYear(); var slt_year = document.getElementById('year'); var slt_month = document.getElementById('month'); var slt_day = document.getElementById('day'); for(var i = 1990; i <= year_now; i++) { var new_opt = document.createElement('option'); new_opt.innerText = i; slt_year.appendChild(new_opt); } for(var i = 1; i <= 12; i++) { var new_opt2 = document.createElement('option'); new_opt2.innerText = i; slt_month.appendChild(new_opt2); } slt_year.onchange = function() { change(); } slt_month.onchange = function() { change(); } function change() { var year = slt_year.selectedOptions[0].innerText; var month = slt_month.selectedOptions[0].innerText; if(month == 4 || month == 6 || month == 9 || month == 11) { add_day(30); //增加天数 } else if(month == 2) { if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { add_day(29) } else { add_day(28) } } else { add_day(31); } } function add_day(i_max) { slt_day.innerText = ''; for(var i = 1; i <= i_max; i++) { var new_opt3 = document.createElement('option'); new_opt3.innerText = i; slt_day.appendChild(new_opt3); } } </script>
这个要考虑平年闰年还有每个月三十天或者三十一天。
显示年月日表单，循环的方法。
<body> <select id='year' size='1' style="width: 80px;"></select> <select id='month' size='1' style="width: 80px;"></select> <select id='day' size='1' style="width: 80px;"></select> </body> </html> <script> var year = document.getElementById('year'); var month = document.getElementById('month'); var day = document.getElementById('day'); for(i=1990;i<2018;i++){ var opt=document.createElement('option'); opt.innerText=i; year.appendChild(opt); } for(j=1;j<13;j++){ var opt2=document.createElement('option'); opt2.innerText=j; month.appendChild(opt2); } for(k=1;k<32;k++){ var opt3=document.createElement('option'); opt3.innerText=k; day.appendChild(opt3); } month.onchange=function(){ day.options[28].style.display='inline' day.options[29].style.display='inline' day.options[30].style.display='inline' y=year.selectedOptions[0].value; m=month.selectedOptions[0].value; if(y%4==0&&y%100!==0||y%400==0){ if(m==2){ day.options[29].style.display='none' day.options[30].style.display='none' }else{ if(m==4|m==6|m==9|m==11){ day.options[30].style.display='none' } } }else{ if(m==2){ day.options[28].style.display='none' day.options[29].style.display='none' day.options[30].style.display='none' }else{ if(m==4|m==6|m==9|m==12){ day.options[30].style.display='none' } } } } </script>
这个办法比较笨，一步步下来还是很清晰的。考虑到所有会出现的情况。
