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(${hourDeg}deg)`;

            minuteHand.style.transform = `translate(-50%,0) rotate(${minuteDeg}deg)`;

            secondHand.style.transform = `translate(-50%,0) rotate(${secondDeg}deg)`;

            //获取日期

            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适配)的更多相关文章

em与rem之间的区别以及移动设备中的rem适配方案
em与rem之间的区别: 共同点: 它们都是像素单位它们都是相对单位不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小实例: <!DOCTYPE ht ...
移动端使用rem适配及相关问题
移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...
rem适配
//REM适配new function() { var _self = this; _self.width = 640; // 设置默认最大宽度 _self.fontSize = 100; // 默认 ...
webapp思路和rem适配极其viewport
webapp在制作时候,页面上要加入viewport标签,用来进行适配; viewport的meta标签,指的是在移动端显示的时候,viewport是多大?移动端的浏览器是屏幕宽,viewport一般 ...
一步步教你使用rem适配不同屏幕的移动设备
1.先说说几个前端常用的几个单位的概论: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch ...
谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
js动态计算移动端rem适配问题
第一:css3的media query来实现适配,例如下面这样: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...
移动端 rem适配方法
rem适配一, 网易适配方法屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50) document.documentElement. ...
H5移动端rem适配
/** * 移动端自适应 */ <meta name="viewport" content="width=device-width,user-scalable=no ...
移动端最强适配（rem适配之px2rem）&& 移动端结合Vuex实现简单loading加载效果
一.rem之px2rem适配前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...

随机推荐

CSIG企业行-走进合合信息成功举行，聚焦生成式人工智能、智能文档处理前沿热点
3月18日,由中国图象图形学学会(CSIG)主办,合合信息.CSIG文档图像分析与识别专业委员会联合承办的"CSIG企业行"系列活动成功举办.此次活动以"图文智能处理与多 ...
Java发展到现在，哪些技术可以放弃了？
各位好啊,我是会编程的蜗牛,作为java开发者,对于各类java开发技术.开发框架肯定是多少都要了解和知道的. 但是作为已经发展了几十年的java开发生态,各类技术层出不穷,有的新技术新框架已经对旧技 ...
c++线程--快速上手
线程创建头文件#include thread 是在 C++11 标准中引入的. C++11 标准引入了对多线程编程的标准化支持,其中包括了线程的创建.管理和同步机制. 头文件提供了基本的线程支持库, ...
Android Qcom USB Driver学习(六)
眼图基础知识与详解 10分钟教会你看眼图 USB2.0 HUB眼图调试经验总结一篇文章教你如何全面了解眼图测试! 预加重与去加重对眼图的影响关于 USB 通信阻抗匹配的问题硬件调试--眼图几个经 ...
C#获取环境变量的值
Environment.GetEnvironmentVariable("Path"); 修改环境变量之后,不能立即生效,需要重启一下VStudio 或重启电脑 : 在 vstudi ...
16 Transformer 的编码器（Encodes）——我在做更优秀的词向量
博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看配套 github 链接:https:// ...
what can i say?
今天也是打了一场让我GG的考试首先来个炸裂的: 全场唯一爆0的,堪称MVP what can i say 赛时一共交了三遍,就最后一遍GG了. 分析一下原因吧: wa的码: #include< ...
Acrobat DC安装报错1603，Microsoft Visual C++2013(x64)失败
之前顺利安装过Acrobat DC,但可能因为自动更新了,导致让我重新登录才能使用,无法再次破解.于是我卸载后重新安装,发现提示Microsoft Visual C++2013(x64)运行安装失败. ...
优雅简单玩转python3异步并发
在python3之后,随着async/await引入,异步调用以全新而便捷的方式让人眼前一亮. 首先,尽量用async/await定义协程这里以使用aiohttp请求网络,async函数中,不要使用 ...
Octave 安装教程
Octave 用心写著. Octave为GNU项目下的开源软件.同时它也是一种语言,专注于解决线性计算问题.因为对于矩阵计算的优化,使得其速度远高于循环计算.语法兼容Linux shell. Octa ...

H5C3时钟实例(rem适配)

1.原理分析和效果图

2.完整代码

H5C3时钟实例(rem适配)的更多相关文章

随机推荐

热门专题