简单的图片数字时钟js代码

最新推荐文章于 2024-06-05 21:25:17 发布
最新推荐文章于 2024-06-05 21:25:17 发布
阅读量5.4k 收藏 13
点赞数 5
分类专栏： 练手小案例 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style type="text/css">
img{
	width: 25px;
	height: 25px;
}
</style>
<title>时钟</title>
<script type="text/javascript">
function getImg(val) {
	var len=val.length;
	var images="";
	for (var i = 0; i < len; i++) {
		var num=val.substr(i,1);

		switch(num){
			case '0' :
				images += "<img src='images/0.png' />";
			break;

			case '1' :
				images += "<img src='images/1.png' />";
			break;

			case '2':
				images += "<img src='images/2.png' />";
			break;

			case '3' :
				images += "<img src='images/3.png' />";
			break;

			case '4' :
				images += "<img src='images/4.png' />";
			break;

			case '5' :
				images += "<img src='images/5.png' />";
			break;

			case '6' :
				images += "<img src='images/6.png' />";
			break;

			case '7':
				images += "<img src='images/7.png' />";
			break;

			case '8':
				images += "<img src='images/8.png' />";
			break;

			case '9' :
				images += "<img src='images/9.png' />";
			break;


		}
	}
	return images;

}

function times() {
	var dv=document.getElementById('m');
	var date=new Date();
	var year=date.getFullYear()+"";
	var months=date.getMonth()+1;
	months=months<10?'0'+months:months+"";
	var day =date.getDate();
	day=day<10?'0'+day:day+"";
	var hours=date.getHours();
	hours=hours<10?'0'+hours:hours+"";
	var minutes=date.getMinutes();
	minutes=minutes<10?'0'+minutes:minutes+"";
	var seconds=date.getSeconds();
	seconds=seconds<10?'0'+seconds:seconds+"";
	dv.innerHTML = getImg(year)+'年'+ getImg(months)+'月'+getImg(day)+'日' + getImg(hours)+'时'+ getImg(minutes)+'分'+ getImg(seconds)+'秒';

}
var interval=0;
function autoadd(){
	clearInterval(interval);
	interval=setInterval("times()",1000);
}
</script>
</head>
<body onLoad="autoadd()">
<div id="m"></div>
</body>
</html>

