js写的数码时钟,在“最小化”浏览器 或者 “切换网页”是动画效果好像不对
一、问题
在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ????
二、HTML代码如下
<div id="clockWrap"> <h2><img src="images/title.png"></h2> <div class="year"> <img class="numDate" src="images/0.png"> <img class="numDate" src="images/0.png"> <img class="numDate" src="images/0.png"> <img class="numDate" src="images/0.png"> <img src="images/year.png"> <img class="numDate" src="images/0.png"> <img class="numDate" src="images/0.png"> <img src="images/month.png"> <img class="numDate" src="images/0.png"> <img class="numDate" src="images/0.png"> <img src="images/seven.png"> </div> <div class="time"> <img class="numTime" src="images/0.png"> <img class="numTime" src="images/0.png"> <img src="images/sign.png"> <img class="numTime" src="images/0.png"> <img class="numTime" src="images/0.png"> <img src="images/sign.png"> <img class="numTime" src="images/0.png"> <img class="numTime" src="images/0.png"> <img src="images/week.png"> <img class="day" src="images/seven.png" > </div> </div>
三、js代码如下
window.onload = function(){ var arrNum = ["./images/0.png","./images/1.png","./images/2.png","./images/3.png","./images/4.png","./images/5.png","./images/6.png","./images/7.png","./images/8.png","./images/9.png"]; var arrDay = ["./images/seven.png","./images/one.png","./images/two.png","./images/three.png","./images/four.png","./images/five.png","./images/six.png"]; var parent = _Id("clockWrap"); var aNumDate = getByClass( parent,"img","numDate" ); var aNumTime = getByClass( parent,"img","numTime" ); var aNumDay = getByClass( parent,"img","day" ); var myDate = new Date(); var preDate = myDate.getFullYear() + toZero(myDate.getMonth()+1) + toZero(myDate.getDate()); var nextDate = ""; var preStrTime = toZero( myDate.getHours()) + toZero(myDate.getMinutes()) + toZero(myDate.getSeconds() ); var nextStrTime = "" ; var preDay = myDate.getDay(); var nextDay = 0; var arr = []; var arr_date = []; //初始化设置 for(var i=0,x=aNumTime.length;i<x;i++){ //设置时间 时分秒 aNumTime[i].src = arrNum[ preStrTime.charAt(i) ]; } aNumDay[0].src = arrDay[preDay];//设置星期 for(var i=0,x=aNumDate.length;i<x;i++){ //设置年月日 aNumDate[i].src = arrNum[ preDate.charAt(i) ]; } setInterval(tochange,1000); function tochange(){ //每隔一秒执行此函数,获取下一秒时间 var myDate = new Date(); nextStrTime = toZero( myDate.getHours()) + toZero(myDate.getMinutes()) + toZero(myDate.getSeconds() ); toCome(preStrTime,nextStrTime); preStrTime = nextStrTime; // 设置星期 nextDay = myDate.getDay(); if( preDay != nextDay ){ //aNumDay[0].src = arrDay[nextDay]; startMoveDay(); preDay = nextDay; } //设置年月日 nextDate = myDate.getFullYear() + toZero(myDate.getMonth()+1) + toZero(myDate.getDate()); if( preDate != nextDate ){ toComeDate(preDate,nextDate); preDate = nextDate; } } function toCome(str1,str2){ //比较两个字符串,把变化存到数组 arr 里 arr = []; for(var i=0,l=str1.length;i<l;i++){ if(str1.charAt(i) != str2.charAt(i)){ //aNumTime[i].src = arrNum[ str2.charAt(i) ]; arr.push(i); } } startMove(); } function toComeDate(str1,str2){ //比较两个字符串,把变化存到数组 arr 里 arr_date = []; for(var i=0,l=str1.length;i<l;i++){ if(str1.charAt(i) != str2.charAt(i)){ //aNumTime[i].src = arrNum[ str2.charAt(i) ]; arr_date.push(i); } } startMoveDate(); } function startMove(){//图片翻转效果 var iSpeed = -4; var imgH = aNumTime[0].offsetHeight; var timer = null; timer = setInterval(function(){ for(var i=0,x=arr.length;i<x;i++){ if( aNumTime[arr[i]].offsetHeight == aNumTime[arr[i]].offsetHeight%iSpeed ){ iSpeed = 4; aNumTime[arr[i]].src = arrNum[nextStrTime.charAt(arr[i])]; } aNumTime[arr[i]].style.height = aNumTime[arr[i]].offsetHeight + iSpeed +'px'; // 现在图片高度 + top值*2 = 图片高度 aNumTime[arr[i]].style.top = (imgH-aNumTime[arr[i]].offsetHeight)/2 +'px'; if( aNumTime[arr[i]].offsetHeight == imgH){ clearInterval(timer); } } },30); } function startMoveDate(){//图片翻转效果 var iSpeed = -4; var imgH = aNumDate[0].offsetHeight; var timer = null; timer = setInterval(function(){ for(var i=0,x=arr_date.length;i<x;i++){ if( aNumDate[arr_date[i]].offsetHeight == aNumDate[arr_date[i]].offsetHeight%iSpeed ){ iSpeed = 4; aNumDate[arr_date[i]].src = arrNum[nextDate.charAt(arr_date[i])]; } aNumDate[arr_date[i]].style.height = aNumDate[arr_date[i]].offsetHeight + iSpeed +'px'; /* 现在图片高度 + top值*2 = 图片高度 */ aNumDate[arr_date[i]].style.top = (imgH-aNumDate[arr_date[i]].offsetHeight)/2 +'px'; if( aNumDate[arr_date[i]].offsetHeight == imgH){ clearInterval(timer); } } },30); } function startMoveDay(){//图片翻转效果 //aNumDay[0].src = arrDay[nextDay]; var iSpeed = -4; var imgH = aNumDay[0].offsetHeight; var timer = null; timer = setInterval(function(){ if( aNumDay[0].offsetHeight == aNumDay[0].offsetHeight%iSpeed ){ iSpeed = 4; aNumDay[0].src = arrDay[nextDay]; } aNumDay[0].style.height = aNumDay[0].offsetHeight + iSpeed +'px'; /* 现在图片高度 + top值*2 = 图片高度 */ aNumDay[0].style.top = (imgH-aNumDay[0].offsetHeight)/2 +'px'; if( aNumDay[0].offsetHeight == imgH){ clearInterval(timer); } },30); } function toZero(num){ //数字小于10 在前面加零 if( num < 10 ){ return "0" + num; }else{ return "" + num; } } };
三、css代码
@charset "utf-8"; /* CSS Document */ body{margin: 0;background-color: #3f055f;} /* 日历 clockWrap */ #clockWrap{width: 520px;height: 520px;margin: 15px auto 0;border: 1px solid #fff;} #clockWrap h2{text-align: center;margin: 20px auto;} #clockWrap img{vertical-align: top;height: 37px;} #clockWrap .year, #clockWrap .time{height: 37px;text-align: center;position: relative;margin-top: 40px;} #clockWrap img, #clockWrap img{position: relative;} #clockWrap img.numTime, #clockWrap img.numDate{width: 25px;} #clockWrap img.day{width: 38px;}