案例：刻度时钟与数字时间

需求：
上方是简易的刻度时钟，下方是电子时钟，上下的时间需与北京时间实时对应。
实现原理：
1、利用元素圆角与宽高，位置，旋转角度制作一个时钟外表
2、设置计时器，更新获得的时间
3、将时钟圆盘分为12份后，每份30度，即每过一个小时的时间，时针元素旋转30度；
将得到的hour30再加上min和second转化为小时后乘以30度得到时针旋转角度
因为一小时包含60分钟，一分钟包含60秒，所以将时钟圆盘分为60份后，每份60度，即每过一个单位min或second的时间，分针与秒针元素旋转30度；
min60加上second转化为小时后乘以60度得到分针旋转角度
second*60即秒针旋转角度
实现代码：
HTML部分：

   <div id="color"><div id="cen"></div><ul id="kedu"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul><ul id=bigger><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div id="h"></div><div id="m"></div><div id="s"></div><div id="box"></div></div>

CSS部分：

   <style>*{margin: 0;padding: 0;list-style: none;}body{background-color: rgb(112, 177, 121);}/* 表盘 */#color{width: 400px;height: 400px;margin: 150px auto;border: 10px solid rgb(71, 71, 71);border-radius: 50%;}/* 中心原点 */#cen{width: 20px;height: 20px;border-radius:50% ;background-color: rgb(71, 71, 71);position: absolute;top:340px;left:calc(50% - 10px) ;}/* 条形刻度 */#bigger{position: relative;margin: 0 auto;}#bigger li{width: 4px;height: 15px;position: absolute;top: 0;left:calc(50% - 2px);transform-origin: center 200px;background-color: rgb(85, 85, 85);}#bigger li:nth-child(1){transform:rotate(0deg);}#bigger li:nth-child(2){transform:rotate(30deg);}#bigger li:nth-child(3){transform:rotate(60deg);}#bigger li:nth-child(4){transform:rotate(90deg);}#bigger li:nth-child(5){transform:rotate(120deg);}#bigger li:nth-child(6){transform:rotate(150deg);}#bigger li:nth-child(7){transform:rotate(180deg);}#bigger li:nth-child(8){transform:rotate(210deg);}#bigger li:nth-child(9){transform:rotate(240deg);}#bigger li:nth-child(10){transform:rotate(270deg);}#bigger li:nth-child(11){transform:rotate(300deg);}#bigger li:nth-child(12){transform:rotate(330deg);}/* 数组刻度 */#kedu li{width: 4px;height: 15px;position: absolute;top: 178px;left:calc(50% - 4px);transform-origin: center 180px;}#kedu li:nth-child(1){transform:rotate(30deg);}#kedu li:nth-child(2){transform:rotate(60deg);}#kedu li:nth-child(3){transform:rotate(90deg);}#kedu li:nth-child(4){transform:rotate(119deg);}#kedu li:nth-child(5){transform:rotate(149deg);}#kedu li:nth-child(6){transform:rotate(179deg);}#kedu li:nth-child(7){transform:rotate(208deg);}#kedu li:nth-child(8){transform:rotate(238deg);}#kedu li:nth-child(9){transform:rotate(268deg);}#kedu li:nth-child(10){transform:rotate(296deg);}#kedu li:nth-child(11){transform:rotate(327deg);}#kedu li:nth-child(12){transform:rotate(359deg);}/* 时针圆盘 */#h,#m,#s{width: 250px;height: 250px;position: absolute;top: 225px;left: 619px;}/* 时针 */#h::before{content: "";position: absolute;top: 25px;left: calc(50% - 1px);width: 6px;height: 100px;background-color: rgb(46, 46, 46);z-index: 10;border-radius:5px;}/* 分针 */#m::before{content: "";position: absolute;top: 8px;left: calc(50% - 1px);width: 4px;height: 130px;background-color: rgb(102, 101, 101);z-index: 20;border-radius:5px;}/* 秒针 */#s::before{content: "";position: absolute;top: -15px;left: calc(50%);width: 2px;height: 160px;background-color: rgb(112, 20, 20);z-index: 30;border-radius:5px;}/* 数字时间 */#box{width: 400px;height: 50px;line-height: 50px;margin: 450px auto;border: 2px solid rgb(104, 104, 104);border-radius: 2px;background-color: rgb(177, 177, 177);font-size: 20px;text-align: center;font-weight: bold;color: rgb(38, 105, 41);}</style>

JS部分：

<script>setInterval(function(){//获取时间var time=new Date()    var h=time.getHours()   var m=time.getMinutes()var s=time.getSeconds()//时针旋转行为$("#h").css(`transform`,`rotate(${h*30+(m/60)*30+(s/60/60)*30}deg)`)$("#m").css(`transform`,`rotate(${m*6+(s/60)*6}deg`)$("#s").css(`transform`,`rotate(${s*6}deg)`)//数字时间box.innerHTML=`现在时间是:${h}时${m}分${s}秒`},1000)</script>

效果：

案例：刻度时钟与数字时间相关推荐

JavaScript 实现刻度时钟
效果要求下方是简易的刻度时钟,上方是电子时钟,上下的时间需与北京时间实时对应. 实现原理利用css的transform-origin和transform: rotate( )设置每个刻度的位置再 ...
嵌入式OS入门笔记-以RTX为案例：四.简单的时间管理
嵌入式OS入门笔记-以RTX为案例:四.简单的时间管理上一节简单记录了进程task.有了进程以后,我们需要关心怎么样分配CPU资源(或者运行时间)给每个进程.那么就要引入排程(scheduling) ...
word柱状图垂直轴数值设定_Excel图表中设置坐标轴的字体、图案格式、刻度格式和数字格式的方法...
Excel图表中设置坐标轴的字体.图案格式.刻度格式和数字格式的方法,听说excel的教程在抖音很火,很多白领小朋友都在争相学习,下面就跟小编一起学习一下Excel图表中设置坐标轴的字体.图案格式.刻 ...
手写数字识别案例、手写数字图片处理
python_手写数字识别案例.手写数字图片处理 1.手写数字识别案例步骤: 收集数据带有标签的训练数据集来源于trainingDigits文件夹里面所有的文件,接近2000个文件,每个文件中有3 ...
GPS时钟系统（GPS时钟同步系统-GPS时间同步系统）
GPS时钟系统(GPS时钟同步系统-GPS时间同步系统) GPS时钟系统(GPS时钟同步系统-GPS时间同步系统) 技术交流-岳峰-15901092122:QQ-522508213; yf_cs@16 ...
基于51单片机定时器计数+2片74HC595联级+8位数码管时钟+按键修改时间
基于51单片机定时器计数+2片74HC595联级+8位数码管时钟+按键修改时间 Proteus仿真实例代码 #include "at89x52.h" /**74hc595引脚定义 ...
全球数字时间开关收入预计2028年达到16.471亿美元
内容摘要本报告针对未来几年数字时间开关的发展前景预测,本文预测到2028年,主要包括全球和主要地区销量.收入的预测,分类销量和收入的预测,以及主要应用数字时间开关的销量和收入预测等. 图数字时间开关 ...
逆战小白提升日記——网红时钟罗盘北京时间页代码
网红时钟罗盘北京时间页代码,教程请看上一篇博客,有疑问请评论留言.... **HTML架构代码** <!DOCTYPE html> <html lang="en" ...
苹果手机显示与服务器时间相差较大,iOS14时钟与系统时间不同吗 ios14时钟小组件时间不准怎么调整...
iOS14是目前苹果手机更新的最新版,很多人都更新到了最新版,可是更新之后发现iOS14时钟与系统的时间对不上,慢了整整三个小时,下面一起来看看ios14时钟小组件时间不准怎么调整吧! 苹果iOS14 ...

案例：刻度时钟与数字时间

案例：刻度时钟与数字时间相关推荐

最新文章

热门文章