也是一种思路吧,一步一步写的,js+css3。
动态时钟.gif
- js
var block1=document.getElementById("blockBox1");
var block2=document.getElementById("blockBox2");
var block3=document.getElementById("blockBox3");
var blockObj={
init:function(){
this.block1Init();
this.block2Init();
this.block3Init();
},
/**
* 获取系统时间
*/
sysBlock1:function(){
var times=new Date();
var y=times.getFullYear(),M=times.getMonth()+1,d=times.getDate(),
h=times.getHours(),m=times.getMinutes(),s=times.getSeconds(),
w=times.getDay(),weekArr=['日','一','二','三','四','五','六'];
block1.innerHTML=`今天是${y}年${this.singleNumDeal(M)}月${this.singleNumDeal(d)}日${this.singleNumDeal(h)}时${this.singleNumDeal(m)}分${this.singleNumDeal(s)}秒 星期${weekArr[w]}`;
},
block1Init:function () {
var that=this;
this.sysBlock1();
setInterval(function(){
that.sysBlock1();
},1000);
},
block2Init:function(){
var that=this;
this.imgBlock();
setInterval(function(){
that.imgBlock();
},1000);
},
block3Init:function(){
var that=this;
this.aniBlock();
setInterval(function(){
that.aniBlock();
},1000);
},
/**
* 图片时钟
*/
imgBlock:function(){
var times=new Date();
var h=this.singleNumDeal(times.getHours()),m=this.singleNumDeal(times.getMinutes()),s=this.singleNumDeal(times.getSeconds()),
timeStr=''+h+':'+m+':'+s,timeStrArr=timeStr.split(''),pointStr='<div class="img-wrapper"><img src="images/digit/point.png"></div>',
showStr='';
for(var i=0;i<timeStrArr.length;i++){
if(timeStrArr[i]==':'){
showStr+=pointStr;
}else{
timeStrArr[i]='0'+(timeStrArr[i]-0+1);
showStr+=`<div class="img-wrapper"><img src="images/digit/digit_${timeStrArr[i]}.png"></div>`;
}
}
block2.innerHTML=showStr;
},
lastTimeObj:'',
/**
* 动画时钟
*/
aniBlock:function(){
var times=new Date();
var h=this.singleNumDeal(times.getHours()),m=this.singleNumDeal(times.getMinutes()),s=this.singleNumDeal(times.getSeconds()),
timeStr=''+h+m+s,timeStrArr=timeStr.split(''),pointStr='<div class="img-wrapper"><img src="images/digit/point.png"></div>',
showStr='';
changeNum=0;
// 判断从哪改变的
for(var k=0;k<timeStr.length;k++){
if(timeStr[k]!=this.lastTimeObj[k]){
changeNum=k;
break;
}
}
// 不改变的位置正常循环
for(var m=0;m<changeNum;m++){
var curImg=`<img src="images/digit/digit_${'0'+(timeStrArr[m]-0+1)}.png">`,
nextImg=timeStrArr[m]==9?`<img src="images/digit/digit_01.png">`:`<img src="images/digit/digit_0${(timeStrArr[m]-0+2)}.png">`;
var pStr='';
if(m==1 || m==3){
pStr=pointStr;
}
showStr+=`<div class="img-wrapper">${curImg}${nextImg}</div>${pStr}`;
}
// 改变的位置到结束都要有动画
for(var i=changeNum;i<timeStrArr.length;i++){
var pStr='';
if(i==1 || i==3){
pStr=pointStr;
}
var curImg=`<img class="cur-ani" src="images/digit/digit_${'0'+(timeStrArr[i]-0===0?1:timeStrArr[i]-0)}.png">`,
nextImg=`<img class="next-ani" src="images/digit/digit_0${(timeStrArr[i]-0+1)}.png">`;
showStr+=`<div class="img-wrapper">${curImg}${nextImg}</div>${pStr}`;
}
block3.innerHTML=showStr;
this.lastTimeObj=timeStr;
},
/**
* 单个数值处理
* @param num
*/
singleNumDeal:function (num) {
var n=num>=10?num:'0'+num;
return n;
}
};
blockObj.init();
- css
#blockBox1{
text-align: center;
line-height: 100px;font-size: 40px;}
.box2{
width: 800px; margin: 10px auto;height: 135px; overflow: hidden;
}
.box2 .img-wrapper{
width: 90px;
margin-right: 5px;
float: left;
}
.cur-ani{ animation: ani 1s;}
.next-ani{animation:bounceInUp 1s;}
@keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
100% {
transform: translate3d(0, 0, 0); opacity: 1;
}
}
@keyframes ani {
from{
margin-top:0px;
}
to{
margin-top:-135px;
}
}
- html
<div id="blockBox1">
</div>
<div id="blockBox2" class="clear box2">
</div>
<div id="blockBox3" class="clear box2">
</div>
网友评论