网页如何写出一个时钟效果----小白[实战]篇

Dolphin_海豚2023-11-01 15:32

今天我们来用html，css，js 实现一个时钟的效果

如图

这个时钟是实时的效果，既然效果是动态交互的我们就需要用js来实现这个功能。

首先我们来写整体结构html部分

html部分

xml 复制代码 
<!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>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="clock">
        <div class="outer-clock-face">
            
            <div class="marking marking-one"></div>
            <div class="marking marking-two"></div>
            <div class="marking marking-three"></div>
            <div class="marking marking-four"></div>

            <div class="inner-clock-face">
                <div class="hand hour-hand"></div>
                <div class="hand min-hand"></div>
                <div class="hand second-hand"></div>
            </div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

其实看这张图我们可以把这个时钟分成两个部分，一个是外部时钟面板，一个是内部时钟面板。外部时钟包含内部时钟。内部时钟里面包含时针、分针和秒钟。外部时钟除了存放内部时钟之外，我们还需要存放刻度，刻度有12个，其实2个对应的刻度就是用一根长条实现，因此我们只需要有6根长条就可以，6根长条我们分为两部分，一部分是细的长条，有四根，另一部分是粗的长条，有2根。大家肯定发现了，我这里的html只有4根，另外两根粗的长条去哪里了？其实另外两根长条是用伪元素实现的，伪元素写在样式里面的，一前一后。

好现在已经给出了整体方向，我们现在实现css效果

css部分

  1. html 部分：
    • 设置整个网页的背景颜色为白色。
    • 设置网页的默认字体大小为10像素（这是基准字体大小，后续的字体大小可以相对于这个值进行调整）。
  2. body 部分：
    • 设置网页的外边距（margin）为0，以消除默认外边距。
    • 将网页的默认字体大小设置为2rem，这里介绍下rem单位，rem是基于根标签，根标签通常都是html元素，html元素中字体为10px，所以2rem就是20px。这相当于20像素，相对于html根元素的字体大小。
    • 使用 Flex 布局，使其内容在垂直和水平方向上都居中对齐。
    • 设置网页的高度为视口高度vh（viewport height）的100%，以确保网页占据整个屏幕高度。
  3. .clock 部分：
    • 定义一个时钟容器的样式。
    • 设置容器的宽度和高度为30rem，创建一个圆形容器，边框为7像素宽的淡黄色。
    • border-radius: 50%;这个属性是改变元素边框圆角的弧度，一个参数代表四个角都有相同的弧度，百分比得话只要是>=50就都是圆形。
    • 添加一个圆形阴影效果，包括外部和内部的阴影，这里需要讲下rgba，rgb大家都知道，a是什么呢，a是alpha，意思为透明度，取值0(完全透明)-1(完全不透明)之间。
    • 设置背景图像，并将其大小调整为容器的111%。
    • 设置内边距为2rem。
  4. .outer-clock-face 部分：
    • 定义外部时钟面板的样式。
    • 创建一个圆形容器，充满父容器的100%宽度和高度。
    • 通过伪元素::before和::after添加两个垂直线条，这里注意：css伪元素用于向特定元素添加样式，无需为该元素创建额外的HTML元素，所以大家看到我的HTML中少了两个粗长条，另外，伪元素默认是不显示的，我之前的文章也有提到过，大家可以翻看我的上期文章。
  5. .marking、.marking-one、.marking-two、.marking-three、.marking-four 部分：
    • 定义时钟面上的标记线的样式，以不同的角度旋转，创建刻度标记。
  6. .inner-clock-face 部分：
    • 定义内部时钟面板的样式。
    • 设置一个圆形容器，位于外部时钟面板内部。
    • 设置背景颜色，添加背景图像，大小调整为125%。
    • 在中心添加一个小圆形标记，这个圆形标记我把他的图层提高了一位，默认层级都是1，大家可以记住这个z-index属性，用来改变图层的。
  7. .hand、.hour-hand、.min-hand、.second-hand 部分：
    • 定义时钟的时、分、秒针样式。
    • 设置宽度、高度、颜色，以及旋转效果，使它们在合适的位置旋转。

这里的参数都是实践出来的，不清楚的跟着我一起敲没有关系，敲多了代码对这些参数的设定就会很熟悉了。

css代码总览

css 复制代码 
html{
    background: #fff;
    font-size: 10px;
}
body{
    margin: 0;
    font-size: 2rem;   
    display: flex; 
    justify-content: center;
    align-items: center;
    height: 100vh;/*view height 浏览器的高度*/
}
.clock{
    width: 30rem;
    height: 30rem;
    border: 7px solid #ffedbd;
    border-radius: 50%;
    box-shadow: -4px -4px 10px rgba(67,67,67,0.1),
                inset 4px 4px 10px rgba(168,145,128,0.6),
                inset -4px -4px 10px rgba(201,175,155,0.2),
                4px 4px 10px rgba(168,145,128,0.6);
    background-image: url('./p.jpg');
    background-size: 111%;
    padding: 2rem;
}
.outer-clock-face{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
}
.outer-clock-face::before,
.outer-clock-face::after{
    content: '';
    width: 10px;
    height: 100%;
    background: #1c2e03;
    position: absolute;
    border-radius: 8px;
    left: 50%;
    margin-left: -5px;
}
.outer-clock-face::after{
    transform: rotate(90deg);
    transform-origin: center center;
}
.marking{
    width: 3px;
    height: 100%;
    background: #1c2e03;
    position: absolute;
    left: 50%;
    margin-left: -1.5px;
}
.marking-one{
    transform: rotateZ(30deg);
    transform-origin: center center;
}
.marking-two{
    transform: rotateZ(60deg);
    transform-origin: center center;
}
.marking-three{
    transform: rotateZ(120deg);
    transform-origin: center center;
}
.marking-four{
    transform: rotateZ(150deg);
    transform-origin: center center;
}
.inner-clock-face{
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background-color: bisque;
    z-index: 2;/*层级提高*/
    border-radius: 50%;
    background-image: url('./p.jpg');
    background-size: 125%;
}
.inner-clock-face::before{
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: black;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
}
.hand{
    width: 50%;
    height: 6px;
    background: red;
    border-radius: 6px;
    position: absolute;
    top: 50%;
    right: 50%;
    margin-top: -3px;
    transform-origin: 100% 50%;
    transform: rotate(90deg);
}
.hour-hand{
    width: 30%;
}
.min-hand{
    width: 40%;
    height: 3px;
    background: yellow;
}
.second-hand{
    background: grey;
    width: 45%;
    height: 2px;
}

