js写的数码时钟,在“最小化”浏览器 或者 “切换网页”是动画效果好像不对
一、问题
在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ????
二、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写的数码时钟,在“最小化”浏览器 或者 “切换网页”是动画效果好像不对的更多相关文章
- js写个小时钟
原生js写个小时钟 一.代码 今天美化博客园自学的哈,分享一下 <!--标题变成时钟--> <div id="Header1_HeaderTitle">&l ...
- 翻译:让网络更快一些——最小化浏览器中的回流(reflow)
关于reflowreflow(英音:[ri:’fləu] 美音:[ri’flo])在词典中的解释是回流,逆流.而在web应用中,翻译为回流有些牵强.我个人觉得,理解为回炉(重新塑形),似乎更加形象一点 ...
- eclipse非主窗口的停靠(正常), 恢复, 最小化, 最大化的切换
1. pydev package Explorer的停靠与内嵌等 正常的情况
- Uipath 浏览器页面最大化和最小化
文章来源东京IT青年前线http://www.rpatokyo.com/ Uipath 浏览器页面最大化和最小化 浏览器在关闭时会自动记忆上次浏览器关闭时窗口的小,下次再次会以同样的大小打开.机器 ...
- JS实现回到页面顶部动画效果 2016.03.23
最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...
- nw.js自定义最小化图标的click事件
选择frameless时,最小化和关闭按钮的点击事件需要自己来做,办法是: /* * 下面两个模块一定要引入到js文件中 */ var gui = require('nw.gui'); var win ...
- js实现右下角可关闭最小化div
本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm效果图片: ...
- js基础练习三之数码时钟
这章节有两个实例,1,定时器的使用; 2,数码时钟; 用到的js知识:定时器,Date对象. >>>>>定时器 开启定时器: setInterval 间隔型 setTim ...
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口 ...
随机推荐
- ssm分页
pom.xml配置文件中增加相关的插件. <dependency> <groupId>com.github.pagehelper</groupId> <art ...
- HDU 1018Big Number(大数的阶乘的位数,利用公式)
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1018 Big Number Time Limit: 2000/1000 MS (Java/Others) ...
- Entity FreamWork 无法创建“System.Object”类型的常量值。此上下文仅支持基元类型或枚举类型错误解决
Entity FreamWork 无法创建“System.Object”类型的常量值.此上下文仅支持基元类型或枚举类型错误解决: 最近在开发中把我原来抄的架构里面的主键由固定的Guid改成了可以泛型指 ...
- react native基本调试技巧
刚入坑RN,很多小坑都要摸索很久才明白.今天咱们就来填console.log()的坑. 废话不多说,开始讲步骤!! 1.在模拟器中打开 开发者菜单,选择 Debug JS Remotely,会自动在浏 ...
- 【补】英语对IT工作者的重要性
浅谈程序员的英语学习 作为在中国工作的程序员,不懂得英语似乎也不妨碍找到好工作,升职加薪.但程序员这个工种则稍有不同,因为程序,尤其是高级语言,基本上都是由英语和数字表达式构成的.英语对于程序员十 ...
- 使用Screen管理远程会话
在本地开发时,经常需要使用远程连接到Linux服务器,一开始我自己都是有几个远程就开几个SSH窗口,这种方法很原始很直接,但每次都受够了密码输入,即使用了SSH免密码登录,也会觉得每次输入SSH的 ...
- python学习笔记:第14天 内置函数补充和递归
一.匿名函数 匿名函数主要是为了解决一些简单需求而设计的一种函数,匿名函数的语法为: lambda 形参: 返回值 先来看一个例子: # 计算n的n次方 In[2]: lst = lambda n: ...
- 树莓派3B的WiFi中文乱码及搜索不到附近的WiFi_解决方案:
-----------------------------------------------------------学无止境------------------------------------- ...
- “子查询返回的值不止一个。当子查询跟随在 =、!=、<、<=、>、>= 之后,或子查询用作表达式时,这种情况是不允许的。”SQL查询错误解析
为了实现下述代码,首先得有数据库和相应的表格,本文用的是https://blog.csdn.net/qaz13177_58_/article/details/5575711/中的案例,即先用链接中那些 ...
- 利用主成分分析(PCA)简化数据
一.PCA基础 线性映射(或线性变换),简单的来说就是将高维空间数据投影到低维空间上,那么在数据分析上,我们是将数据的主成分(包含信息量大的维度)保留下来,忽略掉对数据描述不重要的成分.即将主成分维度 ...