,,利用JavaScript实现简单的网页时钟

本文主要介绍了利用JavaScript实现一个简单的网页时钟，主要是利用js日期对象。实现时，先创建一个date对象，进行网页布局。获得时间后，将时间填入相应的标签中。然后用多线程来改变时钟。有需要的朋友可以参考一下。

一、效果展示

二、使用的技术

主要使用js日期对象。实现时先创建一个date对象，进行网页布局。获得时间后，将时间填入相应的标签中。然后用多线程来改变时钟。

三、日期对象

1.指定时间

代码如下：

脚本

//创建一个日期对象

d=新日期()；

//设置年、月、日。

(1982年3月28日)；

//创建一个数组

var week=新数组(7)；

周[0]='星期一'；

星期[1]='星期二'；

星期[2]='星期三'；

星期[3]='星期四'；

星期[4]='星期五'；

星期[5]='星期六'；

星期[6]='星期日'；

//将日期插入标签

函数数据(){

//获取年份

document.getElementById('demo ')。innerHTML=d . get full year()；

//获取从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(' demo 5 ')；

}

/脚本

2.获取目前时间

代码如下：

脚本

var today=new Date()；

var h=today . get hours()；

var m=today . get minutes()；

var s=today . get seconds()；

/脚本

三、源代码

！文档类型html

html lang='en '

头

meta charset='UTF-8 '

meta http-equiv=' X-UA-Compatible ' content=' IE=edge '

meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '

标题文档/标题

！-

如何使用Date()方法获取今天的日期？

getFullYear()

使用getFullYear()获取年份。

getTime()

GetTime()返回自1970年1月1日以来的毫秒数。

setFullYear()

如何使用setFullYear()设置具体日期？

toUTCString()

如何使用toUTCString()将今天的日期(根据UTC)转换成字符串。

getDay()

如何使用getDay()和array来显示星期而不仅仅是数字。

显示时钟

如何在网页上显示时钟？

风格。导航{

显示：内嵌-块；

宽度：100%；

高度：900px

背景色：浅绿色；

颜色：棕色；

字体大小：400像素；

字体粗细：700；

行高：900px

文本对齐：居中；

}

/风格

/头

//onlad=startTime()是加载正文页面后执行的start time函数。

body onload='startTime()'

脚本

d=新日期()；

(1982年3月28日)；

var week=新数组(7)；

周[0]='星期一'；

星期[1]='星期二'；

星期[2]='星期三'；

星期[3]='星期四'；

星期[4]='星期五'；

星期[5]='星期六'；

星期[6]='星期日'；

函数数据(){

//获取年份

document.getElementById('demo ')。innerHTML=d . get full year()；

//获取从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(' demo 5 ')；

}

函数startTime(){

var today=new Date()；

var h=today . get hours()；

var m=today . get minutes()；

var s=today . get seconds()；

//在小于10的数字前添加“0”

m=检查时间(m)；

s=检查时间(秒)；

document.getElementById('demo5 ')。innerHTML=h ':' m ':' s；

//启动一个多线程，之后这个线程会继续执行。

t=setTimeout(function(){ start time()}，500)；

console.log('hello ')

控制台.日志

}

功能检查时间(一){

if (i10){

i=' 0 ' i

}

返回I；

}

/脚本

div class='nav' id='demo5'/divbr

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

type=' button ' onclick=' data()' value=' click me '

/body

/html

总结：

网页时钟主要测试我们对日期函数和多线程的掌握。知识点都在评论里，请多读源代码。为了更深入的了解。

关于用JavaScript实现简单web时钟的这篇文章到此结束。有关JavaScript web clock的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。