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):默认的滚动条太丑,忍不住优化下 ::- ...
随机推荐
- Swift学习笔记十六：协议
Protocol(协议)用于统一方法和属性的名称,而不实现不论什么功能. 协议可以被类.枚举.结构体实现.满足协议要求的类,枚举,结构体被称为协议的遵循者. 遵循者须要提供协议指定的成员,如属性,方法 ...
- windows 7 SDK和DDK下载地址
查个小资料,得到地址,顺便记录一下. Windows Driver Kit Version 7.1.0 http://www.microsoft.com/downloads/details.aspx? ...
- 怎么给iOS项目打包
1 首先要选中项目中的真机測试,不要模拟器 ,然后从上边的菜单条中找product watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29tZXJhaW43 ...
- android中广播接收SD卡状态
mReceiver = new BroadcastReceiver() { //add by mengmeng.chen begin public void onReceive(Context con ...
- Dubbo亮点总结
Dubbo是阿里巴巴的一个开源RPC项目,可在http://dubbo.io进行訪问 类似的产品有Hessian.spring httpinvoke 等. Dubbo的亮点总结例如以下: 1.服务注冊 ...
- C++沉思录之一
一.系统跟踪类Trace的设计过程: step1:简单版 class Trace { public: Trace() { noisy = ; } void print(char* s) { if(no ...
- rpm-bin
bin:二进制可执行程序,与windows的exe文件一样,在linux图形界面可直接双击运行,或在终端界面使用该命令执行 ./filename 有的软件是二进制安装程序和源代码一起发布,二进制程序文 ...
- 活动指示器UIActivityIndicatorView
活动指示器UIActivityIndicatorView可以告知用户有一个操作正在进行中 1.创建 UIActivityIndicatorView *activityIndicatorView ...
- Asp.Net--上传大文件(页面超时)
几个方法: 修改文件上传大小的限制 以文件形式保存到服务器 转换成二进制字节流保存到数据库 将二进制通过循环的方式写入磁盘 一.修改文件上传大小的限制 通过对web.config和machine.co ...
- 【转】【C/C++】内存分配函数：malloc，calloc，realloc,_alloca
转自:http://www.cnblogs.com/particle/archive/2012/09/01/2667034.html#commentform malloc: 原型:extern voi ...