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 相关文章推荐
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
Javascript操作select控件代码实例
Feb 14 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+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
php实现购物车功能(上)
2020/07/23 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
拖拉表格的JS函数
2008/11/20 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
详解Vue取消eslint语法限制
2018/08/04 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Python web中实现验证码图片代码分享
2017/11/09 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
Python自动化操作实现图例绘制
2020/07/09 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
自考毕业生自我鉴定
2013/11/04 职场文书
测量工程专业求职信
2014/02/24 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
法制工作总结2015
2015/07/23 职场文书
python中print格式化输出的问题
2021/04/16 Python
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server