一、 要求
上方是简易的刻度时钟,下方是电子时钟,上下的时间需与北京时实时对应
实验原理:
- 利用css进行画图布局操作
- 利用了css 的 for循坏画出了钟的刻度
- 再运用时间间隔让时钟动起来
效果图:
时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时钟小练习</title>
<style>
* {
padding: 0;
margin: 0;
}
ul,
li {
list-style: none;
}
h2{
font-size: 75px;
text-align: center;
}
body {
background-color: #414141;
}
#clock {
width: 300px;
height: 300px;
margin: 100px auto;
background-color: gray;
border: 2px solid #000;
border-radius: 50%;
position: relative;
}
#hour,
#minu,
#second {
position: absolute;
left: 50%;
top: 50%;
background-color: #000;
transform-origin: center bottom;
}
#hour {
width: 6px;
height: 40px;
margin: -40px 0 0 -3px;
}
#minu {
width: 4px;
height: 65px;
margin: -65px 0 0 -2px;
}
#second {
width: 2px;
height: 100px;
margin: -100px 0 0 -1px;
}
#ball {
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #000;
}
ul {
position: relative;
height: 100%;
width: 100%;
}
li {
width: 2px;
height: 8px;
background-color: #000;
position: absolute;
left: 50%;
top: 0;
transform-origin: center 150px;
}
#word{
text-align: center;
font-size: 50px;
color: beige;
}
</style>
</head>
<body>
<h2>准点小闹钟</h2>
<div id="clock">
<!-- 用来制作小刻标 -->
<ul>
<li></li>
</ul>
<div id="hour"></div>
<div id="minu"></div>
<div id="second"></div>
<div id="ball"></div>
</div>
<div id="word"></div>
<script>
// 表盘
var ul = document.querySelector('ul')
for (var i = 0; i < 60; i++) {
var li = document.createElement('li')
li.style.transform = 'rotate(' + i * 6 + 'deg)'//添加li使其属性负值
if (i % 5 == 0) {
li.style.height = '18px'
}
ul.appendChild(li);
}
//指针运动
var hour = document.getElementById('hour')
var minu = document.getElementById('minu')
var second = document.getElementById('second')
function active() {
var date = new Date()
var Hour = date.getHours();
var Minu = date.getMinutes()
var S = date.getSeconds()
//表示分针过半的时候,时针调节位置到下一刻度中间位置
hour.style.transform = 'rotate(' + (Hour * 30 + Minu / 3) + 'deg)';
minu.style.transform = 'rotate(' + Minu * 6 + 'deg)';//同上
second.style.transform = 'rotate(' + S * 6 + 'deg)';//同上
}
active()
setInterval(active, 1000)
//该为word部分(其中利用另一种算时间的方法)
var clock = document.getElementById('clock');
var word = document.getElementById('word');
function wordTime(date) {
var sub = date.getTime() / 1000;//获取离1970的毫秒数
var hours = parseInt(sub % (60 * 60 * 24) / (60 * 60)) + 8;//计算剩余相差多少小时
var minutes = parseInt(sub % (60 * 60) / 60);//计算剩余相差多少分钟
var miaos = parseInt(sub % 60);
if (hours < 10) {
hours = "0" + hours
}
if (minutes < 10) {
minutes = "0" + minutes
}
if (miaos < 10) {
miaos = "0" + miaos
}
let obj = {
hours: hours,
minute: minutes,
miaos: miaos,
}
return obj
}
setInterval(function () {
var date = new Date()
var reset = wordTime(date)
word.innerHTML = `现在是北京时间:${reset.hours}:${reset.minute}:${reset.miaos}`
}, 1000)
</script>
</body>
</html>