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/ ...
随机推荐
- .NET截取指定长度汉字超出部分以"..."代替
/// <summary> /// 将指定字符串按指定长度进行剪切, /// </summary> /// <param name= "oldStr " ...
- IIS7 404 模块 IIS Web Core 通知 MapRequestHandler 处理程序 StaticFile 错误代码 0x80070002
<system.webServer> <!--添加--> <modules runAllManagedModulesForAllRequests="true&q ...
- 黑马程序员——C语言基础 变量类型 结构体
Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)变量类型 1)局部变量 1> 定义:在函数内部定义的变量,称为 ...
- 10款html5开发工具，实用+好用
利用HTML5工具不仅可以帮助设计师和开发者创建更具吸引力的网站,还能增加网站的可用性和可访问性.本文收集了10款HTML5开发工具让你在网页中搭建特效.动画.视频.音频等诸多功能,为你节省更多开发时 ...
- father of the archangel of death"?
e wields an axe, a sword and a machine gun and his battlefield pranks have become as legendary as hi ...
- python3下载远程代码并执行
第一步: 先在gist之类的网站上贴上代码,目的不是高亮,而可以raw的形式获取代码,这样可以省掉处理html的时间,我这里用的是pasteraw: 远程上的代码:http://cdn.pastera ...
- url中
url中汉字被转换为UTF-8,通过此网址可以解析UTF-8编码.在地址栏中输入文字或者其它的,则可能输入法或者是相关的程序进行解析. http://www.mytju.com/classcode/t ...
- HW职责 (Hardware Engineer)
硬件设计就是根据产品经理的需求PRS(Product Requirement Specification),在COGS(Cost of Goods Sale)的要求下,利用目前业界成熟的芯片方案或者技 ...
- IOS百度地图获取所在的城市名称
笔者的app要实现定位所在省和城市名称,借此总结巩固一下! @interface VenueListVC : BasePageTableViewVC<BMKLocationServiceDele ...
- Bzoj索引
1001 : http://ideone.com/4omPYJ1002 : http://ideone.com/BZr9KF1003 : http://ideone.com/48NJNh1004 : ...