今天我么们来用用css3中的2D旋转来做一个时钟
首先我们来看看学要用到的知识点
1.首先要用到css3中的transform方法,设置其中的属性rotate
我们可以在style中设置,也可以在js中设置 id.style.transform=“rotate(30deg)”;
2.其次还要用到js中的计时器,我们回想一下js中的计时器有两种方式
(1) setInterval(a,b)方法 a代表要执行的方法 b代表的是计时的时间,每间隔多少毫秒执行a方法,一直执行下去,执行多次
(2) setTimeout(a,b)方法 a代表要执行的方法 b代表的是多长时间后执行,只执行一次
现在我们来看一下代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
var i = 0;
var a;
window.onload=function(){
a = document.getElementById("a");
setInterval("changeDiv()",1000);
}
function changeDiv(){
i+=6;
a.style.transform="rotate("+i+"deg)";
}
</script>
<body>
<img id="a" src="img/a.png">//插入指针图片
</body>
</html>
上面的代码基本上就是实现了一个简单的时钟功能