【入门demo】做个实时时钟要多久

Hi,大家上午好,今天做个简易点的实时时钟,敲了一个小时多点,事后配色花了半个小时😵

展示

话不多说先上图

html部分

如图示,时钟看似一个平面,其实可以看成三个部分更容易理解,第一部分就是整个时钟,第二部分是外圈表盘【很细的黑圈】和六条横杆【白色* 4,黑色* 2】,第三部分就是包括时针、分针和秒针的内部表盘。

html 复制代码
<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>
</div>

css部分

难点一 弹性布局和定位

在做好html的框架之后,我们就会发现如何让容器在页面中居中是个不大不小的重点,在这个demo里,弹性布局和绝对定位是最好用的方法。

  1. 弹性布局居中

给其父容器加flex,再添加 justify-content(水平居中)和 align-items(垂直居中)这两个属性。

css 复制代码
    display: flex;
    justify-content: center;
    align-items: center;
  1. 绝对定位居中

给其加绝对定位,再添加自己根据位置设置top、bottom、left、right等等。

难点二 伪元素

在这个demo中,多次用到伪元素的方法,这两条黑色横杆和表心就是用伪元素的方法做的。

伪元素是一个附加至选择器末的关键词,例如 ::first-line 伪元素可以改变段落首行文字的样式。

伪元素由冒号(::)后跟着伪元素名称组成,例如 ::before::after 等。

js部分

在构建好了html框架、创建完样式之后,我们要考虑我们的时钟该怎么根据实时时间移动呢?这个时候就要请js出马了。

js部分的难点主要就在能否准确处理时钟转动角度和实时时间的关系,另外就是对setInterval()这个函数的使用,具体的放在下面。

js 复制代码
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()  //30
    const secondsDegrees = seconds * 6 + 90
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`

    const mins = now.getMinutes()
    const minsDegrees = mins * 6 + 90
    minHand.style.transform = `rotate(${minsDegrees}deg)`

    const hours = now.getHours()
    const hoursDegrees = hours * 30 + 90 + (mins / 60) * 30
    hourHand.style.transform = `rotate(${hoursDegrees}deg)`
}

setTime()
setInterval(setTime, 1)

结语

这样一个漂亮的时钟就完成了!如有错误欢迎在评论区指正,一起讨论!(๑•̀ㅂ•́)و✧

相关推荐
xjt_0901几秒前
浅析Web存储系统
前端
foxhuli22938 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript