JS + HTML 罗盘式时钟的实现


Posted in Javascript onMay 21, 2021

代码块:

<!DOCTYPE html>
   <html lang="zh-hans">
       <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>js仿抖罗盘时钟</title>
           <style>
               *{
                   margin:0;
                   padding:0
              }
              html,body{
                   width:100%;
                   height:100%;
                   background-color:#000;
                   overflow:hidden
              }
              #clock{
                   position:relative;
                  width:100%;
                  height:100%;
                  background:#000
              }
              .label{
                   display:inline-block;
                   color:#4d4d4d;
                  text-align:center;
                  padding:0 5px;
                  font-size:19px;
                  transition:left 1s,top 1s;
                  transform-origin:0% 0%
             }
          </style>     
      </head>
      <body>
          <div id="clock"></div>
          <script>
              var monthText=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
              var dayText=["零一号","零二号","零三号","零四号","零五号","零六号","零七号","零八号","零九号","十号","十一号","十二号","十三号","十四号","十五号","十六号","十七号","十八号","十九号","二十号","二十一号","二十二号","二十三号","二十四号","二十五号","二十六号","二十七号","二十八号","二十九号","三十号","三十一号"];
              var weekText=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
              var hourText=["零点","零一点","零两点","零三点","零四点","零五点","零六点","零七点","零八点","零九点","零十点","十一点","十二点","十三点","十四点","十五点","十六点","十七点","十八点","十九点","二十点","二十一点","二十二点","二十三点"];
              var minuteText=["零一分","零二分","零三分","零四分","零五分","零六分","零七分","零八分","零九分","零十分","十一分","十二分","十三分","十四分","十五分","十六分","十七分","十八分","十九分","二十分","二十一分","二十二分","二十三分","二十四分","二十五分","二十六分","二十七分","二十八分","二十九分","三十分","三十一分","三十二分","三十三分","三十四分","三十五分","三十六分","三十七分","三十八分","三十九分","四十分","四十一分","四十二分","四十三分","四十四分","四十五分","四十六分","四十七分","四十八分","四十九分","五十分","五十一分","五十二分","五十三分","五十四分","五十五分","五十六分","五十七分","五十八分","五十九分","六十分"];
              var secondsText=["零一秒","零二秒","零三秒","零四秒","零五秒","零六秒","零七秒","零八秒","零九秒","零十秒","十一秒","十二秒","十三秒","十四秒","十五秒","十六秒","十七秒","十八秒","十九秒","二十秒","二十一秒","二十二秒","二十三秒","二十四秒","二十五秒","二十六秒","二十七秒","二十八秒","二十九秒","三十秒","三十一秒","三十二秒","三十三秒","三十四秒","三十五秒","三十六秒","三十七秒","三十八秒","三十九秒","四十秒","四十一秒","四十二秒","四十三秒","四十四秒","四十五秒","四十六秒","四十七秒","四十八秒","四十九秒","五十秒","五十一秒","五十二秒","五十三秒","五十四秒","五十五秒","五十六秒","五十七秒","五十八秒","五十九秒","六十秒"];
              var clock;var monthList=[];
              var dayList=[];
              var weekList=[];
              var hourList=[];
              var minuteList=[];
              var secondsList=[];
              var isCircle=false;
              var textSet=[[monthText,monthList],[dayText,dayList],[weekText,weekList],[hourText,hourList],[minuteText,minuteList],[secondsText,secondsList]];
              window.onload=function(){
                  init();
                  setInterval(function(){
                       runTime();
                       },100);
                      changePosition();
                      setTimeout(function(){
                      changeCircle();
                      },2000);
                  }
              function init(){
                  clock=document.getElementById('clock');
                  for(var i=0;i<textSet.length;i++){
                     for(var j=0;j<textSet[i][0].length;j++){
                          var temp=createLabel(textSet[i][0][j]);
                         clock.appendChild(temp);textSet[i][1].push(temp);
                      }
                  }
              }
              function createLabel(text)
              {
               var div=document.createElement('div');
              div.classList.add('label');
              div.innerText=text;return div;
              }
              function runTime(){
                  var now=new Date();
                  var month=now.getMonth();
                  var day=now.getDate();
                  var week=now.getDay();
                  var hour=now.getHours();
                  var minute=now.getMinutes();
                  var seconds=now.getSeconds();
                  initStyle();
                  var nowValue=[month,day-1,week,hour,minute,seconds];
                 for(var i=0;i<nowValue.length;i++){
                     var num=nowValue[i];
                     textSet[i][1][num].style.color='#fff';
                  }
                  if(isCircle){
                     var widthMid=document.body.clientWidth/2;
                     var heightMid=document.body.clientHeight/2;
                     for(var i=0;i<textSet.length;i++){
                         for(var j=0;j<textSet[i][0].length;j++){
                             var r=(i+1)*35+50*i;
                             var deg=360/textSet[i][1].length*(j-nowValue[i]);
                             var x=r*Math.sin(deg*Math.PI/180)+widthMid;
                             var y=heightMid-r*Math.cos(deg*Math.PI/180);
                             var temp=textSet[i][1][j];
                             temp.style.transform='rotate('+(-90+deg)+'deg)';
                             temp.style.left=x+'px';
                             temp.style.top=y+'px';
                         }
                     }
                 }
             }
             function initStyle(){
                 var label=document.getElementsByClassName('label');
                 for(var i=0;i<label.length;i++){
                     label[i].style.color='#4d4d4d';
                 }
             }
             function changePosition(){
                 for(let i=;i<textSet.length;i++){
                     for(let j=0;j<textSet[i][1].length;j++){
                         let tempX=textSet[i][1][j].offsetLeft+"px";
                         let tempY=textSet[i][1][j].offsetTop+"px";
                         setTimeout(function(){
                             textSet[i][][j].style.position="absolute";
                             textSet[i][1][j].style.left=tempX;textSet[i][1][j].style.top=tempY;
                         },50);
                      }
                  }
             }
             function changeCircle(){
                 isCircle=true;
                 clock.style.transform="rotate(90deg)";
             }
         </script>
     </body>
 </html>

效果:

JS + HTML 罗盘式时钟的实现

到此这篇关于HTML 罗盘式时钟的实现的文章就介绍到这了,更多相关HTML 罗盘式时钟内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
Javascript 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
JavaScript canvas实现流星特效
May 20 #Javascript
vue使用节流函数的踩坑实例指南
vue实现同时设置多个倒计时
May 20 #Vue.js
Vue和Flask通信的实现
JavaScript实现班级抽签小程序
May 19 #Javascript
JS实现扫雷项目总结
深入浅析React中diff算法
May 19 #Javascript
You might like
理解php Hash函数,增强密码安全
2011/02/25 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
Vue3 源码导读(推荐)
2019/10/14 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
简单了解python PEP的一些知识
2019/07/13 Python
python日志模块logbook使用方法
2019/09/19 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
想学画画?python满足你!
2020/12/24 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
会计系毕业个人自荐信格式
2013/09/23 职场文书
工商企业管理实习自我鉴定
2013/12/04 职场文书
西式结婚主持词
2014/03/14 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
重温入党誓词主持词
2015/06/29 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL