js写一个钟表

最新推荐文章于 2024-08-27 13:24:20 发布

雕琢时光纸戆

最新推荐文章于 2024-08-27 13:24:20 发布

阅读量509

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/TISRNW/article/details/102859742

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			html,
			body {
				height: 100%;
				width: 100%;
				background-color: antiquewhite;
			}

			.wrap {
				width: 500px;
				height: 500px;
				background-color: white;
				margin: 100px auto;
				position: relative;
				border-radius: 50%;
				/* z-index: 10; */
			}

			.wrap .num-wrap {
				width: 100%;
				height: 100%;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				/* z-index: 10; */
			}

			.wrap .num-wrap .num {
				height: 50px;
				width: 50px;
				/* display: block; */
				font-size: 20px;
				text-align: center;
				line-height: 50px;
				/* background-color: rosybrown; */
				position: absolute;
				top: 225px;
				left: 225px;
			}

			.wrap .pointer-wrap {
				width: 100%;
				height: 100%;
				position: absolute;
			}

			/* 旋转中心 x= width/2   y= height-width/2 */
			/* top = 250-(height-width/2) left = 250 - width/2  这里的height和width是指针的宽高*/
			#seconds {
				width: 4px;
				height: 200px;
				background-color: black;
				position: absolute;
				top: 52px;
				left: 248px;
				border-radius: 100px;
				/* transform: rotate(10deg); */
				transform-origin: 2px 198px;
			}

			#min {
				border-radius: 100px;
				width: 8px;
				height: 160px;
				background-color: black;
				position: absolute;
				top: 94px;
				left: 246px;

				/* transform: rotate(10deg); */
				transform-origin: 4px 156px;
			}

			#hours {
				border-radius: 100px;
				width: 10px;
				height: 100px;
				background-color: black;
				position: absolute;
				top: 155px;
				left: 245px;


				transform-origin: 5px 95px;
			}
			.date-wrap{
				height: 30px;
				width: 150px;
				background-color: white;
				position: absolute;
				top: 260px;
				left: 175px;
			    line-height: 30px;
				text-align: center;
				font-size: 18px;
			}
			.day-wrap{
				height: 30px;
				width: 30px;
				background-color: rgb(200,225,225);
				position: absolute;
				top: 320px;
				left: 300px;
				line-height: 30px;
				font-size: 18px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="num-wrap">
				<span class="num">12</span>
				<span class="num">1</span>
				<span class="num">2</span>
				<span class="num">3</span>
				<span class="num">4</span>
				<span class="num">5</span>
				<span class="num">6</span>
				<span class="num">7</span>
				<span class="num">8</span>
				<span class="num">9</span>
				<span class="num">10</span>
				<span class="num">11</span>

			</div>
			<div class="pointer-wrap">
				<div class="date-wrap">
					
				</div>
				<div class="day-wrap">
					
				</div>
				<div id="seconds">

				</div>
				<div id="min">

				</div>
				<div id="hours">

				</div>
				
			</div>

		</div>
		<script type="text/javascript">
			var r = 230
			var nums = document.getElementsByClassName('num')
			for (var i = 0; i < nums.length; i++) {
				var y = 0,
					x = 0
				y = -r * Math.cos(i * (Math.PI / 6))
				var x = r * Math.sin(i * (Math.PI / 6))
				nums[i].style.transform = 'translateY(' + y + 'px)' + ' ' + 'translateX(' + x + 'px)'

			}
			var sPointer = document.getElementById('seconds')
			var mPointer = document.getElementById('min')
			var hPointer = document.getElementById('hours')
			var setPonter = function() {
				var now = new Date()
				var h = now.getHours()
				var m = now.getMinutes()
				var s = now.getSeconds()

				sPointer.style.transform = 'rotate(' + 6 * s + 'deg)'

				var mDeg = m / 60 * 360 + s / 60 * 360 / 60
				mPointer.style.transform = 'rotate(' + mDeg + 'deg)'

				var hDeg = (h - 12) * 30 + m / 2
				hPointer.style.transform = 'rotate(' + hDeg + 'deg)'
				
				
			}
			setInterval(function() {
				setPonter()
			}, 100)
			// var date1 = function(){
			// 	var theDate = new Date(theTime)
			// 	var year = theDate.getFullYear()
			// 	var month = theDate.getMonth() + 1
			// 	var date = theDate.getDate()
			// 	var theDate = document.getElementsByClassName('date-wrap')[0]
			// 	var dateStr = year + '年' + month + '月' + date + '日 '
			// 	theDate.innerHTML = dataStr
			// }
			var nowDate =document.getElementsByClassName('date-wrap')[0]
			var nian  =new Date().getFullYear()
			var yue = new Date().getMonth()+1
			var ri = new Date().getDate()
			
			 nowDate.innerHTML= nian+'年'+yue + '月'+ri+'日'
			var nowDay = document.getElementsByClassName('day-wrap')[0]
			var day = new Date().getDay()
			nowDay.innerHTML = day
		</script>
	</body>
</html>