HTML+JS 动态时钟

最新推荐文章于 2024-09-05 16:52:21 发布

breakcsdn

最新推荐文章于 2024-09-05 16:52:21 发布

阅读量465

点赞数

分类专栏： HTML 文章标签： js html

本文链接：https://blog.csdn.net/breakCSDN/article/details/109497427

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述如图所示，做一个时钟，并且指针和现实中钟表一样运动

思路：都要先获取系统时间，以获取的系统时间给指针的css样式transform：rorateZ(0deg)改变来表明时间；
例如：一分钟是六十秒只需要每秒钟让秒针rorateZ旋转6deg（秒*6就是秒针所在）
1.可以用一个循环函数不停的访问系统时间来修改指针角度
2.或获取后自增时间，达到和系统时间相同，来修改指针角度；

问题：表针移动不是平稳的，而是滴答滴答的。
尚未解决
问题：页面加载，初始化的函数是在页面数据加载完成后才加载函数，指针会有一个延迟。
解答：三个指针的HTML代码都由初始话的函数来生成。

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

页面初始化（时钟在页面加载后就可以转，所以一定要在初始化中写）

<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script>

$(function()
{
    alert("A");
});

$(document).ready(function(){
    alert("B");
});

jQuery(function($) {  
    alert("C");  
});

function loads(){
    alert("D");
};

window.onload=function(){
    alert("E");
};


</script>
<body onload="loads();">
</body>
</html>

主要使用到js和样式transform，以下是源代码（用的是不断的获取系统时间）：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				
			setInterval(function auto(){//setInterval是创建自动执行(参数是执行函数,执行间隔时间)
				var mytime = new Date();
				var myhouse = mytime.getHours();
				var myminute = mytime.getMinutes();
				var mysecond = mytime.getSeconds();
				var m1 = myhouse*30+myminute*0.5;
//				document.getElementById("1").style.transform ="rotateZ("+(myhouse*30+myminute*0.5)+"deg)";
//				document.getElementById("2").style.transform ="rotateZ("+myminute*6+"deg)";
//				document.getElementById("3").style.transform ="rotateZ("+(mysecond*6)+"deg)"
				a='<div id="1" class="zheng" style="-webkit-transform: rotateZ('+m1+'deg);" >';
				a+='<div class="house"></div>';
				a+='</div>'
				a+='<div id="2" class="zheng" style="-webkit-transform: rotateZ('+myminute*6+'deg);" >';
				a+='<div class="minute"></div>';
				a+='</div>';
				a+='<div id="3" class="zheng" style="-webkit-transform: rotateZ('+mysecond*6+'deg);" >';
				a+='<div class="second"></div>';
				a+='</div>';
				document.getElementsByClassName("con")[0].innerHTML=a;
			},1000)
			}
		</script>
		<style type="text/css">
			.div2 {
				width: 20px;
				height: 20px;
				margin-left: -10px;
				margin-top: -10px;
				background-color: yellow;
				border-radius: 50%;
				position: fixed;
				top: 50%;
				left: 50%;
			}
			
			.div1 {
				width: 800px;
				height: 800px;
				position: fixed;
				top: 50%;
				left: 50%;
				margin-left: -400px;
				margin-top: -400px;
				border-radius: 50%;
				background-color: red;
			}
			.sca{
				width: 10px;
				height: 800px;
				position: absolute;
				left: 50%;
				margin-left:-5px ;
				
			}
			.sca_{
				width: 10px;
				height: 20px;
				background-color: #000000;
				position: absolute;
			}
			.zheng{
				height: 800px;
				position: absolute;
				left: 50%;
			}
			.house{
				width: 20px;
				height: 200px;
				position: absolute;
				left: 50%;
				top: 200px;
				margin-left:-10px ;
				background-color: #000000;
				border-radius: 40px 40px 10px 10px;
			}
			.minute{
				width: 15px;
				height: 250px;
				position: absolute;
				left: 50%;
				top: 150px;
				margin-left:-7.5px ;
				background-color: blue;
				border-radius: 40px 40px 10px 10px;
			}
			.second{
				width: 10px;
				height: 300px;
				position: absolute;
				left: 50%;
				top: 100px;
				margin-left: -5px;
				background-color: gray;
				border-radius: 40px 40px 10px 10px;
			}
		</style>
	</head>

	<body>
		<div class="div1">
			<!--表盘刻度-->
			<div class="sca">
				<div class="sca_"></div>
				<div class="sca_" style="bottom:0px;"></div>
			</div>
			<div class="sca" style="-webkit-transform: rotateZ(30deg);">
				<div class="sca_"></div>
				<div class="sca_" style="bottom:0px;"></div>
			</div>
			<div class="sca" style="-webkit-transform: rotateZ(60deg);">
				<div class="sca_"></div>
				<div class="sca_" style="bottom:0px;"></div>
			</div>
			<div class="sca" style="-webkit-transform: rotateZ(90deg);">
				<div class="sca_"></div>
				<div class="sca_" style="bottom:0px;"></div>
			</div>
			<div class="sca" style="-webkit-transform: rotateZ(120deg);">
				<div class="sca_"></div>
				<div class="sca_" style="bottom:0px;"></div>
			</div>
			<div class="sca" style="-webkit-transform: rotateZ(150deg);">
				<div class="sca_"></div>
				<div class="sca_" style="bottom:0px;"></div>
			</div>
			<div class="con"></div>
			<!--指针-->
			<!--<div id="1" class="zheng" style="-webkit-transform: rotateZ(0deg);" >
				<div class="house"></div>
			</div>
			<div id="2" class="zheng" style="-webkit-transform: rotateZ(0deg);" >
				<div class="minute"></div>
			</div>
			<div id="3" class="zheng" style="-webkit-transform: rotateZ(0deg);" >
				<div class="second"></div>
			</div>-->
			
			<!--表心-->
			<div class="div2"></div>
		</div>

	</body>

</html>