lucky芬
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C#制作的表盘时钟
06-14
这是一个使用C#编写的时钟代码，通过类自己构造表盘、指针，运行时读取系统的时间，再使用timer控件来刷新界面，同时也引入语音报时。
JavaScript 做一个简单的数字时钟（增加了年月日）
Zertuler的专栏
11-14 1174
在以前写的这篇文章的代码上增加年月日的显示 https://blog.csdn.net/Zertuler/article/details/107948389 运行效果 只是把日期和时间显示出来，并没有特别去做美化，所以并不美观 下面是代码： <style> * { padding: 0; margin: 0; box-sizing: border-box; }
数电实验中设计数字钟所用到的代码详细版（Verilog语言来实现）
最新发布
m0_74949249的博客
06-05 782
本文主要展示了实现数字钟的几步重要代码，有需要者自取
JavaScript时钟制作
周秦卿的博客
11-01 1588
javascript charAt()方法可返回数组的指定位置的字符并且与直接写Array[0]下标的方式不同的是它兼容IE7. 但是需要注意的是charAt() 方法每次返回的字符长度为一的字符串 并不是返回一个完整的字符串. 语法如下 stringObject.charAt(index)index 是必需有的值。表示字符串中某个位置的数字，即字符在字符串中的下标。字符串中第一个字符的下标
JavaScript之数码时钟
qq_44586361的博客
01-31 640
下面，我就教大家如何利用JavaScript做一个简单的数码时钟。 在做之前我们需要在网上找到从0-9的10张数字图片，保存到一个文件夹里面，并将数字图片对应为相应的数字，作为我们的素材工具。 具体步骤如下所示： 首先在body部分插入6张图片。 &lt;img src="C:\Users\asus\Desktop\img/0.png"/&gt; &lt;img src="C:\Users\asu...
js制作动态图片时钟
jack_2326的博客
09-17 1140
本篇文章主要介绍动态图片时钟的制作，旨在练习函数的运用 css代码如下： *{ padding: 0px; margin: 0px; } #div1{ width: 450px; height: 70px; margin: auto; } .dd{ width: 50px; height: 70px; background-image: url(.
JavaScript 做一个简单的数字时钟（只有时分秒）
Zertuler的专栏
08-12 2275
制作一个很简单的数字时钟（只有时分秒） <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { background: #333; } .clock { width: 450px; hei
JS图片滚动切换数字时钟代码
07-24
本主题聚焦于“JS图片滚动切换数字时钟代码”，它利用JavaScript（JS）语言来实现图片滚动和数字时钟的结合，为网站提供一个生动且实用的实时时钟模块。以下是关于这一技术的详细解释。 1. **JavaScript基础**：...
js图片数字时钟走动代码
04-02
在这个场景中，"js图片数字时钟走动代码"是一个使用JavaScript实现的时钟，它不仅显示当前时间，而且能够动态更新，模拟时钟指针的走动效果。这个时钟可能使用了图片作为数字时钟的界面元素，通过改变这些图片的显示...
图片数字时钟js代码
06-12
在这个特定的案例中，"图片数字时钟js代码"是一个利用JavaScript实现的动态时钟，它能够自动获取本地时间，并以图片的形式展示出来，使得时钟的显示更加美观。 这个项目的核心在于JavaScript的时间处理函数和DOM...
原生js图片数字时钟走动代码.zip
07-11
实现效果： 原生js图片数字时钟走动代码,一般我们的商城或者学校网站会用到，例如学校放假，召开运动会，元旦晚会等，商城中的淘宝双11等。这时，我们的时间就能用上了。
桌面数字时钟
12-10
桌面数字时钟
数字时钟 0-9数字图片收藏 javascript实现的时钟图片
03-11
数字时钟 0-9 数字时钟图片 数字电子图片 0-9数字图片收藏！！！
电脑壁纸罗盘动态时钟.html
09-16
电脑壁纸时钟（带时钟特效、背景特效），需要的朋友可以下载体验一般，不会操作的朋友可以加我QQ：64814219（注：需说明来意，否则不通过）
Js——案例实现图片数字时钟
weixin_44391612的博客
01-25 2328
首先这是我们准备的图片 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; &lt;/style&g
js基础-批量生成标签 100个小方框
姗姗的博客
07-08 1917
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
js实现动态数码时钟
枫叶在飘呀的博客
04-23 1579
数码时钟 在写数码时钟之前，你需要准备0-9数字的图片，你可以自己在网上找，也可以通过ps自己制作喜欢的图片（图片要重命名为“数字”.jpg），下面我给大家简单介绍一下，数码时钟的原理。 1.首先，你需要在html5中定义一个div 用来包裹图片 2. 将图片放在一个images的文件夹中（方便寻找）。 3. 用css对html中的元素进行一个简单的布局。 4.构思一下时钟原理的实现。 html ...
js 可以记录的秒表，图片秒表的制作
weixin_56211720的博客
11-02 2333
今天做了一个可以记录的秒表，大家可以一起来看看。 我的这个有一部分的用带有0到9的图片替换了数字0到9，有兴趣的小伙伴可以到网上找相关的图片，0到9命名方法是 0到9.jpg 。 6.html <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> </head> ...
Qt自定义控件8：根据背景图片画时钟
parkchorong的博客
10-13 328
Qt自定义控件8：根据背景图片画时钟 先看效果图： 基础背景图： 思路：将背景图片绘制上，在背景图片上画刻度线，刻度值，和三个指针。定义定时器，刷新时间 关键代码：CMProgressBar3.cpp void CMProgressBar3::paintEvent(QPaintEvent *event){ int width = this->width(); int he...
eda数字时钟设计代码
12-09
EDA数字时钟设计代码是通过EDA软件（Electronic Design Automation）进行数字时钟的硬件设计和编程的过程。通常，数字时钟的设计包括时钟电路、数字显示屏、控制模块和程序代码等多个方面。 在进行数字时钟设计代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值