CSS+HTML+JavaScript一个简单的数字时钟

最新推荐文章于 2024-06-11 13:59:49 发布

系哇卡几呆٩( ＇ω＇ )و

最新推荐文章于 2024-06-11 13:59:49 发布

阅读量1.2k

点赞数 2

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_53577699/article/details/126368088

版权

制作一个和系统时间同步的数字时钟，

主要运用了定时器以及日期对象；

二话不说先放代码：

HTML:

<div id="box">
	<ul>
		<li><img src="img/0.jpg" class="time"></li>
	</ul>
	<ul>
		<li><img src="img/0.jpg" class="time"></li>
	</ul>
	<ul>
		<li><img src="img/c.jpg" ></li>
	</ul>
	<ul>
		<li><img src="img/0.jpg" class="time"></li>
	</ul>
	<ul>
		<li><img src="img/0.jpg" class="time"></li>
	</ul>
	<ul>
		<li><img src="img/c.jpg" ></li>
	</ul>
	<ul>
		<li><img src="img/0.jpg" class="time"></li>
	</ul>
	<ul>
		<li><img src="img/0.jpg" class="time"></li>
	</ul>
</div>

CSS:

*{
    margin: 0;
    padding: 0;
}
#box{
	margin: 200px auto;
	width: 400px;
	height: 70px;
	position: relative;
}
ul{
	float: left;
}
li{
	list-style: none;
}

JavaScript:

var oul = document.getElementsByTagName('ul');
			var otime = document.getElementsByClassName('time');
			var oimg = document.getElementsByTagName('img');
			var timer=null;
			var num=0;
			
			timer = setInterval(function() {
				var mydate=new Date();
				oimg[0].src="img/"+parseInt(mydate.getHours()/10)+".jpg";
				oimg[1].src="img/"+parseInt(mydate.getHours()%10)+".jpg";
				oimg[3].src="img/"+parseInt(mydate.getMinutes()/10)+".jpg";
				oimg[4].src="img/"+parseInt(mydate.getMinutes()%10)+".jpg";
				oimg[6].src="img/"+parseInt(mydate.getSeconds()/10)+".jpg";
				oimg[7].src="img/"+parseInt(mydate.getSeconds()%10)+".jpg";
				num++;
				if(num%2==0){
					oimg[2].src="img/c.jpg";
					oimg[5].src="img/c.jpg";
				}else{
					oimg[2].src="img/b.jpg";
					oimg[5].src="img/b.jpg";
				}
				oimg[6].src="img/"+parseInt(mydate.getSeconds()/10)+".jpg";
				oimg[7].src="img/"+parseInt(mydate.getSeconds()%10)+".jpg";
				
			},1000)

这里我们先分两步实现该项目，html和css部分不做过多说明，就是基础的布局，大概效果就是这样：

这里js部分的大概思路就是在定时器中一秒更换一次当前“box”中的各图片，这里我每个数字图片的名称就是对应的数字，所以只要在img的src中更改名字改成对应的数字就可以。

根据mydate.getHours()函数可以得出系统的小时时间然后mydate.getMinutes()和mydate.getSeconds()对应分钟和秒数，通过取整和取余将具体的小时十位数和个位数已经分钟和秒数的十位和个位具体提出来，再更具提出的值直接赋予src中的图片名称就可以实现图片和系统时间的对应绑定：

然后两个冒号的闪烁通过新建一个num值，定时器每走一次就对他自身自增，然后再通过if判断该num的奇偶来进行两个图片的切换：

到这里这个时钟其实大部分已经做好了，只是变换的时候是闪变，我们还可以对它进行改进，来达到一种轮播滚变的效果；

html，css和js部分都要进行一定改动：

HTML：

