<!doctype html> <html> <head> <meta charset="utf-8"> <title>带按钮开关的Form时钟</title> <style> body{ background: #aebcdf; } form{ position:absolute; left:50; top:50; z-index:5; } input{ color:red; } input[type="text"]{ color: black; } .center{ position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid yellow; width: 220px; height: 42px; padding: 10px; } </style> </head> <body> <div> <form > <input type="text" value="" size=30 onFocus="this.blur()" ><br> <input type="button" value="off" >关 <input type="button" value=" on">开 </form> <div> </body> <script> //公共事件 var common={ //获取id getid:function (id){ return document.getElementById(id); }, //绑定事件 on:function (element,eventName,listener){ if (element.addEventListener){ element.addEventListener(eventName,listener,false); } else if (element.attachEvent){ element.attachEvent('on'+eventName,listener); } else element['on'+eventName]=listener; }, } //时间的方法与属性 var time={ //用来标记是开还是关，0表示关 enabled:0, //存储星期 day:["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], //设定和显示时间 //注意中间用了toLocaleString(); Time_Set:function () { var today = new Date(); TM=window.setTimeout('time.Time_Set()', 1000); var timeStr=today.toLocaleString()+" "+time.day[today.getDay()]; document.clock.disp.value = timeStr; console.log(today.toLocaleString()); }, } //全局定时函数名字 var TM; //点击开事件 var onbtn=common.getid("onbtn"); common.on(onbtn,'click',function(){ if(time.enabled == 0) { time.Time_Set(); time.enabled = 1; } }); //点击关事件 var offbtn=common.getid("offbtn"); common.on(offbtn,'click',function(){ if( time.enabled==1 ) { document.clock.disp.value=''; clearTimeout( TM ); time.enabled = 0; } }); </script> </html>
4、年龄提示器
网页打开时依次弹出3个输入对话框，分别需要你输入你的出生日期（年月日），然后显示内容，显示你的出生年月，距离下一次你的生日还有多少时间，以及你活了多少时间。效果图：
源代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>年龄提示器</title> <style> div{ position: absolute; top:50%; left: 50%; transform:translate(-50%,-50%); width: 375px; height: 200px; border: 2px solid red; padding: 20px; } p{ margin: 0; margin-bottom: 10px; } input{ margin-bottom: 10px; } </style> </head> <body bgcolor="f9fcb6" > <div> <form> <p></p> <p></p> <input type="text" size="47" value=""> <p>I've been alive for...</p> <input type="text" size="47" value=""> <p>您已在本站停留了</p> <input type=text size=10 value=""> <br> </form> </div> </body> <script > function getid(id){ return document.getElementById(id); } var timerID=window.setTimeout("showtime()",1); //弹出输入框，获取用户的出生日期,注意要把日期转化为数字 var bMonth =parseInt(prompt('Which month were you born in?(月份)','1-12')); var bDate =parseInt(prompt('Which day were you born on?(天)','1-31')); var bYear =parseInt(prompt('Which year were you born in?(年份)','1900-'+new Date().getFullYear())); var tMonth = ['January','February','March','April','May','June','July','August','September','October','November','December']; var corrMonth = tMonth[bMonth-1]; getid("birday").innerHTML=" I was born <b>"+corrMonth+", "+bDate+", "+bYear+"</b>. (<b>"+bMonth+"https://www.jb51.net/"+bDate+"https://www.jb51.net/"+bYear+"</b>)"; //传入格式化后的时间，用来计算两个时间差，nextAgeDay > today function computeTime(nextAgeDay,today){ var day={}; var liveSec=nextAgeDay.getTime(); var lTime = today.getTime(); var daysec=24*60*60*1000; var hoursec=60*60*1000; var minsec=60*1000; var tt=(-lTime+liveSec); //计算时间差，天，小时，分，秒 day._1day=Math.floor(tt/daysec); day._1hour=Math.floor((tt-day._1day*daysec)/hoursec); day._1min=Math.floor((tt-day._1day*daysec-day._1hour*hoursec)/minsec); day._1sec=Math.floor((tt-day._1day*daysec-day._1hour*hoursec-day._1min*minsec)/1000); return day; } //计算距离下一岁还有多少天的时候，可以采用与现在的秒数相减getTime; function showtime() { //获取当前日期 var today = new Date(); var month = today.getMonth() + 1; var date = today.getDate(); var year = today.getFullYear(); //计算下一次生日是哪一年 var nextAgeYear; var yourAge = year - bYear; if (bMonth < month || ((bMonth == month) && (date > bdate))) { yourAge--; nextAgeYear=year+1; } else { nextAgeYear=year; } //下一年几岁 var nextAge = yourAge + 1; //将下一次生日时间格式化，默认时间在00:00;计算距离下一次生日还还有多长时间 var nextAgeDay = new Date(""+nextAgeYear+","+bMonth+", "+bDate+" , 00:00"); var day=computeTime(nextAgeDay,today); //将出生日期时间格式化，默认时间在00:00;计算已经活了多久了 var bornAgeDay = new Date(""+bYear+","+bMonth+", "+bDate+" , 00:00"); var lday=computeTime(today,bornAgeDay); //将结果输出 document.forms[0].nextYear.value =""+day._1day+"days, "+day._1hour+"hours, "+day._1min+"minutes, "+day._1sec+"seconds"; getid("age").innerHTML=" I am <b>"+yourAge+"</b> years old, and will turn <b>"+nextAge+"</b> in:"; document.forms[0].liveYear.value =""+lday._1day+"days, "+lday._1hour+"hours, "+lday._1min+"minutes, "+lday._1sec+"seconds"; timerID = window.setTimeout("showtime()",1000); } //第三个输入框,计算停留时间 var sec=0; var min=0; var hou=0; var idt=window.setTimeout("update();",1); function update() { if(sec==60){sec=0;min+=1;} if(min==60){min=0;hou+=1;} document.forms[0].input1.value=hou+"时"+min+"分"+sec+"秒"; idt=window.setTimeout("update();",1000); sec++; } </script> </html>
5、得到文件的最后修改时间
本节主要讲获取HTML文件的最后修改时间。效果如下，其实跟前面的例子很像。
源代码：