您的位置：首页 > 职场人生

程序员用css3实现网页电子时钟，校准北京时间

2017-11-09 16:49 489 查看

效果知识点：CSS3+JS完美配合，基本语法，编程逻辑，Date对象，获取时分秒钟方法，for循环，CSS3选择器，setInterval定时器。

电子时钟源码：

<!doctype html>
<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="Keywords" content="">
<meta name="Description" content="">
<title>css3实现网页电子时钟</title>

<styletype="text/css">
*{ margin:0;padding:0;}
ul,li{ list-style:none;}
body{ background:radial-gradient(#eeefef,#d6d7d9); padding:50px; }
.box{ width:540px; height:200px; margin:50px auto; }
.box ul li{ width:150px; height:160px; border:1px solid #9fa2ad; display:inline-block; margin-right:10px; text-align: center; border-radius: 5px; box-shadow:inset 0 -2px 0#f1f1f1,0 1px 0 #f1f1f1,02px 0 #9fa2ad,0 3px0 #f1f1f1,04px 0 #9fa2ad; background: -webkit-linear-gradient(top, rgba(248,248,248,.3)20%, rgba(168,173,190,.5)50%, rgba(168,173,190,.3)51%, rgba(248,248,248,.2)90%); position:relative;}
.box li span:first-child{ font-size:120px; color: #52555a; display: block; height: 130px; line-height: 150px;}
.box li:before,
.box li:after{
display: block;
content: "";
position: absolute;
width: 150px;
}
.box li:before{
top:50%;
height: 1px;
box-shadow: 0 1px 0#868995,0 2px 1px #fff;
}
.box li:after{
bottom: -65px;
height: 60px;
border-radius:00 5px 5px;
background: -webkit-gradient(linear,00,0 100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0)));
background: -webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
background: linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
z-index: 1;
}

</style>
</head>
<body>
<div id="snowzone" >
</div>
<divclass="box">
<ul>
<li><spanid="hour"></span><span>时</span></li>
<li><spanid="minute"></span><span>分</span></li>
<li><spanid="second"></span><span>秒</span></li>
</ul>
</div>

</body>
<scripttype="text/javascript">
var hour =document.getElementById('hour');
var minute =document.getElementById('minute');
var second =document.getElementById('second');
function showTime(){
var oDate =new Date();
var iHours=oDate.getHours();
var iMinute=oDate.getMinutes();
var iSecond=oDate.getSeconds();
hour.innerHTML =AddZero(iHours);
minute.innerHTML =AddZero(iMinute);
second.innerHTML =AddZero(iSecond);
}
showTime();
setInterval(showTime,1000);
function AddZero(n){
if(n <10){
return '0'+n;
}
return ''+n;
}

</script>
</html>

web前端学习群：575308719，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。
关注公众号→‘学习web前端’跟大佬一起学前端！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 程序员 javascript 北京时间电子时钟

相关文章推荐

新的分享

章节导航