一:效果展示
二:代码实现
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.设置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
创建Date和函数
注:Date返回的是中国标准时间
<script>
function dateTime(){
//获取时间保存到date变量
var date = new Date();
}
</script>
获取Date变量中的年,月,日,合成日期
<script>
function dateTime(){
//获取时间保存到date变量
var date = new Date();
console.log(date);
//获取date中的年、月、日
var dates = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';
}
</script>
获取Date变量中的时,分,秒,合成时间
<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>
获取节点,向节点中添加日期和时间
<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>
调用自定义函数dateTime和setInterval函数,实现动态时钟显示效果
<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>