js部分

先上代码

ini 复制代码 
const secondHand = document.querySelector('.second-hand')
const minHand = document.querySelector('.min-hand')
const hourHand = document.querySelector('.hour-hand')
// console.log(secondHand);

function setTime(){
    const now = new Date()
    //获取当前的秒数
    const seconds = now.getSeconds()
    const secondsDegrees = seconds * 6 + 90//从90°开始旋转
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`
    //获取当前的分钟
    const minutes = now.getMinutes()
    const minutesDegrees = minutes * 6 + 90
    minHand.style.transform = `rotate(${minutesDegrees}deg)`
    //获取当前的时针
    const hour = now.getHours()
    const hoursDegrees = hour *30 + 90 + (minutes/60)*30
    hourHand.style.transform = `rotate(${hoursDegrees}deg)`
}

setTime()

setInterval(setTime, 1000)

下面解释下这些代码，内容有点多，大家耐心看完

  1. const secondHand = document.querySelector('.second-hand')、const minHand = document.querySelector('.min-hand')、const hourHand = document.querySelector('.hour-hand')：这三行代码分别使用document.querySelector方法从DOM中选择具有相应类名的HTML元素，并将它们分别存储在secondHand、minHand和hourHand变量中。这些元素也通常是用于表示时钟的秒、分和时针的指针。
  2. function setTime()：自定义一个js函数，用于获取当前时间并将其显示在指针上。函数内的代码如下：
    • const now = new Date()：创建一个Date对象来获取当前的秒数。
    • 获取当前秒数、分钟数和小时数，并计算相应的角度：
      • const seconds = now.getSeconds()：获取当前秒数。
      • const secondsDegrees = seconds * 6 + 90：将秒数乘以6，再加上90度，以将0秒对应于垂直向上的12点位置。
      • const minutes = now.getMinutes()：获取当前分钟数。
      • const minutesDegrees = minutes * 6 + 90：将分钟数乘以6，再加上90度。
      • const hour = now.getHours()：获取当前小时数。
      • const hoursDegrees = hour * 30 + 90 + (minutes / 60) * 30：将小时数乘以30，再加上90度，并添加分钟的偏移量，以考虑到小时指针在分钟内的旋转。
    • 设置指针的旋转角度：
      • secondHand.style.transform = rotate(${secondsDegrees}deg)``：通过修改style.transform属性，将秒针的旋转角度设置为secondsDegrees度。
      • minHand.style.transform = rotate(${minutesDegrees}deg)``：将分钟针的旋转角度设置为minutesDegrees度。
      • hourHand.style.transform = rotate(${hoursDegrees}deg)``：将时针的旋转角度设置为hoursDegrees度。
  3. setTime()：调用setTime函数。
  4. setInterval(setTime, 1000)：这一行设置了一个定时器，每1000毫秒（1秒）调用一次setTime函数，以更新指针位置，实现实时显示当前时间。

最后的开头的效果就实现了，大家这里的图片可以放上女朋友的照片[doge]，然后自己也做一个页面出来发给女朋友看看，哈哈哈。

关注我，获取更多有意思的前端小项目。如果觉得本文对你有帮助的话，可以给个免费的赞吗[doge] 还有可以给我的gitee链接codeSpace: 记录coding中的点点滴滴 (gitee.com)点一个免费的star吗[星星眼]

相关推荐
好名字0821几秒前
前端取Content-Disposition中的filename字段与解码(vue)
前端·javascript·vue.js·前端框架
摇光936 分钟前
js高阶-async与事件循环
开发语言·javascript·事件循环·宏任务·微任务
隐形喷火龙12 分钟前
element ui--下拉根据拼音首字母过滤
前端·vue.js·ui
m0_7482411225 分钟前
Selenium之Web元素定位
前端·selenium·测试工具
风无雨31 分钟前
react杂乱笔记(一)
前端·笔记·react.js
胡西风_foxww34 分钟前
【ES6复习笔记】Class类（15）
javascript·笔记·es6·继承·类·class·静态成员
鑫~阳43 分钟前
快速建站（网站如何在自己的电脑里跑起来） 详细步骤 一
前端·内容管理系统cms
egekm_sefg1 小时前
webrtc学习----前端推流拉流，局域网socket版，一对多
前端·学习·webrtc
m0_748234341 小时前
前端工作中问题点拆分
前端
布兰妮甜1 小时前
使用 WebRTC 进行实时通信
javascript·webrtc·实时通信
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告