动态时钟显示效果

代码实现

1.创建html文件（时钟显示.html）

2.设置html标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>动态时钟显示</title></head><body><div class="div"><div class="firstDiv"></div><div class="lastDiv"></div></div></body>
</html>

3.设置html标签的CSS样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>动态时钟显示</title><style>.div{/* 宽度400 */width: 400px;/*高度400  */height: 400px;/* 设置背景色 */background-color: cornflowerblue;/* 设置边框圆角200 */border-radius: 200px;/* 设置字体粗细700 */font-weight: 700;/* 设置文本颜色白色 */color: white;/* 设置外边距：上下100px，左右剧中  */margin: 100px auto;}.firstDiv{/* 设置宽度300 */width: 300px;/* 设置高度100 */height: 100px;/* 设置行高100 */line-height: 100px;/* 设置内容剧中显示 */text-align: center;/* 设置字体大小30 */font-size: 30px;/* 设置相对定位 */position: relative;/* 设置顶端移动100 */top: 100px;/* 设置左移动50 */left: 50px;}.lastDiv{/* 设置宽度300 */width: 300px;/* 设置高度100 */height: 100px;/* 设置内容剧中显示 */text-align: center;/* 设置字体大小30 */font-size: 30px;/* 设置相对定位 */position: relative;/* 设置顶端移动100 */top: 100px;/* 设置左移动50 */left: 50px;}</style></head><body><div class="div"><div class="firstDiv"></div><div class="lastDiv"></div></div></body>
</html>

4.设置JavaScript

1)创建函数和Date

