提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

简洁的圆形时钟数字时钟+指针时钟(1+X Web前端开发初级 例题)

Web 数字 指针 前端开发 时钟 简洁 初级 例题
2023-09-11 14:15:13 时间

📚文章目录

⏰题目要求

⏰html代码 

⏰css代码 

⏰js代码 

⏰代码分析

 ❗PS:

⏰实现效果

⏰题目要求

⏰html代码 

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>简洁的圆形时钟js代码</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />

</head>
<body>

<div class="container">
	
	<div class="clock">
		<div id="date" class="date box"></div>
		<div class="clock-face">
			<div class="marker twelve"></div>
			<div class="marker three"></div>
			<div class="marker six"></div>
			<div class="marker nine"></div>
		<div id="minute-hand" class="hand minute-hand"></div>
		<div id="hour-hand" class="hand hour-hand"></div>
		<div id="second-hand" class="hand second-hand"></div>
		<div id="centre" class="centre"></div>
		<div id="digital-time" class="digital-time box"></div>
		</div>
	</div>
	
</div>

<script  src="js/script.js"></script>

</body>
</html>

⏰css代码 

* {
	transition: color .4s, background .4s, border .4s;
	transition-timing-function: ease-in;
}
body {
	background: #F9FBE7;
}
body.dark {
	background: #223;
}
.container {
	display: flex;
	height: 100vh;
}
.clock {
	position: relative;
	margin: auto;
	width: 220px;
	height: 260px;
}
.box {
	color: #7986CB;
	background: #EDE7F6;
	font-size: 20px;
	text-align: center;
	font-family: Lato, sans-serif;
	border: 2px solid #D1C4E9;
	border-radius: 4px;
}
.dark .box {
	color: #90CAF9;
	background: #4527A0;
	border: 2px solid #673AB7;
}
.date {
	width: 160px;
	padding: 5px 8px;
	position: absolute;
	top: -65px;
	left: 15px;
}
.clock-face {
	position: absolute;
	height: 220px;
	width: 220px;
	background: #EDE7F6;
	border-radius: 50%;
	border: 4px solid #D1C4E9;
}
.dark .clock-face {
	background: #4527A0;
	border: 4px solid #673AB7;
}
.marker {
	position: absolute;
	width: 10px;
	height: 10px;
	background: #7986CB;
	border-radius: 50%;
}
.dark .marker {
	background: #90CAF9;
}
.twelve {
	left: 105px;
	top: 8px;
}
.three {
	right: 8px;
	top: 105px;
}
.six {
	left: 105px;
	bottom: 8px;
}
.nine {
	left: 8px;
	top: 105px;
}
.hand {
	position: absolute;
	left: 110px;
	transform-origin: 0%;
	border-radius: 0 50% 50% 0;
}
.hour-hand {
	height: 8px;
	width: 62px;
	top: 107px;
	background: #F06292;
}
.dark .hour-hand {
	background: #E91E63;
}
.minute-hand {
	height: 6px;
	width: 88px;
	top: 108px; 
	background: #FF8A65;
}
.dark .minute-hand {
	background: #FF9800;
}
.second-hand {
	height: 3px;
	width: 98px;
	top: 109px; 
	background: #777;
}
.dark .second-hand {
	background: #eee
}
.centre {
	position: absolute;
	width: 16px;
	height: 16px;
	background: #777;
	border-radius: 50%;
	top: 102px;
	left: 102px;
}
.dark .centre {
	background: #eee
}
.digital-time {
	width: 90px;
	padding: 5px 8px;
	position: absolute;
	top: 250px;
	left: 55px;
}
.dark .digital-time {
	color: #90CAF9;
	background: #4527A0;
	border: 2px solid #673AB7;
}

.switch-label {
	color: #7986CB;
	padding-right: 6px;
	line-height: 1.6em;
	font-family: Lato, sans-serif;
	font-size: 0.9em;
}
.dark .switch-label {
	color: #90CAF9;
}
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #aaa;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: .4s;
}
input:checked + .slider {
  background-color: #90CAF9;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  transform: translateX(20px);
}
/* Rounded sliders */
.slider.round {
  border-radius: 8px;
}

.slider.round:before {
  border-radius: 5px;
}

⏰js代码 

//(1)声明一个7个长度的数组days
var days =[];
days[0]= '星期日';
days[1]= '星期一';
days[2]= '星期二';
days[3]= '星期三';
days[4]= '星期四';
days[5]= '星期五';
//(2)往数组days后面添加一个元素，值为星期六;
days[6]= '星期六';


var dateDisplay = document.getElementById('date');
var hourHand = document.getElementById('hour-hand');
var minuteHand = document.getElementById('minute-hand');
var secondHand = document.getElementById('second-hand');
var digitalTime = document.getElementById('digital-time');

var clock = function() {	
    //(3)获取当前时间
	  var timeNow = new Date();	
	  var day = timeNow.getDay();
		var date = timeNow.getDate();
		var month = timeNow.getMonth();
		dateDisplay.innerHTML = days[day];
		//(4)获取当前时间的秒
		var seconds =timeNow.getSeconds() ;
		var sRot = seconds * 6 - 90;
		//(5)获取当前时间的分钟
		var minutes = timeNow.getMinutes();
		var mRot = (minutes * 6) + (seconds / 10) - 90;
		//(6)获取当前时间的小时
		var hours = timeNow.getHours();
		var hRot = (hours % 12 * 30) + (minutes / 2) - 90;
		
		hourHand.style.transform = "rotate("+hRot+"deg)";
		minuteHand.style.transform = "rotate("+mRot+"deg)";
		secondHand.style.transform = "rotate("+sRot+"deg)";
		//(7)给digitalTime的内容赋值
		digitalTime.innerHTML= format(hours)+":"+format(minutes)+":"+format(seconds);
	
}

function format(num) {
		//(8)三元运算符，如果小于10则在num前面加个0，否则返回num
		
		return num=num<10?'0'+num:num;
}

(function run() {
		//(9)调用clock方法
		clock();
		//(10)(11)(12)定义定时器1秒后执行调用自己
		 setTimeout(function(){ run();}, 1000);
})();

⏰代码分析

本题的考核是js代码的补充，其中考核重点是日期对象。

首先js中的日期对象需要使用new Date()实例化对象才能使用

Date对象的常用get方法

时钟需要获取到小时、分钟、秒

所以需要用到getHours()、getMinutes()、getSeconds()来获取

 ❗PS:

虽然指针时钟不是本题的考核，但也是一个重点

指针的移动是通过transform属性来设置旋转角度

 其次就是指针移动的算法

 秒：var sRot = seconds * 6 - 90;

 分：var mRot = (minutes * 6) + (seconds / 10) - 90;

 时：var hRot = (hours % 12 * 30) + (minutes / 2) - 90;

 

最后计时器不能忘记设置和调用

1000毫秒=1秒

⏰实现效果

相关文章