使用JS实现动态时钟
本文实例为大家分享了JS实现动态时钟的具体代码，供大家参考，具体内容如下
利用setTime()实现动态的时钟效果
代码如下
<html> <head> <meta charset='utf-8'> <title>正在运行的时钟</title> <style type='text/css'> /*设置样式：无边框的文本框*/ input, #clock {width: 390;font-size: 30px;font-weight: 900;color: #FFFFFF;background-color: #930;border: 8px double #900; } </style> </head> <body onLoad='disptime( ) '> <form name='myform'> <input name='myclock' type='text' value='' size='20'> </form> <span id='clock'></span> <script language='JavaScript'> function disptime() {var time = new Date(); //获得当前时间var year = time.getFullYear(); //获得年月日var month = time.getMonth(); //获得年月日var date = time.getDate(); //获得年月日var hour = time.getHours(); //获得小时、分钟、秒var minute = time.getMinutes();var second = time.getSeconds();if (minute < 10) //如果分钟只有1位，补0显示 minute = '0' + minute;if (second < 10) //如果秒数只有1位，补0显示 second = '0' + second;/*设置文本框的内容为当前时间*/document.getElementById(’clock’).innerHTML = year + '年' + month + '月' + date + '日' + hour + ':' + minute + ':' + seconddocument.myform.myclock.value = year + '年' + month + '月' + date + '日' + hour + ':' + minute + ':' + second/*设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/var myTime = setTimeout('disptime()', 1000); } </script> </body></html>
效果如图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备