本文介绍: 1.创建html文件（时钟显示.html）；2.设置html标签；3.设置html标签的CSS样式；4.设置JavaScript；1)创建函数和Date；2）获取date变量中的年、月、日，拼接成日期；3）获取date变量中的小时、分钟、秒和日期，拼接成时间；4）获取节点并向节点中添加日期和时间；5）调用自定义函数dateTime和setInterval函数，实现动态时钟显示效果
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
<!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，则在前面拼接一个0
var hours = date.getHours()>9?date.getHours():'0'+date.getHours();
//获取date中的分钟，如果小于9，则在前面拼接一个0
var minutes = date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
//获取date中的秒，如果小于9，则在前面拼接一个0
var 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，则在前面拼接一个0
var hours = date.getHours()>9?date.getHours():'0'+date.getHours();
//获取date中的分钟，如果小于9，则在前面拼接一个0
var minutes = date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
//获取date中的秒，如果小于9，则在前面拼接一个0
var 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，则在前面拼接一个0
var hours = date.getHours()>9?date.getHours():'0'+date.getHours();
//获取date中的分钟，如果小于9，则在前面拼接一个0
var minutes = date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
//获取date中的秒，如果小于9，则在前面拼接一个0
var 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>原文地址:https://blog.csdn.net/m0_57051895/article/details/127803400
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_43748.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
