模拟时钟的实现

详细代码及分析

js代码

		//获取页面对应元素
     	var s = document.querySelector('.s');
        var m = document.querySelector('.m');
        var h = document.querySelector('.h');
    	
    	//封装一个函数 用来将获取的时间渲染到页面中
        function fn() {
        	//获取date对象
            var date = new Date();
            //通过date对象下的方法获取时间对应时间，并且通过计算，算出其在时钟转过的角度
            var ss = date.getSeconds() * 6 - 90;
            var mm = date.getMinutes() * 6 - 90;
            var hh = date.getHours() * 30 - 90 + parseInt(mm / 12);
            //将时钟对应旋转的角度渲染到页面
            s.style.transform = 'rotate(' + ss + 'deg)';
            m.style.transform = 'rotate(' + mm + 'deg)';
            h.style.transform = 'rotate(' + hh + 'deg)';
        }
		//页面加载调用函数，初始化模拟时钟
        fn();
        //设置定时器,每隔一秒执行一次函数，实现实时刷新
        var timer = setInterval(function () {
            fn();
        }, 1000);

html+css

  .box {
            width: 400px;
            height: 400px;
            border: 2px solid;
            border-radius: 200px;
            position: relative;
            background: url('./clock.jpg') no-repeat;
            background-size: 420px 420px;
            background-position: -10px -10px;
        }

        .s,
        .m,
        .h,
        .center {
            box-sizing: border-box;
            display: block;
            font-weight: 900;
            position: absolute;
            top: 200px;
            left: 200px;
            transform: rotate(-90deg);
            transform-origin: left center;
            font-size: 16px;
            height: 16px;
            line-height: 16px;



        }
   <div class="box">
        <span class="s">
            ——————————>
        </span>
        <span class="m">
            ————————>
        </span>
        <span class="h">
            ——————>
        </span>
        <span class="center">

        </span>
    </div
    

页面所需图片