【页面练习】话说时钟这个东西
2017-03-02 本文已影响35人
6126daeba29f
are kiding me？
下方时钟效果图，因为是用ps自己照着网上的时钟图画的，╮(╯▽╰)╭，大家就不要介意啦
QQ截图20170302214334.jpg
时钟小练习
说到写时钟，很多人都写过，恰好今天看到些的一个比较好的。因为是学习笔记也就不那么讲究啦~~
准备素材
- 时钟背景图
- 时针
- 秒针
-分针
需要写什么
- html里面似乎只要搭一个时钟，居中就好了，其次是src=时分秒的图片（最后会给素材啦~因为是自己用ps画的，不好看不要嫌弃）
<body>
<div class="clock">
<div class="h" id="hour"></div>
<div class="m" id="minute"></div>
<div class="s" id="second"></div>
</div>
</body>
stylesheet 里面基本的样式
.clock{
width:456px;
height:456px;
margin:50px auto;
background: url(time.png) no-repeat;
position:relative;
}
.clock div{
width:100%;
height: 100%;
position:absolute;
top:0;
left:0;
}
.h{
background: url("hours.png") no-repeat center center;
}
.m{
background: url("minute.png") no-repeat center center;
}
.s{
background: url("second.png") no-repeat center center;
}
-javascript使用Date（）来获取时分秒
由于图片的问题，我想了半天——尴尬
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
var s = 0,m = 0, h = 0, ms = 0;
setInterval(function() {
var date = new Date();
ms = date.getMilliseconds();
s = date.getSeconds() + ms / 1000;
m = date.getMinutes() + s / 60;
h = date.getHours() % 12 + m / 60 ;
var sl=s*6+90;
var ml=m*6+90;
var hl=h*30+90;
second.style.transform = "rotate("+sl +"deg)";
//
minute.style.transform = "rotate("+ml +"deg)";
hour.style.transform = "rotate("+hl +"deg)";
},1000);
</script>
var ml=m*6+90是因为图片的问题，表示自行调整。
这只是一个前端页面的练习，看大神的帖子抄的~~
有用记得点赞思密达，菜鸟谢过
然后是素材图
谢谢，百度网盘
https://pan.baidu.com/s/1eR8WEno
