文章目录
- 前言
- 一、效果展示
- 一、使用的技术
- 二、日期对象
- 1.指定时间
- 2.获取目前时间
- 三、源代码
- 总结
前言
今天带大家使用JavaScript定制一款网页时钟
一、效果展示
一、使用的技术
主要使用了js的日期对象,实现的时候先创建一个日期对象，并进行网页布局,对时间获取之后将时间填入对应的标签内。然后使用多线程实现时钟的变动。
二、日期对象
1.指定时间
代码如下：
<script>//创建日期对象d=new Date();//设置年月日d.setFullYear(1982,03,28);//创建一个数组var week=new Array(7);week[0]="周一";week[1]="周二";week[2]="周三";week[3]="周四";week[4]="周五";week[5]="周六";week[6]="周天";//将日期插入标签内function data(){// 获取年份document.getElementById("demo").innerHTML=d.getFullYear();// 获取从1970年1月1日至今的毫秒数document.getElementById("demo1").innerHTML=d.getTime();// 将当日的日期转换成字符串document.getElementById("demo2").innerHTML=d.toUTCString();// 获取当前周几document.getElementById("demo3").innerHTML=week[d.getDay()-1];// 获取具体时间document.getElementById("demo4").innerHTML=d;x=document.getElementById("demo5"); }
</script>
2.获取目前时间
代码如下：
<script>var today=new Date();var h=today.getHours();var m=today.getMinutes();var s=today.getSeconds();
</script>
三、源代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 如何使用 Date() 方法获得当日的日期。getFullYear()使用 getFullYear() 获取年份。getTime()getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。setFullYear()如何使用 setFullYear() 设置具体的日期。toUTCString()如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。getDay()如何使用 getDay() 和数组来显示星期，而不仅仅是数字。Display a clock如何在网页上显示一个钟表。--><style>.nav{display: inline-block;width: 100%;height: 900px;background-color: aqua;color: brown;font-size: 400px;font-weight: 700;line-height: 900px;text-align: center;}</style>
</head>
//οnlοad=startTime()是body页面加载完成后执行startTime函数
<body onload="startTime()"><script>d=new Date();d.setFullYear(1982,03,28);var week=new Array(7);week[0]="周一";week[1]="周二";week[2]="周三";week[3]="周四";week[4]="周五";week[5]="周六";week[6]="周天";function data(){// 获取年份document.getElementById("demo").innerHTML=d.getFullYear();// 获取从1970年1月1日至今的毫秒数document.getElementById("demo1").innerHTML=d.getTime();// 将当日的日期转换成字符串document.getElementById("demo2").innerHTML=d.toUTCString();// 获取当前周几document.getElementById("demo3").innerHTML=week[d.getDay()-1];// 获取具体时间document.getElementById("demo4").innerHTML=d;x=document.getElementById("demo5"); }function startTime(){var today=new Date();var h=today.getHours();var m=today.getMinutes();var s=today.getSeconds();// 在小于10的数字前加一个‘0’m=checkTime(m);s=checkTime(s);document.getElementById('demo5').innerHTML=h+":"+m+":"+s;//开启一个多线程,开启后本线程会继续执行。t=setTimeout(function(){startTime()},500);console.log("hello")console.log(s)return }function checkTime(i){if (i<10){i="0" + i;}return i;}</script><div class="nav" id="demo5"></div><br> <div id="demo">1</div><div id="demo1">2</div><div id="demo2">3</div><div id="demo3">4</div><div id="demo4">5</div><input type="button" onclick="data()" value="点我"></body>
</html>
总结
网页时钟主要考验我们对日期函数,多线程的掌握情况。知识点都在注释内,请大家多多阅读源代码。以求深入理解。
