设置一个简单的时钟

今天我么们来用用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>

上面的代码基本上就是实现了一个简单的时钟功能这个就是上面代码中的图片

猜你喜欢

转载自blog.csdn.net/qq_42800961/article/details/82989858