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):默认的滚动条太丑,忍不住优化下 ::- ...
随机推荐
- 收集的URL
*******************************************看文章的好地方************************************** http://www. ...
- [serverlet][转载: 深入理解HTTP Session]
[serverlet][转载: 深入理解HTTP Session] 标签(空格分隔): 未分类 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任. ...
- DataGrid( 数据表格) 组件[1]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...
- div+css不间断滚动字幕
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Ubuntu中安装编译并测试HTK语音识别库
1.在网上看到首先必须确保电脑上安装了g++和libx11 g++ --version //检测g++版本 sudo apt-get install libx11-dev:i386 2.然后可从HTK ...
- SQL server 2008无法修改表
长久未使用SQL server,一直都是使用Navicat来处理各种数据库,感觉使用很方便,但由于实际需要,必须要用SQL server创建新的数据库,却意外的遇到了以前从未遇到过的问题. 在建好表以 ...
- smarty练习：数据的增删改
根据数据库中的三张表格:timu,xuanxiang,kemu来进行数据的增删改查,并且使用smarty模版将前端与后台分离开来 三张表格: 主页面后台 main.php: <?php //引入 ...
- 推荐Mac软件Alfred
实在忍不住推荐这个软件了, 身边的朋友们逐渐都在使用Mac OS了,每次我都会推荐Alfred这个软件.推荐来推荐去挺蛮烦的,干脆写篇文章, 下次有朋友新入手Macbook,我就直接附送本文章链接一枚 ...
- Python新手学习基础之条件语句——if/else语句
if/else语句 条件语句实际在前面的文章里我们已经使用过几次了,在这里我们需要再次隆重的来介绍一下它,条件语句是通过对一条或多条语句判断的返回结果(True或False)来选择执行下一步命令的,比 ...
- c++ 连接数据库
#include <icrsint.h> #include<iostream> #include<iomanip> #include <string> ...