1.时钟:
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html,body{
margin:0px;
padding: 0px;;
}
#wapper{
position: relative;
width: 200px;
height: 200px;
background-color:#eee;
margin: 200px;
}
.box{
width: 4px;
height: 15px;
background-color: #000;
position: absolute;
top:0px;
left: -2px ;
transform-origin: center 100px;
}
div[class="box"]:nth-child(5n+4){
background-color: #000;
height:23px;
}
#scend{
width: 2px;
height: 80px;
background-color: red;
position: absolute;
top:20px;
left: -1px;
}
#min{
width: 4px;
height: 60px;
background-color: black;
position: absolute;
top:40px;
left: -2px;
}
#hour{
width: 6px;
height: 40px;
background-color: blue;
position: absolute;
top:60px;
left: -3px;
}
#scend, #min, #hour{
transform-origin: bottom;
}
</style>
</head>
<body>
<div id="wapper">
<div id="hour"></div>
<div id="min"></div>
<div id="scend" ></div>
</div>
</body>
<script type="text/javascript">
var wapper=document.querySelector("#wapper");
var hour=document.querySelector("#hour");
var min=document.querySelector("#min");
var scend=document.querySelector("#scend");
for (var i = 0; i < 60; i++) {
var cont=document.createElement("div");
cont.classList.toggle("box");
cont.style.transform="rotate("+6*i+"deg)";
wapper.appendChild(cont);
}
setInterval(function(){
var time=new Date();
var secondw=time.getSeconds();
var minew=time.getMinutes()+secondw/60;
var hourw=time.getHours()+minew/60;
scend.style.transform="rotate("+secondw*6+"deg)";
min.style.transform="rotate("+minew*6+"deg)";
hour.style.transform="rotate("+hourw*30+"deg)";
},1000);
</script>
</html>