H5C3时钟实例(rem适配)

Posted orochiz-

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5C3时钟实例(rem适配)相关的知识,希望对你有一定的参考价值。

1.原理分析和效果图

先上效果图:
技术图片

屏幕适配上使用rem适配,假设用户的手机屏幕最下宽度是375px,而谷歌浏览器最小的字体大小为12px,所以我以375px为标准尺寸进行rem适配,即375px的屏幕设置html标签字体大小为12px,随着屏幕宽度增大,1rem也随之增大

表盘使用的是圆角,使之展现为正圆的效果。刻度条其实是几条div通过rotate产生的,但是中间用一个遮罩盖住了(粉色区域)
技术图片

页面初始化后开启定时器,每秒钟获取一次当前时间,解析时分秒,计算相应的角度值,将其应用到相关元素上

2.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>时钟</title>
    <style>
        html
            font-size: 10px;
        
        *
            margin: 0;
            padding: 0;
        
        .clock
            margin: 5rem auto;
            width: 28rem;
            height:28rem;
            border:10px solid #ccc;
            border-radius: 50%;
            position: relative;
            max-width: 640px;
        
        .clock > .line
            position: absolute;
            width: 0.8rem;
            height: 100%;
            background-color: #ccc;
            left: 50%;
            transform-origin: center center;
            transform: translate(-50%,0);
        
        .clock > .line:nth-of-type(1)
            transform: translate(-50%,0) rotate(30deg);
        
        .clock > .line:nth-of-type(2)
            transform: translate(-50%,0) rotate(60deg);
        
        .clock > .line:nth-of-type(3)
            width: 1rem;
            transform: translate(-50%,0) rotate(90deg);
        
        .clock > .line:nth-of-type(4)
            transform: translate(-50%,0) rotate(120deg);
        
        .clock > .line:nth-of-type(5)
            transform: translate(-50%,0) rotate(150deg);
        
        .clock > .line:nth-of-type(6)
            width: 1rem;
            transform: translate(-50%,0) rotate(180deg);
        

        .clock > .cover
            position: absolute;
            background-color: #fff;
            width: 25rem;
            height: 25rem;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            z-index: 10;
            border-radius: 50%;
        
        .clock > .cover > .mark
            position: absolute;
            width: 4rem;
            height: 3rem;
            line-height: 3rem;
            z-index: 50;
            text-align: center;
            font-size: 3rem;
            font-weight: bold;
        
        .clock > .cover > .mark:nth-of-type(1)
            top: 0;
            left: 50%;
            transform: translate(-50%,0);
        
        .clock > .cover > .mark:nth-of-type(2)
            top: 50%;
            right: 0;
            transform: translate(0,-50%);
        
        .clock > .cover > .mark:nth-of-type(3)
            bottom:0;
            left: 50%;
            transform: translate(-50%,0);
        
        .clock > .cover > .mark:nth-of-type(4)
            top: 50%;
            left: 0;
            transform: translate(0,-50%);
        
        .clock > .cover > .weekday,
        .clock > .cover > .date
            position: absolute;
            width: 12rem;
            height: 2rem;
            line-height: 2rem;
            z-index: 50;
            text-align: center;
            font-size: 2rem;
            font-weight: bold;
            left: 50%;
            transform: translate(-50%,0);
        
        .clock > .cover > .date
            top:20%;
        
        .clock > .cover > .weekday
            bottom:20%;
        
        .clock > .hour
            position: absolute;
            background-color: rgba(255,0,0,0.5);
            width: 0.6rem;
            height: 8rem;
            left: 50%;
            bottom: 50%;
            transform: translate(-50%,0);
            z-index: 20;
            transform-origin: center bottom;
        
        .clock > .minute
            position: absolute;
            background-color: rgba(0,255,0,0.5);
            width: 0.4rem;
            height: 9rem;
            left: 50%;
            bottom: 50%;
            transform: translate(-50%,0);
            z-index: 30;
            transform-origin: center bottom;
        
        .clock > .second
            position: absolute;
            background-color: rgba(0,0,255,0.5);
            width: 0.3rem;
            height: 10rem;
            left: 50%;
            bottom: 50%;
            transform: translate(-50%,0);
            z-index: 40;
            transform-origin: center bottom;
        
        .clock > .origin
            position: absolute;
            background-color: #ccc;
            width: 2rem;
            height: 2rem;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            z-index: 50;
            border-radius: 50%;
        
    </style>
    <script>
        // 设定rem
        setRem();
        window.onload=function()
            //设置定时器才指针走起来
            setInterval(function()
                setClock();
            ,1000);
        
        function setRem()
            // 设置能适配的最小屏幕宽度(375宽度对应12px 满屏为31.25rem)
            var min = 375
            // 设置能适配的最大屏幕宽度
            var max = 640
            if(window.screen.width >= max)
                //超过640的宽度一览表按640处理 12是因为谷歌浏览器最小字体是12px
                document.documentElement.style.fontSize = max/min * 12 + "px"; 
            else
                document.documentElement.style.fontSize = window.screen.width/min * 12 + "px";
            
        
        function setClock()
            //获取指针对应的dom元素
            var hourHand = document.querySelector('.hour');
            var minuteHand = document.querySelector('.minute');
            var secondHand = document.querySelector('.second');

            var date = new Date();
            //获取时分秒
            var hour = date.getHours()%12;
            var minute = date.getMinutes();
            var second = date.getSeconds();

            //根据当前时间获取各指针的初始角度值
            var hourDeg = hour/12*360 + minute/60*30;
            var minuteDeg = minute/60*360;
            var secondDeg = second/60*360;

            //将角度值应用到时钟上
            hourHand.style.transform = `translate(-50%,0) rotate($hourDegdeg)`;
            minuteHand.style.transform = `translate(-50%,0) rotate($minuteDegdeg)`;
            secondHand.style.transform = `translate(-50%,0) rotate($secondDegdeg)`;

            //获取日期
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var d = date.getDate();
            var dateStr = `$year-$month-$d`;
            if(  dateStr != document.querySelector('.date').innerHTML )
                document.querySelector('.date').innerHTML = dateStr;
            

            //获取星期
            var weekday = date.getDay();
            var weekdayArr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
            var weekdayStr = document.querySelector('.weekday').innerHTML;
            if(  weekdayStr != weekdayArr[weekday] )
                document.querySelector('.weekday').innerHTML = weekdayArr[weekday];
            
        
    </script>
</head>
<body>
    <div class="clock">
        <div class="line"></div> 
        <div class="line"></div> 
        <div class="line"></div> 
        <div class="line"></div> 
        <div class="line"></div> 
        <div class="line"></div> 
        <div class="cover">
            <div class="mark">12</div>
            <div class="mark">3</div>
            <div class="mark">6</div>
            <div class="mark">9</div>
            <div class="date">2019-4-18</div>
            <div class="weekday">星期四</div>
        </div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <div class="origin"></div>
    </div>
</body>
</html>

以上是关于H5C3时钟实例(rem适配)的主要内容,如果未能解决你的问题,请参考以下文章

可编程 USB 转串口适配器开发板 DS1302 时钟芯片参数读取与修改

怎么对ZYNQ的FCLK做时钟组约束

微信小程序项目实例——打卡时钟

9.3.3 QPainter绘制模拟时钟实例

如何利用iframe标签以及Javascript制作时钟?

如何用iframe标签以及Javascript制作时钟?