【前端案例天堂（一）】简约钟表 （源码+注释）
程序员文章站
2022-06-11 21:02:56
...
【前端案例天堂（一）】简约钟表 （源码+注释）
目录
0.【效果图】
1.代码-【CSS部分 】
@charset "utf-8";
*{
margin:0px;
padding:0px;
}
body,html{
width:100%;
height:100%;
}
.clock{ /* 1.钟表的样式 */
width:300px;
height:300px;
border-radius: 50%;/* 圆心 */
background-color: greenyellow;
margin:30px auto 0px auto;/* 设置图形的边界和浏览器窗口页面之间的距离 *//* 上 右 下 左 // 顺时针记忆 */
border: 20px solid burlywood ; /* solid + color 显示边框+边框颜色 */
position: relative;/* 添加定位,作用在于使得指针设置等 用于定位(作为具有定位属性的父元素) */
}
.center{
width:20px;
height:20px;
border-radius: 50%;/* 圆形 */
background-color: darkorange;
position: absolute;
left:calc(50% - 10px);/* 在父元素.clock的width与height的基础上,在宽度上减去圆心半径,定位圆心到clock中心位置 */
top:calc(50% - 10px);
z-index: 100;/* 设置显示的优先级,值越大,优先级越高,优先显示 */
}
.hourHand{
width:10px;
height:75px;
background: black;
border-radius: 4px;/* 设置指针的弧度 */
position: absolute;
transform-origin:bottom center;/* 旋转中心的函数要写对,切忌写成transition-orgin */
top:75px;
left:145px;/* 给指针具体位置 ,定位到圆心*/
z-index:10;
transition-timing-function: cubic-bezier(0.1,2.7,0.58,1);/* 在js脚本作用下运动 */
transform:rotate(360deg);
}
.minuteHand{
width:6px;
height: 120px;
background: black;
border-radius: 5px;
position: absolute;
top:30px;
left:147px;
transform-origin:bottom center;
transition-timing-function:cubic-bezier(0.1,2.7,0.58,1);
transform: rotate(90deg);/* 设置初始静态表盘的指针位置,没有其他意义 */
z-index: 1;
}
.secondHand{
width:2px;
height:140px;
background: red;
border-radius: 5px;
position: absolute;
top:10px;
left:149px;
transition-timing-function:cubic-bezier(0.1,2.7,0.58,1);
transform-origin:bottom center;/* 设置秒针的旋转中心 */
transform: rotate(360deg);
z-index: 21;
}
.time{/* 显示数字时间基本属性 */
position: absolute;
top:45%;
left: 10%;
border:1px solid red;
background: white;
padding:5px;
display: block;
border-radius: 5px;
min-width: 70px;
height: 15px;
box-shadow: inset 0px 2px 5px rgba(0,0,0,.4);
line-height: 15px;
z-index:0;
}
.time small{
color: blue;
transition-timing-function:cubic-bezier(0.1,2.7,0.58,1);
}
.clock ul{ /* ul控制无序列表的整体属性 */
list-style: none;
padding: 0px;
}
.clock ul li{ /* li描述无序列表的具体元素的整体属性 */
position: absolute;
color: brown;
width: 20px;
height: 20px;
text-align: center;
font-size: 10px;
line-height: 20px;
}
/*
名称: :nth-child(n) 选择器
功能: 匹配属于其父元素的第 N 个子元素，不论元素的类型。
*/
.clock ul li:nth-child(1){
right: 22%;
top: 6.5%;
}
.clock ul li:nth-child(2){
right: 6%;
top:25%;
}
.clock ul li:nth-child(3){
right: 1%;
top:calc(50% - 10px);
color:#000;
font-size: 20px;
font-weight: bold;
}
.clock ul li:nth-child(4){
right: 6%;
top:69%;
}
.clock ul li:nth-child(5){
right: 22%;
top:84%;
}
.clock ul li:nth-child(6){
right: calc(50% - 10px);
top:calc(99% - 20px);
color:#000;
font-size: 20px;
font-weight: bold;
}
.clock ul li:nth-child(7){
left: 22%;
top:84%;
}
.clock ul li:nth-child(8){
left: 6%;
top:69%;
}
.clock ul li:nth-child(9){
left: 1%;
top:calc(50% - 10px);
color:#000;
font-size: 20px;
font-weight: bold;
}
.clock ul li:nth-child(10){
left: 6%;
top:25%;
}
.clock ul li:nth-child(11){
left: 22%;
top:6.5%;
}
.clock ul li:nth-child(12){
right: calc(50% - 10px);
top:1%;
color:#000;
font-size: 20px;
font-weight: bold;
}
.author{
position:absolute;
color:purple;
top:85px;
font-size: 15px;
left:90px;
}
2.代码-【JS部分 】
window.onload=function(){
// const用于声明变量,指的是变量所在的内存空间地址不得被改动
const hourHand = document.querySelector('.hourHand');
const minuteHand = document.querySelector('.minuteHand');
const secondHand = document.querySelector('.secondHand');
const time = document.querySelector('.time');
const clock = document.querySelector('.clock');
const audio = document.querySelector('.audio');
function setDate(){
const time_now=new Date();//Date 对象自动使用当前的日期和时间作为其初始值
const second=time_now.getSeconds();
// getSeconds()返回值是 0 ~ 59 之间的一个整数
const secondDeg = (( second / 60 ) * 360) ; /*这里可以 (( second / 60 ) * 360)+360*/
// js可以精确处理除法的小数问题,不同于c语言,这里比如second=10,则 secondDeg=420
secondHand.style.transform = `rotate(${secondDeg}deg)`;
const minute = time_now.getMinutes();
const minuteDeg = ((minute/60)*360);
minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
const hour = time_now.getHours();
const hourDeg = ((hour/12)*360);
hourHand.style.transform = `rotate(${hourDeg}deg)`;
time.innerHTML = '<span>'+'<strong>' + hour + '</strong>' + ' : ' + minute + ' : ' + '<small>' + second +'</small>'+'</span>';
}
setInterval(setDate,1000);
// 1秒更新一次;1秒=1000毫秒
}3.代码-【HTML部分 】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>钟表模型</title>
<link rel="stylesheet" type="text/css" href="css/Clock.css"/>
</head>
<body>
<div class="clock"><!-- 1.搭建钟表的外部模型：包括大小、边界框颜色、钟面颜色等属性 -->
<div class="center"><!-- 2.钟表的圆心 --></div>
<div class="hourHand"><!-- 3.时针 --></div>
<div class="minuteHand"><!-- 4.分针 --></div>
<div class="secondHand"><!-- 5.秒针 --></div>
<div class="timeScale"><!-- 6.时间刻度 --></div>
<div class="time"><!-- 7.数码时钟小窗口 --></div>
<div class="author">
<span>案例一：简约钟表 <br></span>
</div>
<ul><!-- 8.制作时间1-12共计12个刻度 -->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<div>
<script src="js/clock.js"></script> <!-- 调度js的动作 -->
<div style="text-align:center;clear:both">
</div>
</body>
</html>