前言

今天带大家使用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>

总结

网页时钟主要考验我们对日期函数,多线程的掌握情况。知识点都在注释内,请大家多多阅读源代码。以求深入理解。

【精选】JavaScript网页时钟相关推荐

【JavaScript】编写一个炫彩的网页时钟
利用了Canvas制作的,可以转呀. 示意图如下: <!DOCTYPE html> <html> <head><meta http-equiv = " ...
JavaScript制作网页时钟
javascript 运用时间戳实现时间获取并换算成时分秒,并结合css相关属性实现时钟转动效果图-实现网页版时钟 <!DOCTYPE html> <html lang=&quo ...
HTML+CSS+Javascript制作简单版网页时钟
HTML+CSS+Javascript制作简单版网页时钟 <!DOCTYPE html> <html><head><meta charset="ut ...
javascript网页设计期末作业购物网站
本次主要介绍下之前上传的作业的主要功能,网页下载地址: 网页设计期末作业购物网站如果对本文章内容还有疑问可以观看视频,也可以在评论区留言: javascript 网页设计期末作业购物网站网页实 ...
HTML网页时钟设计（js实现）
一.简述: 如果自己创建闲麻烦可以下载源码,代码的素材也发出,在文章的下面可自行下载. 二.源码下载: https://download.csdn.net/download/m0_45329584/1 ...
优雅的时钟翻页效果，让你的网页时钟与众不同！
你有没有想过给你的网页时钟添加翻页效果,让它更引人注目,更酷炫吗?如果是的话,你来对地方了! 子辰这篇文章将教你如何通过简单的步骤,为你的网页时钟添加翻页效果. 无论你是 web 开发初学者或是有一定 ...
《HTML、CSS、JavaScript 网页制作从入门到精通》——6.6 单元格属性
本节书摘来自异步社区<HTML.CSS.JavaScript 网页制作从入门到精通>一书中的第6章,第6.6节,作者:[美]John Resig(莱西格) , Bear Bibeault( ...
Javascript网页滚动方法
Javascript网页滚动方法作者:不详来源于:源码下载吧发布时间:2007-6-6 16:24:26 [ 字体:大中小 ] 我想大家都看过各种各样的滚动(最常用的就是用在新闻的更新上 ...
JavaScript的时钟小程序
效果如下图所示(每一秒刷新一次): 详细代码如下: <!DOCTYPE html> <html><head><title>JavaScript的时钟小程 ...

【精选】JavaScript网页时钟

文章目录

前言

一、效果展示

一、使用的技术

二、日期对象

1.指定时间

2.获取目前时间

三、源代码

总结

【精选】JavaScript网页时钟相关推荐

最新文章

热门文章