js数字时钟
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<script>
function set(obj){
if(obj<10){
return '0'+obj; }
else
return ''+obj;
}
window.onload=function(){ var aImg=document.getElementsByTagName('img');
function tick(){
var oDate=new Date();
var str=set(oDate.getHours())+set(oDate.getMinutes())+set(oDate.getSeconds()); for(var i=0;i<str.length;i++){
aImg[i].src='img/'+str[i]+'.png';
}
}
tick();
setInterval(tick
,1000); //alert(str);
};
</script>
</head>
<body style="background:red; color:red; font-size:50px">
<img src='img\0.png' / >
<img src='img\0.png' />
:
<img src='img\0.png' />
<img src='img\0.png' />
:
<img src='img\0.png' />
<img src='mg\0.png' />
</body>
</html>
定时器小应用+date对象。。。
关键在于字符串的处理。。。。
将date对象中获取的数字不会按字符串加在一起，自定义set函数将返回值全变为字符串并在个位数前补0.。。。。。
再处理每个img标签。。。配以炫酷的png/jpg图像，效果好的很。。。。
js数字时钟的更多相关文章
- html5 canvas js(数字时钟)
<!doctype html> <html> <head> <title>canvas dClock</title> </head ...
- js动态数字时钟
js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...
- js实现动态数字时钟
1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- js数字滑动时钟
js数字滑动时钟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- JS — 实现简单的数字时钟
js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- JS制作一个创意数字时钟
通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...
- JS框架_(Vue.js)带有星期日期的数字时钟
百度云盘 传送门 密码:tv1v 数字时钟效果: <!doctype html> <html> <head> <meta charset="utf- ...
- 简单酷炫的Canvas数字时钟
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 我记得很早之前就看过这个DEMO,是岑安大大博客里看到的: 就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看 ...
- 使用jQuery和CSS3实现一个数字时钟
点击进入更详细教程及源码下载 在线演示 我们经常会在网站中看见一个时钟的效果.今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程. http://www.html5cn.org/ ...
随机推荐
- php 导出对象生成代码并执行var_export和eval
var_export($obj,true) 导出一个合法的php代码,返回一个字符串 eval($str) 执行一个字符串代码 __set_state 当用var_export导出一个类时,自动调用, ...
- Oracle存储过程动态创建临时表/存储过程执行权限问题--AUTHID CURRENT_USER
关于Oracle存储过程执行权限问题的解决 http://blog.sina.com.cn/s/blog_6ceed3280101hvlo.html (2014-04-02 04:06:28) 转载▼ ...
- 使用JavaScript的history对象来实现页面前进后退(go/back/forward)。
我们都知道JavaScript有history对象,主要是用来记录浏览器窗口的浏览记录.但是,JS脚本是不允许访问到这个记录里面的内容(隐私). 常见的用法是: history.back();//返回 ...
- Asp.net Web API 返回Json对象的两种方式
这两种方式都是以HttpResponseMessage的形式返回, 方式一:以字符串的形式 var content = new StringContent("{\"FileName ...
- Linq 备忘录
public class CTest { public int i { get; set; } public string j { get; set; } } 一.Range var items=En ...
- shopex 小知识
产品链接: http://www.--/product-172.html 中间的数字代表 sdb_goods 表中 的 goods_id ... 表示数据库里的产品 id. 分类链接: http: ...
- C# DataGridView使用记录分享
最近使用DataGridView,把其中遇到的问题和一些知识记录下来,以便以后用到的时候可以快速的想起. 1.添加行号 有时我们在使用DataGridView时会被要求添加在每一行数据前面添加上行号, ...
- apt-get install *** 出现 软件包***没有提供可供安装的候选者
今天,重新安装Ubuntu13.04后,在命令行输入 sudo apt-get install aptitude 提示: 软件包 aptitude 没有提供可供安装的候选者 sudo apt-get ...
- Struts2版本升级到struts2 2.3.15.1操作说明
Struts2的官网公布了一个远程命令执行漏洞,官方强烈建议升级到2.3.15.1或者以上版本,该版本包含校正过的struts2核心库. 我们之前开发项目主要采用的Struts2版本是2.2.1,本文 ...
- 图片压缩工具optipng/jpegoptim安装
[1]还未实践 #yum install optipng -y [2]已成功 #yum install -y libjpeg libjpeg-devel #wget http://freecode.c ...