刻度时钟.

最新推荐文章于 2024-06-28 21:35:11 发布

时不久留

最新推荐文章于 2024-06-28 21:35:11 发布

阅读量446

点赞数

分类专栏：小案例文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_73104281/article/details/128716920

版权

小案例专栏收录该内容

17 篇文章 0 订阅

订阅专栏

需求

上方是简易的刻度时钟，下方是电子时钟，上下的时间需与北京时间实时对应。

原理

1.秒针每秒动6deg，分针每秒动1/60deg，时针每秒动1/3600deg。使用Date获取实时时间，计算出s/60,m/60获取精确分钟数，小时数。绑定定时器，利用transform：rotate属性，设置秒，分，时针的旋转角度，每秒钟执行一次。
2.电子时钟同样利用date获取时间，绑定定时器，每一秒钟改变一次为了形式上“00”，利用条件运算符，以及拼接字符串，根据数值是否大于10，进行选择，利用${}输出带有html格式的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css" id="sty">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #clock{
                width: 200px;
                height: 200px;
                border: 3px solid #000;
                border-radius: 50%;
                margin: 20px auto;
                position: relative;
            }
            #con{
                width: 10px;
                height: 10px;
                background: #000;
                border-radius: 50%;
                position: absolute;
                left: 95px;
                top: 95px;
            }
            #hour{
                width: 3px;
                height: 60px;
                background: rgb(0, 0, 0);
                position: absolute;
                left: 98px;
                top: 35px;
                transform-origin: center 65px;
            }
            #min{
                width: 2px;
                height: 70px;
                background: #000;
                position: absolute;
                left: 98.5px;
                top: 13px;
                transform-origin: center 80px;
            }
            #sec{
                width: 1px;
                height: 100px;
                background: rgb(0, 0, 0);
                position: absolute;
                left: 98.5px;
                top: 20px;
                transform-origin: center 80px;
            }
        

			p {
				font-size:50px;
				font-weight: 600;
			}
            .box{
                margin: 0px 590px;
            }
		</style>
	</head>
	<body>
    <div id="clock">
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <div id="con"></div>
    </div>

    <div class="box">
	    <p id="time"></p>
    </div>
	</body>
	<script>
    window.onload=function(){
        var oclock=document.getElementById('clock');
        var oList=document.getElementById('list');
        
        var oSec=document.getElementById('sec');
        var oMin=document.getElementById('min');
        var oHour=document.getElementById('hour');
        function time(){
            var date=new Date();
            var s=date.getSeconds();
            var m=date.getMinutes()+(s/60);
            var h=date.getHours()+(m/60);

            oSec.style.transform='rotate('+s*6+'deg)';
            oMin.style.transform='rotate('+m*6+'deg)';
            oHour.style.transform='rotate('+h*30+'deg)';
        }
        time();

        setInterval(time,1000);
    }

		var getTime = function() {
			var date = new Date();
			var hour = date.getHours() < 10 ? '0' : date.getHours();
			var min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			var sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			var time = `${hour}:${min}:${sec}`;
            //&{}里的内容按照html格式输出
			document.getElementById("time").innerHTML = time
		}
		setInterval(function(){
			getTime()
		}, 1000)
	</script>
</html>