目录
动态时钟显示效果
代码实现
1.创建html文件（时钟显示.html）
2.设置html标签
3.设置html标签的CSS样式
4.设置JavaScript
1)创建函数和Date
2）获取date变量中的年、月、日，拼接成日期
3）获取date变量中的小时、分钟、秒和日期，拼接成时间
4）获取节点并向节点中添加日期和时间
5）调用自定义函数dateTime和setInterval函数，实现动态时钟显示效果
动态时钟显示效果
代码实现
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>
