JavaScript实现抖音罗盘时钟


Posted in Javascript onOctober 11, 2019

本文实例为大家分享了JavaScript实现抖音罗盘时钟的具体代码,供大家参考,具体内容如下

其实很早以前就想发了,很多东西其实并不难,只要多动手动脑就行了,下面直接上代码,其他的自己下去慢慢研究吧!

HTML部分代码:

<!DOCTYPE html>
<html lang="en">
<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>

<link rel="stylesheet" href="css/demo.css" >

</head>
<body>

<div id="clock"></div>

<script src="js/demo.js"></script>

</body>
</html>

css部分代码:

*{
 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%
}

JavaScript部分代码:

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=0;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][1][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)";
}

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
js日期时间补零的小例子
Mar 05 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
javascript刷新父页面方法汇总详解
Oct 10 #Javascript
element form 校验数组每一项实例代码
Oct 10 #Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 #Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 #jQuery
VUE注册全局组件和局部组件过程解析
Oct 10 #Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 #jQuery
electron-vue开发环境内存泄漏问题汇总
Oct 10 #Javascript
You might like
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
php自动加载代码实例详解
2021/02/26 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
pycharm 解除默认unittest模式的方法
2018/11/30 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
暑期实践思想汇报
2014/01/06 职场文书
大学毕业感言100字
2014/02/03 职场文书
开工仪式策划方案
2014/05/23 职场文书
反腐倡廉标语
2014/06/24 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
诚实守信演讲稿
2014/09/01 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
辞职信的写法
2015/02/27 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript