<!DOCTYPE html>
<html lang="en">
<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>电子时钟综合版</title>
<style>
* {
box-sizing: border-box;
}
.clock {
position: relative;
width: 600px;
height: 600px;
background: url(./images/clock.jpg) no-repeat;
margin: 50px auto 0;
position: relative;
}
.hh,
.mm,
.ss {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(./images/hour.png) no-repeat center;
}
.mm {
background-image: url(./images/minute.png);
}
.ss {
background-image: url(./images/second.png);
}
.ele-date {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
bottom: 180px;
left: 50%;
transform: translateX(-50%);
color: #fff;
}
.date {
margin-bottom: 10px;
}
.timer {
display: flex;
height: 30px;
}
.hours,
.minute,
.second {
line-height: 30px;
width: 25px;
background-color: #333;
text-align: center;
}
</style>
</head>
<body>
<div class="clock">
<div class="hh"></div>
<div class="mm"></div>
<div class="ss"></div>
<div class="ele-date">
<span class="date">XXXX年XX月XX日 星期X</span>
<div class="timer">
<span class="hours">00</span>
<span class="minute">00</span>
<span class="second">00</span>
</div>
</div>
</div>
</body>
<script>
// 获取元素
var date_ = document.querySelector('.date');
var hours_ = document.querySelector('.hours');
var minute_ = document.querySelector('.minute');
var second_ = document.querySelector('.second');
var hh_ = document.querySelector('.hh');
var mm_ = document.querySelector('.mm');
var ss_ = document.querySelector('.ss');
// 实时更新时间
setInterval(function () {
var date = new Date(); // 获取当前时间
var year = date.getFullYear(); // 获取年份
var month = date.getMonth() + 1; // 获取月份
var day = date.getDate(); // 获取日期
var week = date.getDay(); // 获取星期
var hours = date.getHours(); // 获取小时
var minute = date.getMinutes(); // 获取分钟
var second = date.getSeconds(); // 获取秒钟
date_.innerHTML = year + '年' + month + '月' + day + '日' + '星期' + week;
hours_.innerHTML = hours;
minute_.innerHTML = minute;
second_.innerHTML = second;
// 修改时钟的旋转角度
var hhRotate = (hours % 12) * 30; // 小时对应的角度为每小时30度
var mmRotate = minute * 6; // 分钟对应的角度为每分钟6度
var ssRotate = second * 6; // 秒钟对应的角度为每秒6度
hh_.style.transform = 'rotate(' + hhRotate + 'deg)';
mm_.style.transform = 'rotate(' + mmRotate + 'deg)';
ss_.style.transform = 'rotate(' + ssRotate + 'deg)';
}, 1000)
</script>
</html>
网页时钟 2022350309 罗淦.zip
需积分: 0 50 浏览量
2023-06-19
23:57:06
上传
评论
收藏 586KB ZIP 举报
网页时钟 2022350309 罗淦.zip （14个子文件） 
网页时钟 2022350309 罗淦 
2022350309 罗淦 网页时钟作业.html 4KB images 
slider04.jpg 80KB slider08.jpg 58KB
second.png 15KB clock.jpg 61KB slider05.jpg 43KB slider01.jpg 55KB slider03.jpg 44KB slider06.jpg 42KB minute.png 14KB hour.png 14KB slider07.jpg 52KB ad.jpg 77KB slider02.jpg 87KB资源评论
2301_77802221
- 粉丝: 0
- 资源: 1
