一、问题

在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ????

二、HTML代码如下

<div id="clockWrap">
<h2><img src="data:images/title.png"></h2>
<div class="year">
<img class="numDate" src="data:images/0.png">
<img class="numDate" src="data:images/0.png">
<img class="numDate" src="data:images/0.png">
<img class="numDate" src="data:images/0.png">
<img src="data:images/year.png">
<img class="numDate" src="data:images/0.png">
<img class="numDate" src="data:images/0.png">
<img src="data:images/month.png">
<img class="numDate" src="data:images/0.png">
<img class="numDate" src="data:images/0.png">
<img src="data:images/seven.png">
</div>
<div class="time">
<img class="numTime" src="data:images/0.png">
<img class="numTime" src="data:images/0.png">
<img src="data:images/sign.png">
<img class="numTime" src="data:images/0.png">
<img class="numTime" src="data:images/0.png">
<img src="data:images/sign.png">
<img class="numTime" src="data:images/0.png">
<img class="numTime" src="data:images/0.png">
<img src="data:images/week.png">
<img class="day" src="data: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;}

js写的数码时钟,在“最小化”浏览器 或者 “切换网页”是动画效果好像不对的更多相关文章

  1. js写个小时钟

    原生js写个小时钟 一.代码 今天美化博客园自学的哈,分享一下 <!--标题变成时钟--> <div id="Header1_HeaderTitle">&l ...

  2. 翻译:让网络更快一些——最小化浏览器中的回流(reflow)

    关于reflowreflow(英音:[ri:’fləu] 美音:[ri’flo])在词典中的解释是回流,逆流.而在web应用中,翻译为回流有些牵强.我个人觉得,理解为回炉(重新塑形),似乎更加形象一点 ...

  3. eclipse非主窗口的停靠(正常), 恢复, 最小化, 最大化的切换

    1. pydev package Explorer的停靠与内嵌等 正常的情况

  4. Uipath 浏览器页面最大化和最小化

    文章来源东京IT青年前线http://www.rpatokyo.com/ Uipath 浏览器页面最大化和最小化   浏览器在关闭时会自动记忆上次浏览器关闭时窗口的小,下次再次会以同样的大小打开.机器 ...

  5. JS实现回到页面顶部动画效果 2016.03.23

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...

  6. nw.js自定义最小化图标的click事件

    选择frameless时,最小化和关闭按钮的点击事件需要自己来做,办法是: /* * 下面两个模块一定要引入到js文件中 */ var gui = require('nw.gui'); var win ...

  7. js实现右下角可关闭最小化div

    本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm效果图片: ...

  8. js基础练习三之数码时钟

    这章节有两个实例,1,定时器的使用; 2,数码时钟; 用到的js知识:定时器,Date对象. >>>>>定时器 开启定时器: setInterval 间隔型 setTim ...

  9. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

随机推荐

  1. 【题解】洛谷P1198 [JSOI2008] 最大数(线段树)

    洛谷P1198:https://www.luogu.org/problemnew/show/P1198 思路 一道水水的线段树 20分钟A掉 这道题只涉及到单点修改和区间查询 所以这道题甚至不用Laz ...

  2. android中OpenMax的实现【3】OMX中主要成员

    原文 http://blog.csdn.net/tx3344/article/details/8117908 通过上文知道了,每个AwesomePlayer 只有一个OMX服务的入口,但是Awesom ...

  3. Segmentation fault(Core Dump)

    Segmentation fault 这个提示还是比较常见的,这个提示就是段错误,这是翻译还是十分恰当的. Core Dump 有的时候给我们呈现的翻译很有趣是”吐核“,但是实际上比较贴切的翻译是核心 ...

  4. TCP Congestion Control

    TCP Congestion Control Congestion occurs when total arrival rate from all packet flows exceeds R ove ...

  5. 【VS插件】Highlight all occurrences of selected word

    这个插件可以让相同的单词全部高亮成绿色,在VS中看一些文本(比如SQL)类型的文件时非常好用. 类似于这种效果:

  6. css清除间隙

    .clear{clear:both;height:0;width:0;line-height:0;overflow:hidden;}

  7. 用javascript编写猜拳游戏(函数)

    const readline = require('readline-sync')//引用readline-sync console.log('欢迎进入猜拳游戏'); //电脑随机出拳 let fn ...

  8. webstorm如何支持markdown

    首先安装markdown 插件 第一个即可.

  9. js的单例

     对于 JS 来说,巨大的灵活性使得其可以有多种方式实现单例模式,使用闭包方式来模拟私有数据,按照其思路可得: var single = (function(){ var unique; functi ...

  10. Kafka 推荐网站

    Kafka系列文章 [Kafka设计解析(一)- Kafka背景及架构介绍](http://www.jasongj.com/2015/03/10/KafkaColumn1/) [Kafka设计解析(二 ...