Javascript:一个优雅的时钟
实现效果：
准备工作：
1# 定时器 相关知识了解
3# 准备效果所用图片
实现原理：
1# 获取当前时间；
var time=new Date();
var iHours=time.getHours();
var iMinutes=time.getMinutes();
var iSeconds=time.getSeconds();
var iNow=double(iHours)+':'+double(iMinutes)+':'+double(iSeconds);
2# 设定定时器,1s执行一次；
setInterval(function(){
code//代码部分
},1000);
3# 通过实时的时间数据，动态改变对应的img属性值
3.1 方法一： 固定位置图片显示相应时间数据
arrImg[0].src='img/'+parseInt(iHours/10)+'.jpg';
arrImg[1].src='img/'+iHours%10+'.jpg';
3.2 方法二：通过charAt()获取日期字符串指定位置字符，然后改变相应图片的img属性值
arrImg[i].src='img/' +iNow.charAt(i)+'.jpg';
代码部分：
方法一 : 固定位置图片显示相应时间数据
<!DOCTYPE html>
<html>
<head>
<title>时间计时器</title>
<meta charset='utf-8'/>
<style type="text/css">
body{font-size: 80px;}
img{float: left;width: 60px;margin:0 3px;}
.middle{
width: 600px;
height: 100px;
position: absolute;
top:0;right: 0;bottom: 0;left: 0;
margin: auto;
}
</style>
</head>
<body> <div id="time"></div> <div class="middle">
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/colon.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/colon.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
</div> <script type="text/javascript">
var oTime=document.getElementById('time');
var arrImg=document.getElementsByTagName('img'); setInterval(function(){ timer(); },1000); timer();//消除刷新网页时,时钟函数延迟带来的误差 //时钟两位数显示 function double(n){
if(n<10){
return '0'+n;
}else{
return ''+n;
}
} function timer(){ var time=new Date();
var iHours=time.getHours();
var iMinutes=time.getMinutes();
var iSeconds=time.getSeconds();
var iNow=double(iHours)+':'+double(iMinutes)+':'+double(iSeconds); arrImg[0].src='img/'+parseInt(iHours/10)+'.jpg';
arrImg[1].src='img/'+iHours%10+'.jpg';
arrImg[3].src='img/'+parseInt(iMinutes/10)+'.jpg';
arrImg[4].src='img/'+iMinutes%10+'.jpg';
arrImg[6].src='img/'+parseInt(iSeconds/10)+'.jpg';
arrImg[7].src='img/'+iSeconds%10+'.jpg'; return iNow;
}
</script>
</body>
</html>
方法二 :通过charAt()获取日期字符串指定位置字符，然后改变相应图片的img属性值
<!DOCTYPE html>
<html>
<head>
<title>时间计时器</title>
<meta charset='utf-8'/>
<style type="text/css">
body{font-size: 80px;}
img{float: left;width: 60px;margin:0 3px;}
.middle{
width: 600px;
height: 100px;
position: absolute;
top:0;right: 0;bottom: 0;left: 0;
margin: auto;
}
</style>
</head>
<body> <div id="time"></div> <div class="middle">
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
<img src="img/0.jpg"/>
</div> <!--<img src="img/colon.jpg"/>--> <script type="text/javascript"> //alert(timer());
var oTime=document.getElementById('time');
var arrImg=document.getElementsByTagName('img');
setInterval(function(){
timer();
},1000); timer();//消除刷新网页时,时钟函数延迟带来的误差 //时钟两位数显示 function double(n){
if(n<10){
return '0'+n;
}else{
return ''+n;
}
} function timer(){ var time=new Date(); var iYear=time.getFullYear();
var iMonth=time.getMonth()+1;
var iDay=time.getDay();
var iHours=time.getHours();
var iMinutes=time.getMinutes();
var iSeconds=time.getSeconds(); var iNow=double(iHours)+':'+double(iMinutes)+':'+double(iSeconds); arrImg[0].src='img/'+parseInt(iHours/10)+'.jpg';
arrImg[1].src='img/'+iHours%10+'.jpg';
arrImg[3].src='img/'+parseInt(iMinutes/10)+'.jpg';
arrImg[4].src='img/'+iMinutes%10+'.jpg';
arrImg[6].src='img/'+parseInt(iSeconds/10)+'.jpg';
arrImg[7].src='img/'+iSeconds%10+'.jpg'; for(var i=0;i<arrImg.length;i++){
if(i==2 || i==5){
arrImg[i].src='img/colon.jpg'; }else{
arrImg[i].src='img/' +iNow.charAt(i)+'.jpg'; }
} return iNow;
} </script> </body>
</html>
Javascript:一个优雅的时钟的更多相关文章
- webview之如何设计一个优雅健壮的Android WebView？（下）(转)
转载:https://iluhcm.com/2018/02/27/design-an-elegant-and-powerful-android-webview-part-two/ (这篇文章写得有点晚 ...
- webview之如何设计一个优雅健壮的Android WebView？（上）(转)
转接:https://iluhcm.com/2017/12/10/design-an-elegant-and-powerful-android-webview-part-one/ 前言 Android ...
- 如何设计一个优雅健壮的Android WebView？（下）
转:如何设计一个优雅健壮的Android WebView?(下) 前言 在上文<如何设计一个优雅健壮的Android WebView?(上)>中,笔者分析了国内WebView的现状,以及在 ...
- 如何设计一个优雅健壮的Android WebView？（上）
转:如何设计一个优雅健壮的Android WebView?(上) 前言 Android应用层的开发有几大模块,其中WebView是最重要的模块之一.网上能够搜索到的WebView资料可谓寥寥,Gith ...
- 在PostgreSQL自定义一个“优雅”的type
是的,又是我,不要脸的又来混经验了.我们知道PostgreSQL是一个高度可扩展的数据库,这次我聊聊如何在PostgreSQL里创建一个优雅的type,如何理解优雅?大概就是不仅仅是type本身,其它 ...
- JS制作一个创意数字时钟
通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...
- BOM 请给javascript一个说法-------Day33
楼市低迷,业主是不是该要个说法.黄金暴跌,谁来给大妈们一个说法.中国足球,敢不敢给大家一个说法. 给个说法,谁给,给谁,这该是哲学的范畴了吧. 可是,在这里.BOM是真真切切的给javascript一 ...
- 用 Python 制作一个艺术签名小工具，给自己设计一个优雅的签名
生活中有很多场景都需要我们签字(签名),如果是一些不重要的场景,我们的签名好坏基本无所谓了,但如果是一些比较重要的场景,如果我们的签名比较差的话,就有可能给别人留下不太好的印象了,俗话说字如其人嘛,本 ...
- 【css3+JavaScript】:一个优雅的对话框
实现效果: 演示地址:http://codepen.io/anon/pen/BNjYrR ======2015/5/11====== 优化滚动条(scroll):默认的滚动条太丑,忍不住优化下 ::- ...
随机推荐
- [ES6] Class Inherit
In constructor, you can call parent's constuctor() method by supert(); class ShoppingCart { construc ...
- PHP页面之间跳转方法总结
编程中,在页面之间进行跳转是必须的.这里列出了三种办法,供参考. 一.用HTTP头信息 也就是用PHP的HEADER函数.PHP里的HEADER函数的作用就是向浏览器发出由HTTP协议规定的本来应该通 ...
- HashMap的分析(转)
一.HashMap概述 HashMap基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了不同步和允许使用 null 之外,HashMap ...
- XML的DOM、SAX、DEMO4J及DEMO4J整合Path的代码例子
1.DMO解析 package cn.itcast.xml.dom; import java.io.File; import javax.xml.parsers.DocumentBuilder; im ...
- 小技巧之jQueryMobile
使用JqueryMobile+MVC做一个手机网站,也有2个月了.有一些小小的经验,跟大伙们分享一下下 小技巧1: 禁用所有Ajax加载,它会很烦人的. $.mobile.ajaxLinksEnabl ...
- Catel帮助手册-Catel.Core:(1)参数检查
我们检查方法是否正确,一般是返回对错,或者是是否抛出一个异常,大部分人不检查异常的正确性,那么这种错误在很深的堆栈中,很难查看. Catel与一般的检查方法不同,一般是使用 public vo ...
- Linux 定时执行shell脚本_crontab
1.查看任务[oracle@XXXXX OracleBackA]$ crontab -l 2.新增任务[oracle@XXXXX OracleBackA]$ crontab -e 3.每天14点40执 ...
- 使用证书部署出现System.Security.Cryptography.CryptographicException 错误解决方案
一.System.Security.Cryptography.CryptographicException: 找不到对象 at System.Security.Cryptography.Cryptog ...
- web离线应用
其实浏览器一直都是前端开发人员比较头痛的一个课题,各种兼容性.直到开始规范化和标准化,HTML5的出现. 在没有这套标准出现之前,对于客户端缓存的问题,我们基本上都是用cookie处理,当然目前除了后 ...
- mongodb一个关键字对多个字段同时查询，mongodb $or $and查询
$query = '{ "$and": [ {"$or": [{"reported": {"$ex ...