抖音时钟js css,JS+CSS3实现时钟效果(抖音)
JS+CSS3实现时钟效果(抖音)
本文讲述了抖音上很火的时钟效果是怎么实现的,主要用到原生态的 JS+CSS3,希望大家可以交流学习一下。
具体不解释了,看注释:
Title
html{
background: #000;
color: #666;
font-size: 12px;
overflow:hidden;
}
*{
margin: 0;
padding: 0;
}
span{
display: block;
float: left;
}
.on{
color: #fff;
}
.wrapper{
width: 200px;
height: 200px;
position: absolute;
left:50%;
top:50%;
margin-top: -100px;
margin-left: -100px;
}
.wrapper .timebox{
position: absolute;
width: 200px;
height: 200px;
top: 0;
left:0;
border-radius: 100%;
transition: all 0.5s;
}
.timebox span{
transition: all 0.5s;
float: left;
}
.wrapper .timebox span{
position: absolute;
left:50%;
top:50%;
width: 40px;
height: 18px;
margin-top: -9px;
margin-left: -20px;
text-align: right;
}
let wrapper = document.getElementById("wrapper");
let yueBox = document.getElementById("yueBox");
let riqiBox = document.getElementById("riqiBox");
let hourbox = document.getElementById("hourbox");
let minutebox = document.getElementById("minutebox");
let secondbox = document.getElementById("secondbox");
/*
* 找所有的东西标签函数
* */
let findSiblings = function( tag ){
let parent = tag.parentNode;
let childs = parent.children;
let sb = [];
for(let i=0 ; i <= childs.length-1 ; i++){
if( childs[i]!==tag){
sb[sb.length] = childs[i];
}
}
return sb ;
};
/*
* 去掉所有兄弟的类
* */
let removeSiblingClass =function( tag ){
let sb = findSiblings( tag );
for(let i=0 ; i <= sb.length-1 ; i++){
sb[i].className = "";
}
};
/*
* 初始化月份函数
* */
let initMonth = function(){
for(let i=1; i<=12; i++){
let span = document.createElement("span");
span.innerHTML = i+"月";
yueBox.appendChild( span );
}
};
// 初始化日期
let initDate = function(){
for(let i=1; i<=31; i++){
let span = document.createElement("span");
span.innerHTML = i+"日";
riqiBox.appendChild( span );
}
};
// 初始化小时,分钟,秒
let initHour = function(){
for(let i=0; i<=23; i++){
let h = i ;
let span = document.createElement("span");
if( h<10){
h="0"+h;
}
span.innerHTML = h +"点";
hourbox.appendChild( span );
}
};
let initMinute = function(){
for(let i=0; i<=59; i++){
let f = i ;
let span = document.createElement("span");
if( f<10){
f="0"+f;
}
span.innerHTML = f +"分";
minutebox.appendChild( span );
}
};
let initSecond = function(){
for(let i=0; i<=59; i++){
let miao = i ;
let span = document.createElement("span");
if( miao<10){
miao="0"+miao;
}
span.innerHTML = miao +"秒";
secondbox.appendChild( span );
}
};
// 时间文字样式切换函数
let changeTime = function(tag){
tag.className = "on";
removeSiblingClass( tag );
};
/*
* 初始化日历函数
* */
let initRili = function(){
initMonth(); // 初始化月份
initDate(); // 初始化日期
initHour(); // 小时
initMinute();
initSecond();
};
/*
* 展示当前时间
* 参数:mydate 时间对象
* */
let showNow = function( mydate ){
let yue = mydate.getMonth() ;
let riqi = mydate.getDate();
let hour = mydate.getHours() ;
let minute = mydate.getMinutes();
let second = mydate.getSeconds();
// 时间文字样式切换函数
changeTime( yueBox.children[yue] );
changeTime( riqiBox.children[riqi-1] );
changeTime( hourbox.children[hour] );
changeTime( minutebox.children[minute] );
changeTime( secondbox.children[second] );
};
// 展示时间圆圈函数
// tag:目标
// num:数字数量
// dis:圆圈半径
let textRound = function(tag,num,dis){
let span = tag.children ;
for(let i=0 ; i<=span.length-1; i++){
span[i].style.transform="rotate("+ (360/span.length)*i+"deg) translateX("+dis+"px)" ;
}
};
/*
* 旋转指定“圆圈”指定度数
* */
let rotateTag = function(tag , deg){
tag.style.transform = "rotate("+deg+"deg)";
};
let main = function(){
initRili(); // 初始化日历
setInterval(function(){
let mydate = new Date();
showNow( mydate ); // 展示当前时间
},1000);
// n秒后,摆出圆形
setTimeout(function(){
wrapper.className = "wrapper";
textRound(yueBox,12,40);
textRound(riqiBox,31,80);
textRound(hourbox,24,120);
textRound(minutebox,60,160);
textRound(secondbox,60,200);
setInterval(function(){
let mydate = new Date();
rotateTag( yueBox , -30*mydate.getMonth());
rotateTag( riqiBox , -360/31*(mydate.getDate()-1) );
rotateTag( hourbox , -360/24*mydate.getHours());
rotateTag( minutebox , -6*mydate.getMinutes());
rotateTag( secondbox , -6*mydate.getSeconds());
},1000)
},6000)
};
main();
感谢大家的阅读,大家学会了吗?
本文转自:https://blog.csdn.net/weixin_42703239/article/details/105012665
推荐教程:《JS教程》
抖音时钟js css,JS+CSS3实现时钟效果(抖音)相关推荐
- html 下拉列表美化,JS+CSS实现美化的下拉列表框效果
本文实例讲述了JS+CSS实现美化的下拉列表框效果.分享给大家供大家参考.具体如下: 一款经过JS+CSS美化的下拉列表,效果很不错,但代码有点偏多,学习CSS的朋友可以学习一下方法,然后自己变通一下 ...
- JS/CSS 各种操作信息提示效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
- yii2 js css,JS、CSS的引用
[TOC] #### 1. 使用AssetBundle进行注册 ~~~ class AppAsset extends AssetBundle { public $basePath = '@webroo ...
- css 特效 火球 光,JS+CSS实现炫酷光感效果
JS+CSS带你实现炫酷光感效果,供大家参考,具体内容如下 效果一:(螺旋式沉浸视觉感受) 效果二:(旋涡式远观视觉感受) 实现代码: 光感效果 html,body{ height: 100%; ov ...
- 制作抖音超火的罗盘时钟(HTML+CSS+JS)
❤ 精彩专栏推荐
- 抖音超火HTML+CSS+JS制作3D炫酷魔方
❤ 精彩专栏推荐
- highlight.js css,JS库之Highlight.js的用法详解
下载到本地后,新建个页面测试 1.在head中加入css和js的引用 highlight hljs.initHighlightingOnLoad(); 2.添加对应要显示的内容 # 读取文件内容 de ...
- 原生js+css实现仿京东物流效果
首先是html部分: <div id="toptxt"> </div> <input type="text"> 首先我们可以 ...
- 【彩虹爱心源代码----HTML+JS+CSS等实现(附效果+源代码)】
效果 当然,是在前端界面运行显示的哈!不过鉴于文件稍大,就不再展示其他效果了,大家可以自己尝试一下哟~ 源代码 index.html <!DOCTYPE html> <html la ...
- css实现loading,css3 实现loading效果
1 圆点渐入渐出 要点: 缩放和透明度的变化,循环变化 .demo1{ width: 40px; height: 40px; margin: 0 auto; border-radius: 100px; ...
最新文章
- 在vue中使用Element-UI
- java raw_GitHub - Braw115/JavaWEB: JavaWEB学习之中的一些Demo
- php+ajax简单实现跨域(http+https)请求调用
- centos内核编译与其签名机制
- PAT A1096 质因子分解
- android 源码打patch
- thinkphp 3.2.2 图片上传gif类型生成缩略图错误
- android跑马灯代码,Android中实现跑马灯效果
- wordpress插件_顶级WordPress反垃圾邮件插件
- 计算机的自带拍视频教程,电脑如何录制视频并剪辑
- layout_marginTop=-3dp导致内容被遮挡的问题处理
- 马尔可夫链的常返态和非常返态-零常返态
- 乐安全 支持x86_不用苦等五一 四款近期主打平板推荐
- wps如何用循环函数_WPS版Excel中怎样使用函数进行运算
- mathematica求定积分和不定积分
- FCN全卷积网络模型——高分辨率遥感影像地物识别
- 哪些行业适合开发小程序商城
- Qiime2 软件安装
- Android系统APP安装流程
- java程序设计第四版张弛答案,2020学堂云Java编程概论——第一部分单元测试答案...