JS实现电子时钟效果

已于 2022-06-12 21:51:09 修改
阅读量1.4w 收藏 42
点赞数 13
分类专栏： javaScript 文章标签： javascript 电子时钟 Html时钟 js时钟 javascript时钟
于 2016-08-15 20:21:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanmushan/article/details/52214343
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="wrap">
	<div class="clock">
		<ul>
			<li>
				<ul id="time1">
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
				</ul>
			</li>
					<li>
				<ul id="time2">
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
				</ul>
			</li>
			<li class="point"><span></span><span></span></li>
				<li>
				<ul id="time3">
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
				</ul>
			</li>
			<li>
				<ul id="time4">
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
				</ul>
			</li>
			<li class="point"><span></span><span></span></li>
				<li>
				<ul id="time5">
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
				</ul>
			</li>
					<li>
				<ul id="time6">
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
					<li><img src="images/front.png" width="100%" height="100%"></li>
				</ul>
			</li>
		</ul>
	</div>
	<div class="date" id="date">
	<span>2015年12月11日</span>

	<span>星期三</span>
</div>
</body>
</html>

CSS代码

*{margin:0;padding: 0;}
body{background: black;}
li{list-style-type: none;}
.wrap{width:960px;height:330px; margin:100px auto;}
.wrap .clock{height: 220px;}
.wrap .clock ul li{width: 120px;height: 220px;float: left;margin:0 10px;}
.wrap .clock ul li ul{position: relative;}
.wrap .clock ul li ul li{width:90px;height: 20px;display: block;}
.wrap .clock ul li ul li:nth-child(1){position:absolute;left: 15px;}
.wrap .clock ul li ul li:nth-child(2){position:absolute;transform:rotateZ(90deg);top:0px;left:-35px;top:50px;}
.wrap .clock ul li ul li:nth-child(3){position:absolute;transform:rotateZ(90deg);top:0px;left:65px;top:50px;}
.wrap .clock ul li ul li:nth-child(4){position:absolute;top: 100px;left: 15px;}
.wrap .clock ul li ul li:nth-child(5){position:absolute;transform:rotateZ(90deg);top:150px;left:-35px;}
.wrap .clock ul li ul li:nth-child(6){position:absolute;transform:rotateZ(90deg);left:65px;top: 150px;}
.wrap .clock ul li ul li:nth-child(7){position:absolute;top: 200px;left: 15px;}
.wrap .clock ul .point{width: 30px;}
.wrap .clock ul .point span{display:block;height: 20px;width: 20px;background: #a3ff19;margin:60px 15px;}
.wrap .date{position:relative;height: 100px; color: #a3ff19; font-size:80px;margin-top: 10px;border-bottom:3px solid red;}
.wrap .date span:first-child{float: left;margin-left: 10px;}
.wrap .date span:last-child{float: right;margin-right:30px;}

js代码

var a=["0 1 2 4 5 6","2 5","0 2 3 4 6","0 2 3 5 6","1 2 3 5","0 1 3 5 6","0 1 3 4 5 6","0 2 5","0 1 2 3 4 5 6","0 1 2 3 5 6"];
var b=["星期天","星期一","星期二","星期三","星期四","星期五"];
window.onload=function () {
		showTime();
	setInterval(function(){
			showTime();
	},1000);

}
function showTime()
{
	var time=new Date;
	var y=time.getFullYear();
	var M=time.getMonth();
	var d=time.getDate();
	var h=time.getHours();
	var m=time.getMinutes();
	var s=time.getSeconds();
	M=M+1;
	var str=y.toString()+"年"
	if(M<10)
		str=str+"0"+M.toString()+"月";
	else
		str=str+M.toString()+"月";
	if(d<10)
		str=str+"0"+d.toString()+"日";
	else
		str=str+d.toString()+"日";

	document.getElementById("date").getElementsByTagName("span")[0].innerHTML=str;
	document.getElementById("date").getElementsByTagName("span")[1].innerHTML=b[time.getDay()];
	modiflyNum(1,parseInt(h/10));
	modiflyNum(2,h%10);
	modiflyNum(3,parseInt(m/10));
	modiflyNum(4,m%10);
	modiflyNum(5,parseInt(s/10));
	modiflyNum(6,s%10);
}
function modiflyNum(id,value)
{	
	var elm=document.getElementById('time'+id.toString()).getElementsByTagName('li');
	var str=a[value];
	var cc=str.split(' ');
	for(var i=0;i<7;i++)
	{
		elm[i].getElementsByTagName('img')[0].src="images/back.png";
	}
	for(var i=0;i<cc.length;i++)
	{
		elm[parseInt(cc[i])].getElementsByTagName('img')[0].src="images/front.png";
	}
}

开放代码_免费高速下载|百度网盘-分享无限制

​​​​​​​SlashLayer基于VUE3开发的弹出层插件，提高开发效率icon-default.png?t=M4ADhttps://layer.lanmushan.site/#/

DY编程怪兽
关注
  • 13
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
JavaScript实现电子时钟程序(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-29 539
JavaScript实现电子时钟程序(附完整源码)
javascript简单的实现电子时钟
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 283
javascript简单的实现电子时钟
JavaScript 制作实时电子时钟 ，点赞加关注经典案例持续更新~
小十七的个人分享博客
11-16 1721
效果动图，此动图时间仅为当时录制的时间，实际运行时间为实时时间。
JS 简单实现电子时钟
【chase
08-18 4679
通过Date类拿到的时分秒直接拼接起来可能是这样的：8:2:3，而我们想看到的效果应该是：08:02:03，所以这里我们会对时分秒小于10的情况进行判断，然后再拼接字符串。时钟的确是非常简单的一个功能：我们只需要通过js编写一个方法来获取时间的时分秒，再用定时器每隔一秒进行刷新即可。...
HTML实现简易的电子时钟
最新发布
2301_82223847的博客
03-26 182
【代码】HTML实现简易的电子时钟。
如何使用js实现电子时钟功能
蒋伟平的博客
03-28 6399
电子时钟是网上常见的功能，在学习date对象和定时器功能时，来完成一个电子时钟的制作是不错的选择。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。 先准备一个html元素，用来放置时钟。新建一个div元素，它的id命名为clock，如下所示： <div id="clock" class="clock_con"></div><...
JS实现电子时钟
aiyx16521的博客
10-26 1504
JS实现电子时钟 本案例设及的JS知识点 时间函数，定时器，内置构造函数实例化对象的创建，字符串拼接，流程控制以及三元运算符，回调函数。 实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
基于javascript实现动态时钟效果
10-22
主要为大家详细介绍了基于javascript实现动态时钟效果的相关资料，动态显示系统当前时间，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现电子时钟效果-附件资源
03-05
JS实现电子时钟效果-附件资源
《如何使用js实现电子时钟功能》三个效果完整代码
03-28
本文件属于文章《如何使用js实现电子时钟功能》的完整代码，在读完原创文章之后可以下载查看代码。代码中包括基本，图片和滚动动画的三种时钟效果，html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发...
基于JavaScript的电子时钟效果实现.pdf
01-02
基于JavaScript的电子时钟效果实现.pdf
Javascript实战——电子钟（时钟、闹钟、计时器、倒计时）
关北道.
02-04 4234
1.效果图 2.源代码 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>电子钟</title> <link rel="stylesheet" href="index.css"> </head> <body> <div id="bigbox"> <!-- 时钟 -->
纯js实现电子时钟特效
12-11
这是一款使用纯js实现电子时钟特效。该电子时钟可以显示时间，星期几，以及是上午还是下午。它使用简单，非常容易集成到项目中。
用JS做的一款电子时钟
林莫扬
09-21 652
<!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-Comp...
电子时钟（html+css+js)
cmyszhynfs的博客
09-15 510
【代码】电子时钟（html+css+js)
js实现电子时钟
m0_46407169的博客
04-25 2930
js实现电子时钟 代码区域 代码如下（示例）： <!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-Compatible" content="ie=edge.
javascript用js简单的实现电子时钟
qq_43502384的博客
08-06 3689
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <!--给div一个简单样式--> &lt...
JS实现电子时钟，一分钟学会！
qq_35544440的博客
12-24 1435
今天介绍一种电子时钟方式，这是一种获取系统时间的方法，让我们一起来看看吧！ 运行效果： 1.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>j实现电子时钟</title> <link rel="stylesheet" hre...
用js写一个电子时钟
qq_40710210的博客
04-02 1465
用js写一个电子时钟 显示时分秒的电子时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>电子表</title> <style> .box{ width: 200px; ...
js实现电子时钟效果，要求每隔一秒获取当前时间，并提供一个按钮暂停
09-21
以下是实现电子时钟效果的代码： ```html <!DOCTYPE html> 电子时钟 #clock { font-size: 48px; text-align: center; margin-top: 200px; } <h1 id="clock">00:00:00 ()">暂停 var clock = ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值