前言
今天带大家使用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>
总结
网页时钟主要考验我们对日期函数,多线程的掌握情况。知识点都在注释内,请大家多多阅读源代码。以求深入理解。