Date返回的是中国标准时间：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>动态时钟显示</title><style>.div{/* 宽度400 */width: 400px;/*高度400  */height: 400px;/* 设置背景色 */background-color: cornflowerblue;/* 设置边框圆角200 */border-radius: 200px;/* 设置字体粗细700 */font-weight: 700;/* 设置文本颜色白色 */color: white;/* 设置外边距：上下100px，左右剧中  */margin: 100px auto;}.firstDiv{/* 设置宽度300 */width: 300px;/* 设置高度100 */height: 100px;/* 设置行高100 */line-height: 100px;/* 设置内容剧中显示 */text-align: center;/* 设置字体大小30 */font-size: 30px;/* 设置相对定位 */position: relative;/* 设置顶端移动100 */top: 100px;/* 设置左移动50 */left: 50px;}.lastDiv{/* 设置宽度300 */width: 300px;/* 设置高度100 */height: 100px;/* 设置内容剧中显示 */text-align: center;/* 设置字体大小30 */font-size: 30px;/* 设置相对定位 */position: relative;/* 设置顶端移动100 */top: 100px;/* 设置左移动50 */left: 50px;}</style></head><body><div class="div"><div class="firstDiv"></div><div class="lastDiv"></div></div></body><script>function dateTime(){//获取时间保存到date变量var date = new Date();}</script>
</html>

2）获取date变量中的年、月、日，拼接成日期

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>动态时钟显示</title><style>.div{/* 宽度400 */width: 400px;/*高度400  */height: 400px;/* 设置背景色 */background-color: cornflowerblue;/* 设置边框圆角200 */border-radius: 200px;/* 设置字体粗细700 */font-weight: 700;/* 设置文本颜色白色 */color: white;/* 设置外边距：上下100px，左右剧中  */margin: 100px auto;}.firstDiv{/* 设置宽度300 */width: 300px;/* 设置高度100 */height: 100px;/* 设置行高100 */line-height: 100px;/* 设置内容剧中显示 */text-align: center;/* 设置字体大小30 */font-size: 30px;/* 设置相对定位 */position: relative;/* 设置顶端移动100 */top: 100px;/* 设置左移动50 */left: 50px;}.lastDiv{/* 设置宽度300 */width: 300px;/* 设置高度100 */height: 100px;/* 设置内容剧中显示 */text-align: center;/* 设置字体大小30 */font-size: 30px;/* 设置相对定位 */position: relative;/* 设置顶端移动100 */top: 100px;/* 设置左移动50 */left: 50px;}</style></head><body><div class="div"><div class="firstDiv"></div><div class="lastDiv"></div></div></body><script>function dateTime(){//获取时间保存到date变量var date = new Date();console.log(date);//获取date中的年、月、日var dates = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';}</script>
</html>

3）获取date变量中的小时、分钟、秒和日期，拼接成时间

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>动态时钟显示</title><style>.div{/* 宽度400 */width: 400px;/*高度400  */height: 400px;/* 设置背景色 */background-color: cornflowerblue;/* 设置边框圆角200 */border-radius: 200px;/* 设置字体粗细700 */font-weight: 700;/* 设置文本颜色白色 */color: white;/* 设置外边距：上下100px，左右剧中  */margin: 100px auto;}.firstDiv{/* 设置宽度300 */width: 300px;/* 设置高度100 */height: 100px;/* 设置行高100 */line-height: 100px;/* 设置内容剧中显示 */text-align: center;/* 设置字体大小30 */font-size: 30px;/* 设置相对定位 */position: relative;/* 设置顶端移动100 */top: 100px;/* 设置左移动50 */left: 50px;}.lastDiv{/* 设置宽度300 */width: 300px;/* 设置高度100 */height: 100px;/* 设置内容剧中显示 */text-align: center;/* 设置字体大小30 */font-size: 30px;/* 设置相对定位 */position: relative;/* 设置顶端移动100 */top: 100px;/* 设置左移动50 */left: 50px;}</style></head><body><div class="div"><div class="firstDiv"></div><div class="lastDiv"></div></div></body><script>function dateTime(){//获取时间保存到date变量var date = new Date();console.log(date);//获取date中的年、月、日var dates = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';//将星期日~星期一保存到数组var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];//获取date中的小时，如果小于9，则在前面拼接一个0var hours = date.getHours()>9?date.getHours():'0'+date.getHours();//获取date中的分钟，如果小于9，则在前面拼接一个0var minutes = date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();//获取date中的秒，如果小于9，则在前面拼接一个0var seconds = date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();//拼接时分秒和星期var times = hours+'：'+minutes+'：'+seconds+' '+week[date.getDay()];}</script>
</html>

4）获取节点并向节点中添加日期和时间

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>动态时钟显示</title><style>.div{/* 宽度400 */width: 400px;/*高度400  */height: 400px;/* 设置背景色 */background-color: cornflowerblue;/* 设置边框圆角200 */border-radius: 200px;/* 设置字体粗细700 */font-weight: 700;/* 设置文本颜色白色 */color: white;/* 设置外边距：上下100px，左右剧中  */margin: 100px auto;}.firstDiv{/* 设置宽度300 */width: 300px;/* 设置高度100 */height: 100px;/* 设置行高100 */line-height: 100px;/* 设置内容剧中显示 */text-align: center;/* 设置字体大小30 */font-size: 30px;/* 设置相对定位 */position: relative;/* 设置顶端移动100 */top: 100px;/* 设置左移动50 */left: 50px;}.lastDiv{/* 设置宽度300 */width: 300px;/* 设置高度100 */height: 100px;/* 设置内容剧中显示 */text-align: center;/* 设置字体大小30 */font-size: 30px;/* 设置相对定位 */position: relative;/* 设置顶端移动100 */top: 100px;/* 设置左移动50 */left: 50px;}</style></head><body><div class="div"><div class="firstDiv"></div><div class="lastDiv"></div></div></body><script>function dateTime(){//获取时间保存到date变量var date = new Date();console.log(date);//获取date中的年、月、日var dates = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';//将星期日~星期一保存到数组var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];//获取date中的小时，如果小于9，则在前面拼接一个0var hours = date.getHours()>9?date.getHours():'0'+date.getHours();//获取date中的分钟，如果小于9，则在前面拼接一个0var minutes = date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();//获取date中的秒，如果小于9，则在前面拼接一个0var seconds = date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();//拼接时分秒和星期var times = hours+'：'+minutes+'：'+seconds+' '+week[date.getDay()];//获取firstDiv节点var firstDivEle = document.querySelector('.firstDiv');//获取lastDiv节点var lastDivEle = document.querySelector('.lastDiv');//向.firstDiv节点添加dates(年、月、日)firstDivEle.innerText=dates;//向.firstDiv节点添加timess(年、月、日)lastDivEle.innerText=times;}</script>
</html>

5）调用自定义函数dateTime和setInterval函数，实现动态时钟显示效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>动态时钟显示</title><style>.div{/* 宽度400 */width: 400px;/*高度400  */height: 400px;/* 设置背景色 */background-color: #ccc;/* 设置边框圆角200 */border-radius: 200px;/* 设置字体粗细700 */font-weight: 700;/* 设置文本颜色白色 */color: white;/* 设置外边距：上下100px，左右剧中  */margin: 100px auto;}.firstDiv{/* 设置宽度300 */width: 300px;/* 设置高度100 */height: 100px;/* 设置行高100 */line-height: 100px;/* 设置内容剧中显示 */text-align: center;/* 设置字体大小30 */font-size: 30px;/* 设置相对定位 */position: relative;/* 设置顶端移动100 */top: 100px;/* 设置左移动50 */left: 50px;}.lastDiv{/* 设置宽度300 */width: 300px;/* 设置高度100 */height: 100px;/* 设置内容剧中显示 */text-align: center;/* 设置字体大小30 */font-size: 30px;/* 设置相对定位 */position: relative;/* 设置顶端移动100 */top: 100px;/* 设置左移动50 */left: 50px;}</style></head><body><div class="div"><div class="firstDiv"></div><div class="lastDiv"></div></div></body><script>function dateTime(){//获取时间保存到date变量var date = new Date();//获取date中的年、月、日var dates = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';//将星期日~星期一保存到数组var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];//获取date中的小时，如果小于9，则在前面拼接一个0var hours = date.getHours()>9?date.getHours():'0'+date.getHours();//获取date中的分钟，如果小于9，则在前面拼接一个0var minutes = date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();//获取date中的秒，如果小于9，则在前面拼接一个0var seconds = date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();//拼接时分秒和星期var times = hours+'：'+minutes+'：'+seconds+' '+week[date.getDay()];//获取firstDiv节点var firstDivEle = document.querySelector('.firstDiv');//获取lastDiv节点var lastDivEle = document.querySelector('.lastDiv');//向.firstDiv节点添加dates(年、月、日)firstDivEle.innerText=dates;//向.lastDiv节点添加timess(时、分、秒、星期)lastDivEle.innerText=times;}//调用函数，执行一次dateTime();//调用setInterval函数，实现始终计时，setInterval(dateTime,1000);</script>
</html>

JavaScript实现动态时钟显示相关推荐

web——javascript实现动态时钟
web--javascript实现动态时钟 javascript实现动态时钟,与当前时间同步. <!DOCTYPE html> <html lang="en"&g ...
javascript之动态时钟
代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&q ...
Html5的Canva绘制动态时钟显示当前时间！！！（附源码）
前言 canvas设计一个显示当前时间的时钟实现情况思路想让canvas绘制的东西动起来,最直接的办法就是不停的进行重绘,可能刚开始有些人会担心效率的问题,害怕代码过长冗余,可读性差的问题,实际 ...
X86汇编语言从实模式到保护模式08：中断和动态时钟显示
目录 1. 外部硬件中断 1.1 概述 1.2 外部硬件中断分类 1.2.1 概述 1.2.2 不可屏蔽中断 1.2.3 可屏蔽中断 1.3 中断控制器 1.3.1 引入中断控制器的原因 1.3.2 ...
20、中断和动态时钟显示
文章目录 01.中断和硬件中断 02.中断控制器简介 03.中断号.中断处理过程.中断向量表 04.实时时钟.CMOS RAM和BCD编码 05.实时时钟芯片的中断信号 06.安装0x70号中断的处理 ...
JavaScript水滴动态时钟和倒计时时钟
4.3 date对象的常用属性和方法 Dpale 对象包含日期和时间的相关信息.Dule对象没有任何属性,它只具有很多用于现创建日期对象的语法如下: var now = new Date();//获 ...
第9章中断和动态时钟显示
本章的第一个代码功能是在屏幕中间实时显示时间,其实现的思想是:cpu停机--->时间每秒更新一次,每一次更新都会引起0x70中断(0x70中断的内容已经被我们更改为显示当前时间)--->中 ...
javascript 计算器、动态时钟、表格复选框全选（扩展）、轮播图、36选7、随机数...
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
html时显示当前时间的时钟,javascript实现页面的实时时钟显示示例
时钟实现实现这个时钟时间需要解决以下三个问题: 获得当前时间,并格式化如何可以在页面中显示时间让时间动起来 1.获得当前时间,并格式化要获得当前时间,可以使用JavaSctipt的Date对象 ...

JavaScript实现动态时钟显示

动态时钟显示效果

代码实现

1.创建html文件（时钟显示.html）

2.设置html标签

3.设置html标签的CSS样式

4.设置JavaScript

1)创建函数和Date

2）获取date变量中的年、月、日，拼接成日期

3）获取date变量中的小时、分钟、秒和日期，拼接成时间

4）获取节点并向节点中添加日期和时间

5）调用自定义函数dateTime和setInterval函数，实现动态时钟显示效果

JavaScript实现动态时钟显示相关推荐

最新文章

热门文章