使用CSS结合JavaScript可以很方便地实现在网页上动态显示时间的功能,主要应用了CSS的input方法,JavaScript的Date对象中的设置时间间隔setInterval()方法.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="clock"> <input type="button" value="begin" onclick="begin_click()"> <input type="botton" value="end" onclick="end_click()" sytle="width:20px"> <script> function gettime(){ var d=new Date(); var year=d.getFullYear(); var month=d.getMonth()+1; var day=d.getDate(); var hour=d.getHours(); var minute=d.getMinutes(); var second=d.getSeconds(); ret=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second; return(ret) } function begin(){ var current_time=gettime(); var ret=document.getElementById("clock"); ret.value=current_time; } function end_click(){ var ret=document.getElementById("clock"); ret.value=null; clearInterval(ID); } function begin_click(){ ID=setInterval(begin,1000); } </script> </body> </html>
程序运行后,点击屏幕上begin按钮,则开始动态显示日期和时间,间隔为1秒更新一次,若点击end按键则停止显示,并清空左边时间,如下图
