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 相关文章推荐
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
react基本安装与测试示例
Apr 27 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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
php中实现可以返回多个值的函数实例
2015/03/21 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
建筑工程专业毕业生自荐信
2013/10/19 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
商场父亲节活动方案
2014/08/27 职场文书
单位工作证明
2014/10/07 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
2014年小学安全工作总结
2014/12/04 职场文书