时钟转盘html源代码

文章目录

时钟源码
操作步骤

时钟源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>www.dupengfei.top</title><style>html{background: #000;color: #666;font-size: 12px;overflow:hidden;}*{margin: 0;padding: 0;}span{display: block;float: left;}.on{color: #fff;}.wrapper{width: 200px;height: 200px;position: absolute;left:50%;top:50%;margin-top: -100px;margin-left: -100px;}.wrapper .timebox{position: absolute;width: 200px;height: 200px;top: 0;left:0;border-radius: 100%;transition: all 0.5s;}.timebox span{transition: all 0.5s;float: left;}.wrapper  .timebox span{position: absolute;left:50%;top:50%;width: 40px;height: 18px;margin-top: -9px;margin-left: -20px;text-align: right;}</style>
</head>
<body><div id="wrapper"><div class="timebox yuebox" id="yueBox"></div><div class="timebox riqiBox" id="riqiBox"></div><div class="timebox hourbox" id="hourbox"></div><div class="timebox minutebox" id="minutebox"></div><div class="timebox secondbox" id="secondbox"></div>
</div><script>let wrapper = document.getElementById("wrapper");let yueBox = document.getElementById("yueBox");let riqiBox = document.getElementById("riqiBox");let hourbox = document.getElementById("hourbox");let minutebox = document.getElementById("minutebox");let secondbox = document.getElementById("secondbox");/** 找所有的东西标签函数* */let findSiblings = function( tag ){let parent = tag.parentNode;let childs = parent.children;let sb = [];for(let i=0 ; i <= childs.length-1 ; i++){if( childs[i]!==tag){sb[sb.length] = childs[i];}}return  sb ;};/** 去掉所有兄弟的类* */let removeSiblingClass =function( tag ){let sb = findSiblings( tag );for(let i=0 ;  i <= sb.length-1 ; i++){sb[i].className = "";}};/** 初始化月份函数* */let initMonth = function(){for(let i=1; i<=12; i++){let span = document.createElement("span");span.innerHTML = i+"月";yueBox.appendChild( span );}};// 初始化日期let initDate = function(){for(let i=1; i<=31; i++){let span = document.createElement("span");span.innerHTML = i+"日";riqiBox.appendChild( span );}};// 初始化小时，分钟，秒let initHour = function(){for(let i=0; i<=23; i++){let h = i ;let span = document.createElement("span");if( h<10){h="0"+h;}span.innerHTML = h +"点";hourbox.appendChild( span );}};let initMinute = function(){for(let i=0; i<=59; i++){let  f = i ;let span = document.createElement("span");if( f<10){f="0"+f;}span.innerHTML = f +"分";minutebox.appendChild( span );}};let initSecond = function(){for(let i=0; i<=59; i++){let  miao = i ;let span = document.createElement("span");if( miao<10){miao="0"+miao;}span.innerHTML = miao +"秒";secondbox.appendChild( span );}};// 时间文字样式切换函数let changeTime = function(tag){tag.className = "on";removeSiblingClass( tag );};/** 初始化日历函数* */let initRili = function(){initMonth(); // 初始化月份initDate(); // 初始化日期initHour(); // 小时initMinute();initSecond();};/** 展示当前时间* 参数：mydate 时间对象* */let  showNow = function( mydate ){let yue = mydate.getMonth() ;let riqi = mydate.getDate();let hour = mydate.getHours()  ;let minute = mydate.getMinutes();let second = mydate.getSeconds();// 时间文字样式切换函数changeTime( yueBox.children[yue] );changeTime( riqiBox.children[riqi-1] );changeTime( hourbox.children[hour] );changeTime( minutebox.children[minute] );changeTime( secondbox.children[second] );};// 展示时间圆圈函数// tag：目标// num：数字数量// dis：圆圈半径let textRound = function(tag,num,dis){let span = tag.children ;for(let i=0 ; i<=span.length-1; i++){span[i].style.transform="rotate("+ (360/span.length)*i+"deg)  translateX("+dis+"px)" ;}};/** 旋转指定“圆圈”指定度数* */let rotateTag = function(tag , deg){tag.style.transform = "rotate("+deg+"deg)";};let main = function(){initRili(); // 初始化日历setInterval(function(){let mydate = new Date();showNow( mydate ); // 展示当前时间},1000);//  n秒后，摆出圆形setTimeout(function(){wrapper.className = "wrapper";textRound(yueBox,12,40);textRound(riqiBox,31,80);textRound(hourbox,24,120);textRound(minutebox,60,160);textRound(secondbox,60,200);setInterval(function(){let mydate = new Date();rotateTag( yueBox , -30*mydate.getMonth());rotateTag( riqiBox , -360/31*(mydate.getDate()-1) );rotateTag( hourbox , -360/24*mydate.getHours());rotateTag( minutebox , -6*mydate.getMinutes());rotateTag( secondbox , -6*mydate.getSeconds());},1000)},6000)};main();</script></body>
</html>

操作步骤

1、在windows上新建一个文本文档
2、复制以上的代码，粘贴到刚刚新建的文本文档里
3、ctrl+s保存，关闭
4、右击重命名，起一个你想起的名字
5、后缀名改为html，双击打开即可；

时钟转盘html源代码相关推荐

基于STM32的esp8266WIFI自动校时+语音报时可调时钟（附源代码）
基于STM32WIFI自动校时+语音报时可调时钟(附源代码) 概述 STM32f103C8T6最小系统共阴数码管 74HC595芯片 JQ5600语音模块 ESP8266-01SWIFI模块 ds1 ...
VHDL VGA 时钟处理转盘形式源代码
此代码适用于黑金开发板,其他的自行尝试吧 library ieee; use ieee.std_logic_1164.all; entity vga_display is port(rst_n:in ...
PHP jQuery微信大转盘抽奖源代码分享
微信大转盘抽奖-jQuery+PHP实现,发现很多转盘抽奖,都实现了前台部分,大部分都使用了HTML5技术,但是后台自己调整抽奖几率不方便,索性自己收集资料,在一个转盘抽奖的基础上,增加了PHP部分代 ...
【Java】动态模拟时钟
应用名称:java动态模拟时钟用到的知识:javaGUI,java 绘图开发环境:win10+eclipse+jdk1.8 功能说明:通过java绘图画出一个虚拟的动态时钟效果图: 源代码: i ...
C++桌面透明数字时钟开发，简单编程实例，一看就会！
电脑桌面透明时钟是款简单实用的电脑桌面时钟:它可以在用户的电脑桌面上显示您需要的时间,并且包括了一些特定文字的显示,而且在进行编写文字的时候,可以对颜色选择,大小的设置:它是以透明的方式来显示,而且可 ...
java时钟时针绘制代码,Java实现动态模拟时钟
搜索热词本文实例为大家分享了java动态模拟时钟的具体代码,供大家参考,具体内容如下应用名称:java动态模拟时钟用到的知识:javaGUI,java 绘图开发环境:win10+eclipse ...
android 内核态
今天,简单讲讲android的内核态的知识. 一.内核态(Kernel Mode)与用户态(User Mode) 内核态: CPU可以访问内存所有数据, 包括外围设备, 例如硬盘, 网卡. CPU也可 ...
android和linux操作系统的区别
Android是由Google为移动设备开发的开源操作系统.Android软件的原始开发商Android公司是由Google,Inc.于2005年购买的.它是基于Linux 2.6内核开发的.Linu ...
小米手机Android内存管理基本情况介绍
1 Android Binder,基于OpenBinder框架的一个驱动,用于提供Android平台的进程间通讯(IPC,inter-process communication). 源代码位于driv ...
Questa CDC（安全性测试）
Questa CDC(安全性测试) 作者:Saint 掘金:https://juejin.im/user/5aa1f89b6fb9a028bb18966a 微博:https://weibo.com/5 ...

时钟转盘html源代码

文章目录

时钟源码

操作步骤

时钟转盘html源代码相关推荐

最新文章

热门文章