如何使用JavaScript实现制作动态时钟
程序员文章站
2022-05-07 10:39:13
...
1:clock.js
/** * 动态显示当前时间 */function showDateTime(){
var sWeek=new Array("日","一","二","三","四","五","六"); //声明数组存储一周七天
var myDate=new Date(); //获取当天日期
var sYear=myDate.getFullYear(); //获取年
var sMonth=myDate.getMonth()+1; //获取月
var sDate=myDate.getDate(); //获取日
var sDay=sWeek[myDate.getDay()]; //根据得到的数字星期,利用数组转化为星期
var h=myDate.getHours(); //获取小时
var m=myDate.getMinutes(); //获取分钟
var s=myDate.getSeconds(); //获取秒 //输入日期和星期
document.getElementById("date").innerHTML=(sYear+"年"+sMonth+"月"+sDate+"日"+"星期"+sDay+"<br/>"); h = formatTwoDigits(h); //格式化小时,如果不足两位在前面补0 m = formatTwoDigits(m); //格式化分钟,如果不足两位在前面补0 s = formatTwoDigits(s); //格式化秒钟后,如果不足两位在前面补0 //显示时间 document.getElementById("msg").innerHTML=(h+":"+m+":"+s+"<br/>"); setTimeout("showDateTime()",1000);//每秒执行一次showDateTime函数}window.onload=showDateTime;//在整个页面加载完成后执行此函数//如果输入数是一位数,则在十位上补0function formatTwoDigits(s) { if (s<10) return "0"+s; else return s;
}
2:clock.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>制作动态时钟</title>
<script type="text/javascript" src="clock.js"></script></head><body>
<h1 id="date"></h1>
<span id="msg" style="font-size: 30px;background-color: greenyellow;">
</span>
</body>
</html>
以上就是如何使用JavaScript实现制作动态时钟 的详细内容，更多请关注其它相关文章！
推荐阅读
-
Javascript实现动态时钟效果
-
javascript如何使用函数random来实现课堂随机点名方法详解
-
如何给GIF动态图添加水印?使用闪电GIF制作软件添加水印的方法
-
如何把图片制作成GIF动态图?使用闪电GIF制作动态图的方法
-
如何使用jquery动态加载js,css文件实现代码
-
如何使用24行JavaScript代码实现Redux
-
使用@PathVariable注解如何实现动态传值
-
JavaScript结合PHP实现网页制作中双下拉菜单的动态实现
-
如何用PS绘制动态图像呢?使用PS制作动态心型动画教程
-
【MongoDB】在Mongodb使用shell实现与javascript的动态交互