html时钟自动刷新抖音,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教程》
html时钟自动刷新抖音,JS+CSS3实现时钟效果(抖音)相关推荐
- html翻牌动画效果,js+css3翻牌动画效果
这是一款js+css3翻牌动画效果,界面设计感不错的,喜欢可以下载哦温馨提示不兼容IE6,7,8浏览器. 查看演示 下载资源: 16 次 下载资源 下载积分: 20 积分 function () { ...
- 自动刷新页面数据的js
自动刷新页面的js <script type="text/javascript">setTimeout(function () {//这里写你想要刷新的js或者方法体都 ...
- html 设置页面刷新,HTML 页面自动刷新
学习就是一个不断积累的过程,每一天能够学到一点新东西说明自己就在进步!! HTML head 里面设置页面自动刷新功能 兼容Ie 页面2s自动刷新一次 代码: Document Hello world ...
- Java+jxbrowser+jna+js实现抖音很火的时钟桌面WallPaperEngine
很早以前就在抖音上看到电脑时钟桌面,当时都惊呆了,不知道是如何实现的,但抖音上也没有说实现步骤,也就没有放在心上.前段时间刚刚换了个新的显示器,想着更新一下桌面背景,网上找了一翻,没有特别喜欢的背景图 ...
- 【自定义View】抖音网红文字时钟-上篇
源码地址 抖音网红文字时钟-TextClockView 起源 周末在家刷抖音的时候看到了这款网红时钟,都是Android平台的,想来何不自己实现一把.看抖音里大家发的视频,这款时钟基本分两类,一类是展 ...
- js 刷新页面但是不闪烁_前端开发还在手动刷新页面?手把手教你搭建一个自动刷新工具...
作为一名前端,开发web页面是我们的本职工作.在完成一个页面开发的过程中,保存代码然后手动刷新页面查看效果,这样的动作需要重复无数次,虽然一次这样的动作可能只要花费几秒钟的时间,但是次数多了也挺浪费时 ...
- 用html做12进制时钟特效,js+css3实现简单时钟特效
本文实例为大家分享了js+css3实现简单时钟的具体代码,供大家参考,具体内容如下 1.实现了时钟的特效,可以转动,时间准确,画面美观大气: 2.用到了css3的transform: rotate,t ...
- JS自动刷新当前页面
JS自动刷新当前页面 在ITOO的后台管理中,有一个需求就是查看考生的登录情况,每个考场当前的考生登录人数详情. 这里,之前是手动的点击刷新按钮,进行刷新,这里前台使用的是easyUI,代码如下: e ...
- javascript(js)自动刷新页面的实现方法总结
自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...
最新文章
- ‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序
- 深度解析算法优化内部机制:为什么机器学习算法难以优化?
- SpringCloud从入门到进阶(九)——单点部署Zuul的压力测试与调优(二)
- 润乾报表实现无数据源的规则报表及改进
- 使用Hamcrest增强JUnit的测试能力
- 实例42:python
- 第11周多线程 学习总结
- Mac OS X 安装ruby环境
- webservice的wsdl文件怎么生成
- ftp服务器目录创建文件夹,ftp服务器目录创建文件夹
- 金蝶eas怎么引出凭证_如何引出会计分录序时簿?
- 软件开发工作经验分享
- Revit二次开发_1.过滤器笔记篇
- JavaWeb(狂神老师上课笔记)
- 怎么html让元素脱离文档流,子元素设置绝对定位之后脱离文档流!
- atof()函数实现
- 【渝粤教育】广东开放大学 学前教育研究方法 形成性考核 (23)
- 如何安装SPSS软件
- vue利用事件委托实现按钮互斥,并传递对应的值
- git .gitignore忽略文件的用法