<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta name="index" content="时钟"/>

<title>时钟</title>

<style type="text/css">

body,div,img{padding:0; margin:0;}

#box{

	width:530px;

	height:93px;

	margin:200px auto;

}

img{

	width:60px;

	height:93px;

	border:none;

}

</style>

<script type="text/javascript" src="index.js"></script>

</head>

<body>

	<div id="box">

		<img src="./images/0.png"/>

		<img src="./images/0.png"/>

		   

		<img src="./images/0.png"/>

		<img src="./images/0.png"/>

		   

		<img src="./images/0.png"/>

		<img src="./images/0.png"/>

	</div>

	<script type="text/javascript">

			function toDou(n){

			if(n<10){

				return '0'+n;

			}

			else{

				return ''+n;

			}

		}

		window.onload=function(){

			var aImg=document.getElementsByTagName('img');

			function tick(){

				var oDate=new Date();

				var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());

				for(var i=0; i<aImg.length; i++){

					aImg[i].src='./images/'+str.charAt(i)+'.png';

				}

			}

			setInterval(tick, 1000);

			tick();

		};

	</script>

</body>

</html>

　　2.同一页面多个时钟（非图片，见360云盘）

js--时钟（图片）的更多相关文章

  1. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  3. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  4. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  5. 使用 FocusPoint.js 实现图片的响应式裁剪

    通常网站的布局都不是单一的.例如图像在电脑.平板和智能手机上可能显示的形状是不同的.特别是如果你使用的是全屏图像,在你必须使用相同的图像文件的情况下,你的主题可能会被截断或完全缺失,或者看起来很尴尬. ...

  6. Lazyr.js – 延迟加载图片（Lazy Loading）

    Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示    ...

  7. Webview加载本地js、图片的方法

    在项目开发中经常会将比较大的js.图片.css等放到app中,而html放服务器,这样在使用时流量较少,加载也比都放服务器上快,其实方法也比较多,网上搜了很久都没结果. 一种是获取服务器返回的html ...

  8. WebApp：如何让安卓的webview缓存webapp的html、js和图片等资源

    一.开发环境     客户端:安卓+webview(vuejs)     服务器端:tomcat 8.0 二.问题     使用安卓原生+web(基于webpack+vuejs)的方式开发了一个安卓应 ...

  9. lazyload.js实现图片异步载入

    所谓图片异步加载,意思是不用一次把图片全部加载完,你可以叫它延迟加载,缓冲加载都行. 看看你有没有这种需求:某篇文章图片很多,如果在载入文章时就载入所有图片,无疑会延缓载入速度,让用户等更久,所以,我 ...

  10. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

随机推荐

  1. iOS开发-OC语言 (七)继承、多态、类别

    继承.多态.类别 学习目标 1.继承的含义 2.父类子类的别称 3.字段和消息的继承 4.重写和重写消息的调用 5.多态 6.类别(Category) ======================== ...

  2. Vmware(vmdk)虚拟机到hyperv(vhd)虚拟机转换

    1.关闭Vmware所有虚拟机 2.合并Vmware磁盘 通常磁盘都分开储存 targetDisk.vmdk 3.转换vmdk到vhd 安装winimage http://www.winimage.c ...

  3. 第一百二十六节，JavaScript，XPath操作xml节点

    第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

  4. 前端——HTML笔记Two

    web前端需要掌握:HTML.CSS.JavaScript语言.这三门技术用来实现: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2 ...

  5. 第10章 使用MySQL数据库

    1.在数据库中插入数据:INSERT语句: 如://插入一整行: insert into customers values (NULL,'-','-','-'), - ; //插入一行中指定的列内容: ...

  6. Win32窗口

    #include <Windows.h> #include <CommCtrl.h> #pragma comment(lib, "comctl32.lib" ...

  7. 开源的许可证GPL、LGPL、BSD、Apache 2.0的通俗解释

    软件开发者要开源软件,不单单是开放源代码就可以了,选择一种许可证很重要,一个许可证之于软件就相当于价值观之于普通人,代表了这个软件的基本品性.一个错误的许可证选择可能会直接导致整个项目的失败. 各种开 ...

  8. ConfigurationManager 缓存刷新

    服务没有停止的情况下,如果修改了配置,如果不刷新,是不会生效的,需要在每次重新读取配置前刷新配置文件,具体如下: ConfigurationManager.RefreshSection("a ...

  9. angular2+webpack的搭建过程遇到的问题记录

    最近在由于公司的项目要重构,Superiors要求将原先的Ionic1+angular1+gulp用全新的Ionic2+angular2+webpack重构.苦逼的Google了好久,环境搭建还是不太 ...

  10. 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

    在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...