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 相关文章推荐
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
纯javascript版日历控件
Nov 24 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
JS实现星星海特效
Dec 24 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
vue filters的使用详解
2018/06/11 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python错误处理操作示例
2018/07/18 Python
python实现梯度下降算法
2020/03/24 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
化工操作工岗位职责
2014/04/29 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
保安辞职信范文
2015/02/28 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
2015年老干部工作总结
2015/04/23 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书