JS实现电子时钟是前端开发中一个常见的功能,下面我来为大家介绍一下实现步骤:
步骤一:创建HTML结构
首先需要建立html结构,在
标签内添加一个<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS电子时钟</title>
<style type="text/css">
.clock {
width: 400px;
height: 400px;
margin: auto;
position: relative;
background-color: #fff;
box-shadow: 0 0 30px #888;
border-radius: 50%;
}
.hour-hand, .minute-hand, .second-hand {
position: absolute;
background-color: #000;
border-radius: 2px;
transform-origin: 50% 100%;
box-shadow: 0 0 5px #888;
}
.hour-hand {
width: 12px;
height: 100px;
top: 100px;
left: 194px;
transform: rotate(60deg);
}
.minute-hand {
width: 8px;
height: 130px;
top: 90px;
left: 196px;
transform: rotate(50deg);
}
.second-hand {
width: 4px;
height: 150px;
top: 80px;
left: 198px;
transform: rotate(13deg);
}
.numbers {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.numbers span {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 24px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -15px;
color: #000;
}
.numbers span:nth-child(1) {
transform: rotate(30deg) translate(135px) rotate(-30deg);
}
.numbers span:nth-child(2) {
transform: rotate(60deg) translate(135px) rotate(-60deg);
}
.numbers span:nth-child(3) {
transform: rotate(90deg) translate(135px) rotate(-90deg);
}
.numbers span:nth-child(4) {
transform: rotate(120deg) translate(135px) rotate(-120deg);
}
.numbers span:nth-child(5) {
transform: rotate(150deg) translate(135px) rotate(-150deg);
}
.numbers span:nth-child(6) {
transform: rotate(180deg) translate(135px) rotate(-180deg);
}
.numbers span:nth-child(7) {
transform: rotate(210deg) translate(135px) rotate(-210deg);
}
.numbers span:nth-child(8) {
transform: rotate(240deg) translate(135px) rotate(-240deg);
}
.numbers span:nth-child(9) {
transform: rotate(270deg) translate(135px) rotate(-270deg);
}
.numbers span:nth-child(10) {
transform: rotate(300deg) translate(135px) rotate(-300deg);
}
.numbers span:nth-child(11) {
transform: rotate(330deg) translate(135px) rotate(-330deg);
}
.numbers span:nth-child(12) {
transform: rotate(0deg) translate(135px) rotate(0deg);
}
</style>
</head>
<body>
<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
<div class="numbers">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
</div>
</div>
</body>
</html>
步骤二:获取当前时间
可以使用Date()
函数获取当前时间,如下代码:
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
步骤三:计算指针位移
用当前时间计算出时分秒指针的偏移角度,因为一共60秒, 一圈360度,所以每一秒指针转动的角度为6度,同样地,每一分钟指针转动的角度为6度,每一小时指针转动的角度为30度。用转盘度数来计算时针、分针、秒针的示例代码如下:
// 计算时针、分针、秒针的偏移角度
var hourAngle = (hour % 12) * 30 + minute / 60 * 30;
var minuteAngle = minute * 6;
var secondAngle = second * 6;
步骤四:指针位置回归
如果不加特殊处理,指针会在一直转圈圈,所以我们需要把指针的起始角度设置为起始时间,在起始时间的基础上不断叠加,不过针对处理时针的偏移角度可以在每小时加上30度,如下代码所示:
// 回归起始角度
hourAngle = hourAngle + minute / 60 * 30;
minuteAngle = minuteAngle + second / 60 * 6;
步骤五:指针转动效果实现
通过CSS中的transform属性,可以使时针、分针、秒针实现顺时针转动效果,示例代码如下:
// 旋转指针
document.querySelector('.hour-hand').style.transform = 'rotate(' + hourAngle + 'deg)';
document.querySelector('.minute-hand').style.transform = 'rotate(' + minuteAngle + 'deg)';
document.querySelector('.second-hand').style.transform = 'rotate(' + secondAngle + 'deg)';
至此,JS电子时钟制作完成。
以下是完整的代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS电子时钟</title>
<style type="text/css">
.clock {
width: 400px;
height: 400px;
margin: auto;
position: relative;
background-color: #fff;
box-shadow: 0 0 30px #888;
border-radius: 50%;
}
.hour-hand, .minute-hand, .second-hand {
position: absolute;
background-color: #000;
border-radius: 2px;
transform-origin: 50% 100%;
box-shadow: 0 0 5px #888;
}
.hour-hand {
width: 12px;
height: 100px;
top: 100px;
left: 194px;
transform: rotate(60deg);
}
.minute-hand {
width: 8px;
height: 130px;
top: 90px;
left: 196px;
transform: rotate(50deg);
}
.second-hand {
width: 4px;
height: 150px;
top: 80px;
left: 198px;
transform: rotate(13deg);
}
.numbers {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.numbers span {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 24px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -15px;
color: #000;
}
.numbers span:nth-child(1) {
transform: rotate(30deg) translate(135px) rotate(-30deg);
}
.numbers span:nth-child(2) {
transform: rotate(60deg) translate(135px) rotate(-60deg);
}
.numbers span:nth-child(3) {
transform: rotate(90deg) translate(135px) rotate(-90deg);
}
.numbers span:nth-child(4) {
transform: rotate(120deg) translate(135px) rotate(-120deg);
}
.numbers span:nth-child(5) {
transform: rotate(150deg) translate(135px) rotate(-150deg);
}
.numbers span:nth-child(6) {
transform: rotate(180deg) translate(135px) rotate(-180deg);
}
.numbers span:nth-child(7) {
transform: rotate(210deg) translate(135px) rotate(-210deg);
}
.numbers span:nth-child(8) {
transform: rotate(240deg) translate(135px) rotate(-240deg);
}
.numbers span:nth-child(9) {
transform: rotate(270deg) translate(135px) rotate(-270deg);
}
.numbers span:nth-child(10) {
transform: rotate(300deg) translate(135px) rotate(-300deg);
}
.numbers span:nth-child(11) {
transform: rotate(330deg) translate(135px) rotate(-330deg);
}
.numbers span:nth-child(12) {
transform: rotate(0deg) translate(135px) rotate(0deg);
}
</style>
</head>
<body>
<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
<div class="numbers">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
</div>
</div>
<script type="text/javascript">
// 获取当前时间
function clock() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
// 计算时针、分针、秒针的偏移角度
var hourAngle = (hour % 12) * 30 + minute / 60 * 30;
var minuteAngle = minute * 6;
var secondAngle = second * 6;
// 回归起始角度
hourAngle = hourAngle + minute / 60 * 30;
minuteAngle = minuteAngle + second / 60 * 6;
// 旋转指针
document.querySelector('.hour-hand').style.transform = 'rotate(' + hourAngle + 'deg)';
document.querySelector('.minute-hand').style.transform = 'rotate(' + minuteAngle + 'deg)';
document.querySelector('.second-hand').style.transform = 'rotate(' + secondAngle + 'deg)';
}
setInterval(clock, 1000);
</script>
</body>
</html>
以上代码可以直接复制到文件中运行,即可看到完整的电子时钟展现,同时可以根据需求进行进一步的调整和美化。
示例一:实现电子时钟中刻度部分的数字实现
<div class="clock">
<!-- 省略时针、分针、秒针部分HTML内容 -->
<div class="numbers">
<span id="number-1"></span>
<span id="number-2"></span>
<span id="number-3"></span>
<span id="number-4"></span>
<span id="number-5"></span>
<span id="number-6"></span>
<span id="number-7"></span>
<span id="number-8"></span>
<span id="number-9"></span>
<span id="number-10"></span>
<span id="number-11"></span>
<span id="number-12"></span>
</div>
</div>
<script type="text/javascript">
// 获取当前时间
function clock() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
// 计算时针、分针、秒针的偏移角度
var hourAngle = (hour % 12) * 30 + minute / 60 * 30;
var minuteAngle = minute * 6;
var secondAngle = second * 6;
// 回归起始角度
hourAngle = hourAngle + minute / 60 * 30;
minuteAngle = minuteAngle + second / 60 * 6;
// 旋转指针
document.querySelector('.hour-hand').style.transform = 'rotate(' + hourAngle + 'deg)';
document.querySelector('.minute-hand').style.transform = 'rotate(' + minuteAngle + 'deg)';
document.querySelector('.second-hand').style.transform = 'rotate(' + secondAngle + 'deg)';
// 显示时间数字
document.querySelector('#number-1').textContent = hour == 12 ? 12 : hour % 12;
document.querySelector('#number-2').textContent = hour >= 11 || hour < 1 ? hour - 1 + 12 : hour - 1;
document.querySelector('#number-3').textContent = hour >= 10 || hour < 2 ? hour - 2 + 12 : hour - 2;
document.querySelector('#number-4').textContent = hour >= 9 || hour < 3 ? hour - 3 + 12 : hour - 3;
document.querySelector('#number-5').textContent = hour >= 8 || hour < 4 ? hour - 4 + 12 : hour - 4;
document.querySelector('#number-6').textContent = hour >= 7 || hour < 5 ? hour - 5 + 12 : hour - 5;
document.querySelector('#number-7').textContent = hour >= 6 || hour < 6 ? hour - 6 + 12 : hour - 6;
document.querySelector('#number-8').textContent = hour >= 5 || hour < 7 ? hour - 7 + 12 : hour - 7;
document.querySelector('#number-9').textContent = hour >= 4 || hour < 8 ? hour - 8 + 12 : hour - 8;
document.querySelector('#number-10').textContent = hour >= 3 || hour < 9 ? hour - 9 + 12 : hour - 9;
document.querySelector('#number-11').textContent = hour >= 2 || hour < 10 ? hour - 10 + 12 : hour - 10;
document.querySelector('#number-12').textContent = hour >= 1 || hour < 11 ? hour - 11 + 12 : hour - 11;
}
setInterval(clock, 1000);
</script>
以上示例将电子时钟中的刻度数字实现了,使用了Js的条件运算符? :
,因此容易看懂,同时具有一定的参考意义。
示例二:实现电子时钟中液晶显示屏上的时间和日期信息展示
```html
利用JS十分钟判断数组中存在元素的多种方式
利用JS十分钟判断数组中存在元素的多种方式 在JavaScript中,判断一个数组中是否存在某个元素,是我们经常需要面对的问题。以下是几种实现此功能的方式。 方法一:使用includes()方法 ES6中,可以使用数组的includes()方法来判断是否包含某个元素。 示例代码: const arr = [1, 2, 3]; console.log(arr.…
在React中this容易遇到的问题详解
在React中this容易遇到的问题详解 在React开发中,this这个关键字非常常用,但同时也很容易引起问题。接下来,本文将详细讲解在React中this容易遇到的问题,并提供相应的解决方法。 问题1:函数调用时this指向问题 在React中,我们一般使用bind绑定this来确保函数中的this指向正确。但是,有时我们会在组件渲染时动态传递数据,这时…
浅谈JSON5解决了JSON的两大痛点
让我详细地讲解一下“浅谈JSON5解决了JSON的两大痛点”的完整攻略。 背景介绍 首先,让我们来了解一下 JSON5 背后的背景。JSON(JavaScript Object Notation)是一种常用的数据交换格式,用于存储和传输简单和复杂的数据。JSON 这种格式的优点在于它的可读性、易于解析和在 Web 应用程序和 API 中的广泛使用。然而,在实…