HTML5、CSS3 制作模拟时钟

最新推荐文章于 2023-07-19 11:21:28 发布

羊角枇杷

最新推荐文章于 2023-07-19 11:21:28 发布

阅读量2k

点赞数 2

分类专栏： HTML与CSS 文章标签：时钟 HTML时钟 jQuery时钟 css时钟 js时钟

本文链接：https://blog.csdn.net/CSDNZPan/article/details/89383132

版权

HTML与CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用 HTML5 、CSS3 、jQuery制作模拟钟表

先上效果图

鼠标划过表盘时会显示年月日，星期几
模拟钟表

实现原理

定位：transform-origin:x y;。先找准刻度或者指针的定位中心点。我这里一开始时针、分针、秒针都是指向 12 点的，就对应 0 时 0 分 0 秒。可以看到三根指针的尾部有一截突出，就是用定位做的。
移动：transform:translate();。再移动到合适的位置。表盘刻度都是先让其移动到 3 点的位置，然后在旋转分布每一个刻度，刻度分布是用js做的，因为刻度比较多并且是有规律的，可以使用程序完成。
旋转：transform:rotateZ()。旋转对应的角度，注意是rotateZ()

上源码

<!DOCTYPE html>
<html lang="zh">
<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">
	<title>virtual-clock</title>
	<style type="text/css">
		body{
			margin: 0;
			background-color: #EEEEEE;
		}
		.container{
			width: 508px;
			height: 508px;
			margin: 50px auto;
			text-align: center;
			line-height: 500px;
			/* border: 1px solid purple; */
		}
		.dial{
			width: 500px;
			height: 500px;
			display: inline-block;
			text-align: center;
			line-height: 500px;
			border-radius: 50%;
			background-color: aliceblue;
			border: 4px solid #424242;
			box-shadow: 0 0 10px #424242;
			position: relative;
		}
		.center, .center-small{
			display: inline-block;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
		}
		.center{
			width: 20px;
			height: 20px;
			background-color: #4B0082;
			margin: -10px 0 0 -10px;
			box-shadow: 0 0 5px #424242;
		}
		.center-small{
			width: 6px;
			height: 6px;
			background-color: #EEEEEE;
			margin: -3px 0 0 -3px;
			z-index: 15;
		}
		.secondPointer,
		.minutePointer,
		.hourPointer{
			display: inline-block;
			border-top-right-radius: 50%;
			border-top-left-radius: 50%;
			position: absolute;
		}
		.secondPointer{
			width: 4px;
			height: 250px;
			top: 30px;
			margin: 0 0 0 -2px;
			background-color: crimson;
			transform-origin:center 220px ;
			z-index: 12;
		}
		.minutePointer{
			width: 8px;
			height: 210px;
			margin: 0 0 0 -4px;
			top: 70px;
			background-color: #4B0088;
			transform-origin: center 180px;
			z-index: 10;
		}
		.hourPointer{
			width: 12px;
			height: 170px;
			top: 110px;
			background-color: #424242;
			margin: 0 0 0 -6px;
			transform-origin: center 140px;
		}
		
		.big-mark,
		.middle-mark,
		.small-mark{
			display: inline-block;
			position: absolute;
			top: 50%;
			left: 50%;
		}
		.dial .big-mark{
			width: 30px;
			height: 10px;
			margin: -5px 0 0 -15px;
			background-color: #006CD9;
			transform-origin: -220px center;
		}
		.dial .middle-mark{
			width: 20px;
			height: 8px;
			margin: -4px 0 0 -10px;
			background-color: #006CD9;
			transform-origin: -230px center;
			transform: translateX(240px) rotateZ(30deg);
		}
		.dial .small-mark{
			width: 10px;
			height: 6px;
			margin: -3px 0 0 -5px;
			background-color: brown;
			transform-origin: -240px center;
			transform: translateX(245px) rotateZ(6deg);
		}
		.hour-num{
			display: inline-block;
			width: 60px;
			height: 60px;
			line-height: 60px;
			font-size: 40px;
			color: #424242;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -30px 0 0 -30px;
			/* background-color: #006CD9; */
		}
		.hour-num.hn-12 {
			transform: translateY(-200px);
		}
		.hour-num.hn-3 {
			transform: translateX(200px);
		}
		.hour-num.hn-6 {
			transform: translateY(200px);
		}
		.hour-num.hn-9 {
			transform: translateX(-200px);
		}
		.date{
			display: inline-block;
			width: 100px;
			height: 50px;
			position: absolute;
			top: 290px;
			left: 50%;
			margin: 0 0 0 -50px;
			border-radius: 5px;
			box-shadow: 0 0 5px #424242;
			background-color: yellowgreen;
			opacity: 0;
		}
		.date>p{
			margin: 0;
			line-height: 25px;
			color: #EEEEEE;
			text-align: center;	
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="dial"><!-- 表盘 -->
			<div class="center"></div> <!-- 中心圆点-->
			<div class="center-small"></div> <!-- 中心顶层小圆点-->
			<div class="secondPointer"></div> <!-- 秒针 -->
			<div class="minutePointer"></div> <!-- 分针 -->
			<div class="hourPointer"></div> <!-- 时针-->
			<span class="hour-num hn-12">12</span>
			<span class="hour-num hn-3">3</span>
			<span class="hour-num hn-6">6</span>
			<span class="hour-num hn-9">9</span>
			<div class="date"><p>2019-4-18</p><p>星期四</p></div>
		</div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var virtualClock = (function($,window){
			
			//对表盘进行布局,
			function dialLayout(){
				var str = '';
				for(var i=0;i<60;i++) {
					if(i % 15 === 0) {//小时 3 6 9 12
						str += '<span class="big-mark" style="transform:translateX(235px) rotateZ('+ i*6 +'deg);"></span>';
					} else if(i % 15 !== 0 && i % 5 === 0) { //小时 1 2 4 5 7 8 10 11
						str += '<span class="middle-mark" style="transform:translateX(240px) rotateZ('+ i*6 +'deg);"></span>';
					} else { // 分钟 
						str += '<span class="small-mark" style="transform:translateX(245px) rotateZ('+ i*6 +'deg);"></span>';
					}
				}
				$('.dial').append(str);
			}
			
			//处理时间
			function handleTime(flag)
			{
			  var date = new Date();
						
				if(flag) {
					var weeks = ['日','一','二','三','四','五','六'];
					return {
						'yearMonthDay' : date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(),
						'week' : '星期'+weeks[date.getDay()]
					};
				}
				
				return {
					'hour' : date.getHours(),
					'minute' : date.getMinutes(),
					'second' : date.getSeconds()
				};
			}
			
			//时针、分针、秒针跑起来
			function running(secondPointer,minutePointer,hourPointer){
				var time = handleTime();
				secondPointer.css('transform','rotateZ('+ time.second*6 +'deg)');
				//在time.minute的基础上,秒针每过十秒,分针转动1度
				minutePointer.css('transform','rotateZ('+ (time.minute*6 + Math.floor(time.second/10)) +'deg)');
				//在time.hour的基础上,分针每过两分钟,时针转动1度
				hourPointer.css('transform','rotateZ('+ (time.hour*30 + Math.floor(time.minute/2)) +'deg)');
			}
			
			function init(){
				var secondPointer = $('.secondPointer'),
					minutePointer = $('.minutePointer'),
					hourPointer = $('.hourPointer');
						
				$('.dial').hover(function(){
					var date = handleTime(true),
						datePanel = $(this).find('.date');
					datePanel.children(':first').text(date.yearMonthDay);
					datePanel.children(':last').text(date.week);
					datePanel.stop().animate({'opacity':0.8},1000);
				},function(){
					$(this).find('.date').stop().animate({'opacity':0},1000);
				});
				
				dialLayout(); //调用表盘布局函数
				
				//时间走动
				setInterval(function(){
					running(secondPointer,minutePointer,hourPointer);
				},1000);
			}
			
			return init;
			
		}(jQuery,window));
		
		virtualClock();
	</script>
</body>
</html>