这篇博客介绍如何创建一个网页，实时显示当前日期和时间。通过结合HTML、CSS和JavaScript，实现时间的动态更新。页面包含暂停和开始按钮，用户可以控制时间显示的更新。CSS用于美化页面布局和按钮样式，JavaScript则负责获取和更新时间。
1.在页面上设置初始值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>显示当前时间</title>
<linkrel="stylesheet" href="DisplayCurrentTime(css).css">
</head>
<body>
<divclass="container">
<div>
<spanid="fullyear">00</span>.
<spanid="month">00</span>.
<spanid="date">00</span>
</div>
<div>
<spanid="hours">00</span>:
<spanid="minutes">00</span>:
<spanid="seconds">00</span>
</div>
</div>
<divclass="btnGroup">
<buttonid="stop">暂停</button>
<buttonid="start">开始</button>
</div>
<scriptsrc="DisplayCurrentTime(js).js"></script>
</body>
</html>
2.在style内设置元素的css样式
@charset "utf-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
body{
background: deepskyblue;
background-size: cover;
color: #fff;
}
.container{
margin: 100px auto;
text-align: center;
font-size: 4.5rem;
font-weight: 300;
}
.btnGroup{
text-align: center;
}
.btnGroup button{
margin: 0px 10px;
padding: 30px 100px;
border: none;
border-radius: 5px;
font-size: 2rem;
color: #fff;
cursor: pointer;
}
.btnGroupbutton:first-child{
background: red;
}
.btnGroup button:last-child{
background: lightgreen;
}
.btnGroupbutton:first-child:hover{
background: orange;
}
.btnGroupbutton:last-child:hover{
background: limegreen;
}
3. 在script内写上js代码
// JavaScriptDocument
var timer=null;
window.onload=function(){
varbtnStart=document.getElementById("start");
varbtnStop=document.getElementById("stop");
btnStart.onclick=function(){
timer=setInterval(function(){
showTime();
},1000);
};
btnStop.onclick=function(){
clearInterval(timer);
}
}
functionshowTime(){
var now=new Date();
var fullYear=now.getFullYear();
var month=now.getMonth();
var date=now.getDate();
var hours=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
fullYear=fullYear<=9?"0"+fullYear:fullYear;
month=month<=9?"0"+month:month;
date=date<=9?"0"+date:date;
hours=hours<=9?"0"+hours:hours;
minute=minute<=9?"0"+minute:minute;
second=second<=9?"0"+second:second;
document.getElementById("fullyear").innerHTML=fullYear;
document.getElementById("month").innerHTML=month++;
document.getElementById("date").innerHTML=date;
document.getElementById("hours").innerHTML=hours;
document.getElementById("minutes").innerHTML=minute;
document.getElementById("seconds").innerHTML=second;
}
效果：
扫一扫
1484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