<div id="box">
			<ul>
				<li><img src="img/0.jpg"></li>
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
			</ul>
			<ul>
				<li><img src="img/0.jpg"></li>
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
				<li><img src="img/5.jpg"></li>
				<li><img src="img/6.jpg"></li>
				<li><img src="img/7.jpg"></li>
				<li><img src="img/8.jpg"></li>
				<li><img src="img/9.jpg"></li>
			</ul>
			<ul>
				<li><img src="img/c.jpg"></li>
			</ul>
			<ul>
				<li><img src="img/0.jpg"></li>
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
				<li><img src="img/5.jpg"></li>
			</ul>
			<ul>
				<li><img src="img/0.jpg"></li>
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
				<li><img src="img/5.jpg"></li>
				<li><img src="img/6.jpg"></li>
				<li><img src="img/7.jpg"></li>
				<li><img src="img/8.jpg"></li>
				<li><img src="img/9.jpg"></li>
			</ul>
			<ul>
				<li><img src="img/c.jpg"></li>
			</ul>
			<ul>
				<li><img src="img/0.jpg"></li>
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
				<li><img src="img/5.jpg"></li>
			</ul>
			<ul>
				<li><img src="img/0.jpg"></li>
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
				<li><img src="img/5.jpg"></li>
				<li><img src="img/6.jpg"></li>
				<li><img src="img/7.jpg"></li>
				<li><img src="img/8.jpg"></li>
				<li><img src="img/9.jpg"></li>
			</ul>
		</div>

需要将每个放数字的ul中都进行所有数字的添加（注：小时的十位数只有0，1，2.分钟的十位数是0-5.而秒数的十位数也是0-5）；可以避免多余的图片的放置。

CSS：

* {
				margin: 0;
				padding: 0;
			}

			#box {
				margin: 200px auto;
				width: 400px;
				height: 70px;
				position: relative;
				overflow: hidden;
			}
			
			ul{
				position: absolute;
				height: 70px;
				top: 0;
				transition: 1s;
			}
			ul:first-child {
				left: 0;
			}

			ul:nth-child(2) {
				left: 50px;
			}

			ul:nth-child(3) {
				left: 100px;
			}

			ul:nth-child(4) {
				left: 150px;
			}

			ul:nth-child(5) {
				left: 200px;
			}

			ul:nth-child(6) {
				left: 250px;
			}

			ul:nth-child(7) {
				left: 300px;
			}

			ul:last-child {
				left: 350px;
			}

			li {
				list-style: none;
				height: 70px;
			}

css主要根据定位将每个图片对应位置摆放好，然后设置好宽高，保证每个数字的位置其他数字是在一列上方便后面的竖直滚动，后面只需要将该位置的ul的定位top值与上面我们用到的时间具体值绑定就可以进行滚动。

JavaScript：

var oul = document.getElementsByTagName('ul');
			var otime = document.getElementsByClassName('time');
			var oimg = document.getElementsByTagName('img');
			var timer = null;
			var num = 0;

			timer = setInterval(function() {
				var mydate = new Date();
				oul[0].style.top = -(parseInt(mydate.getHours() / 10) * 70) + 'px';
				oul[1].style.top = -(parseInt(mydate.getHours() % 10) * 70) + 'px';
				oul[3].style.top = -(parseInt(mydate.getMinutes() / 10) * 70) + 'px';
				oul[4].style.top = -(parseInt(mydate.getMinutes() % 10) * 70) + 'px';
				num++;
				if (num % 2 == 0) {
					oul[2].innerHTML = "<li><img src='img/b.jpg'></li>"
					oul[5].innerHTML = "<li><img src='img/b.jpg'></li>"
				} else {
					oul[2].innerHTML = "<li><img src='img/c.jpg'></li>"
					oul[5].innerHTML = "<li><img src='img/c.jpg'></li>"
				}
				oul[6].style.top = -(parseInt(mydate.getSeconds() / 10) * 70) + 'px';
				oul[7].style.top = -(parseInt(mydate.getSeconds() % 10) * 70) + 'px';
			}, 1000)

js部分改动就是将原来对应数字乘以一张图片的高度这里是70px，再给对应图片所在的ul进行定位中top值的更改，这里冒号的闪烁还是和上面的方法类似，只是应用对象不同需要略作调整，最后在CSS中的ul处加上transition: 1s;让变化有个过程动画，那么可以滚动的时钟就做好了：