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):默认的滚动条太丑,忍不住优化下 ::- ...
随机推荐
- Linux下基于源代码方式安装MySQL 5.6
MySQL为开源数据库,因此能够基于源代码实现安装.基于源代码安装有很多其它的灵活性. 也就是说我们能够针对自己的硬件平台选用合适的编译器来优化编译后的二进制代码.依据不同的软件平台环境调整相关的编译 ...
- SQL Profile 总结（一）
一.前提概述 在介绍SQL Profile之前,不得不说的一个工具就是SQL Tuning Advisor:这个工具是从Oracle 10g開始引入,它的任务就是分析一个指定的SQL语句,并建议怎样使 ...
- Dynamics CRM记录页面上隐藏子网格“+”标识
前段时间微软发布了Dynamics 365,这是Dynamics产品的又一次大的变动,期待新的版本能够更好的满足客户的需求,同时提供更多的可定制化的内容. 近期做Dynamics CRM项目遇到很多审 ...
- Python进阶之路---1.5python数据类型-字符串
字符串 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; ...
- jQuery animate easing使用方法
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- ref和out与SQL中的output
什么时候会需要使用ref和out 有时,我们会需要获取某个值在方法中的运行状态,根据定义的方法,我们仅仅能够获得一个返回值,但是,有时我们也许想获取多个值,通过返回值就不能返回这样的信息,我们可以通过 ...
- Hashtable键值集合
//Hashtable键值集合 键必须是维一的 类似于索引 Hashtable ht = new Hashtable(); ht.Add(, "中国"); ht.Add(, ); ...
- KindleRSS推送服务器搭建
参考http://xcode.so/2010/12/google-gae-rss-to-kindle/这篇文章 1.首先尝试在本机搭建服务器直接推送到kindle 需要使用到kindlereader这 ...
- python编程中在ubuntu中安装虚拟环境及环境配置
1.升级python包管理工具pip pip install --upgrade pip 备注:当你想升级一个包的时候 `pip install --upgrade 包名` 2.python虚拟环境安 ...
- python之6-2高阶函数
1. map函数 map(函数A,字符串或者列表) map函数的意思是将函数A依次作用到字符串的每个字符或者列表的每个元素. 例如: map(lambda x: x*x,[1,2]) [1, 4] 这 ...