实现在线时钟一般需要用到 JavaScript 和 CSS 进行布局和动画效果的实现。下面是实现纯 JS 和 CSS 的在线时钟的完整攻略。
步骤一:HTML 结构
时钟需要显示时、分、秒,因此需要一个容器来分别放置时钟的三个部分,容器可以使用一个 div 标签。
<div class="clock">
<div class="hour"> </div>
<div class="minute"> </div>
<div class="second"> </div>
</div>
步骤二:CSS 样式
首先需要设置容器的基本样式,如背景颜色、宽度、高度、圆角等。然后使用相对定位 positions 让时、分、秒的部分可以根据容器定位,再使用 CSS3 的旋转变换让时、分、秒的针正确旋转。
.clock{
background: #EFEFEF;
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
margin: 50px auto;
}
.hour,
.minute,
.second {
position: absolute;
width: 8px;
height: 8px;
background: black;
border-radius: 50%;
transform-origin: bottom center;
}
.hour {
height: 50px;
width: 4px;
background-color: #222;
left: 95px;
bottom: 100px;
}
.minute {
height: 70px;
width: 3px;
background-color: #222222;
left: 98px;
bottom: 100px;
}
.second {
height: 85px;
width: 2px;
background-color: #E74C3C;
left: 99px;
bottom: 100px;
}
步骤三:使用 JavaScript 更新时钟
使用 Date 对象获取当前的时、分、秒,通过计算当前时间中时、分、秒对应的度数,旋转时、分、秒针。
function clock(){
var d = new Date();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
var hourDeg = (hours * 30) + (0.5 * minutes);
var minuteDeg = minutes * 6;
var secondDeg = seconds * 6;
$(".hour").css({"transform" : "rotate("+ hourDeg +"deg)"});
$(".minute").css({"transform" : "rotate("+ minuteDeg +"deg)"});
$(".second").css({"transform" : "rotate("+ secondDeg +"deg)"});
}
setInterval(clock, 1000);
上面的 JavaScript 代码中,首先获取了当前时间的小时、分钟、秒数,然后计算出每个指针的旋转角度,最后通过 jQuery 处理样式变换,每秒钟一次更新时钟。
示例
下面是两个实现时钟的示例:
示例一
这个示例将时钟在页面中央居中,实现了响应式布局,时钟的大小会根据屏幕大小而改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线时钟</title>
<style>
body {
background: #f2f2f2;
}
.container{
max-width: 700px;
margin: 0 auto;
}
.clock{
background: #EFEFEF;
width: 80%;
height: 400px;
max-width: 700px;
border-radius: 50%;
position: relative;
margin: 50px auto;
}
.hour,
.minute,
.second {
position: absolute;
width: 8px;
height: 8px;
background: black;
border-radius: 50%;
transform-origin: bottom center;
}
.hour {
height: 50px;
width: 4px;
background-color: #222;
left: 50%;
margin-left: -2px;
bottom: 200px;
}
.minute {
height: 70px;
width: 3px;
background-color: #222;
left: 50%;
margin-left: -1.5px;
bottom: 200px;
}
.second {
height: 85px;
width: 2px;
background-color: #E74C3C;
left: 50%;
margin-left: -1px;
bottom: 200px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
</div>
<script>
function clock(){
var d = new Date();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
var hourDeg = (hours * 30) + (0.5 * minutes);
var minuteDeg = minutes * 6;
var secondDeg = seconds * 6;
$(".hour").css({"transform" : "rotate("+ hourDeg +"deg)"});
$(".minute").css({"transform" : "rotate("+ minuteDeg +"deg)"});
$(".second").css({"transform" : "rotate("+ secondDeg +"deg)"});
}
setInterval(clock, 1000);
</script>
</body>
</html>
示例二
这个示例将时钟放在页面的右下角,同时调整了时钟的颜色和大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线时钟</title>
<style>
body {
background: #f2f2f2;
}
.clock{
background: #222;
width: 200px;
height: 200px;
border-radius: 50%;
position: fixed;
bottom: 25px;
right: 25px;
}
.hour,
.minute,
.second {
position: absolute;
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
transform-origin: bottom center;
}
.hour {
height: 60px;
width: 5px;
background-color: #eaeaea;
left: 95px;
bottom: 100px;
}
.minute {
height: 80px;
width: 3px;
background-color: #eaeaea;
left: 98px;
bottom: 100px;
}
.second {
height: 100px;
width: 2px;
background-color: #e74c3c;
left: 99px;
bottom: 100px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
<script>
function clock(){
var d = new Date();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
var hourDeg = (hours * 30) + (0.5 * minutes);
var minuteDeg = minutes * 6;
var secondDeg = seconds * 6;
$(".hour").css({"transform" : "rotate("+ hourDeg +"deg)"});
$(".minute").css({"transform" : "rotate("+ minuteDeg +"deg)"});
$(".second").css({"transform" : "rotate("+ secondDeg +"deg)"});
}
setInterval(clock, 1000);
</script>
</body>
</html>
以上是使用纯 JS 和 CSS 实现在线时钟的攻略,你可以根据自己的需要,自行调整时钟的颜色、大小、位置和样式。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯js+css实现在线时钟 - Python技术站