likes
comments
collection
share

【Demo】利用 BEM命名法 轻松实现一个时钟小Demo

作者站长头像
站长
· 阅读数 5

序言

今天我们不聊干货，我们来用JavaScript实现一个有趣的时钟小Demo，先看效果图。

【Demo】利用 BEM命名法 轻松实现一个时钟小Demo

这个时钟Demo首先是在页面是上显示的，具有背景样式和指针动作，所以我们需要创建三个文件html/css/js，分别对这个三个文件进行各自的编写最后link到我们的html文件中来完成我们这个Demo，那么话不多说，先上代码！

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

CSS代码

html{
    background: #fff;
    font-size: 10px;
}

body{
    height: 100vh;
    margin: 0;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clock{
    width: 30rem;
    height: 30rem;
    border: 7px solid #4d4b63;
    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('bg.jpeg');
    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-color: #596235;
    position: absolute;
    border-radius: 8px;
    left: 50%;
    margin-left:-5px;
    /* transform: translate(-50%); */
}
.outer-clock-face::after{
    transform: rotate(90deg);
    transform-origin: center center;
}
.marking{
    width: 3px;
    height: 100%;
    background: #000;
    position: absolute;
    left: 50%;
    margin-left: -1.5px;
    transform-origin: center center;
}
.marking-one{
    transform: rotateZ(30deg);
}
.marking-two{
    transform: rotateZ(60deg);
}
.marking-three{
    transform: rotateZ(120deg);
}
.marking-four{
    transform: rotateZ(150deg);
}

.inner-clock-face{
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background-image: url('bg.jpeg');
    background-size: 100%;
    z-index: 2;
    border-radius: 50%;
}
/*在内表盘加个伪元素用于添加一个指针端点*/
.inner-clock-face::before{
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4d4b63;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
}

.hand{
    width: 50%;
    height: 6px;
    background-color: rgb(71, 3, 229);
    border-radius: 6px;
    position: absolute;
    top: 50%;
    right: 50%;
    margin-to

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() // 40
  const minsDegrees = mins * 6 + 90
  minHand.style.transform = `rotate(${minsDegrees}deg)`

  // 获取到时
  const hour = now.getHours() // 21
  const hourDegrees = hour * 30 + 90 + (mins / 60) * 30
  hourHand.style.transform = `rotate(${hourDegrees}deg)`
}

setTime()
setInterval(setTime, 1000)

代码解释

HTML部分

在HTML部分按照前面讲的BEM命名法先将整个时钟界面逐步分级，首先将时钟分为外表盘和内表盘。

  • 外表盘：在外表盘里先有一个显示时钟的外部边框，还有四根线条用来绘制时钟的刻度。

  • 内表盘：内表盘里面，有一个显示时钟内部面板，还有三个元素分别代表时钟的小时指针、分钟指针、秒钟指针。

  • 最后引入我们的js文件

CSS部分

.outer-clock-face::before,
.outer-clock-face::after {
    content: '';
    width: 10px;
    height: 100%;
    background-color: #596235;
    position: absolute;
    border-radius: 8px;
    left: 50%;
    margin-left: -5px;
}

这段代码我们先使用了伪元素(::before和::after)在外部时钟上添加两个垂直条纹。设置宽度为10px，高度为100%。通过background-color属性设置条纹的颜色为#596235。使用position属性设置为absolute，并设置left属性为50%，将条纹水平居中。margin-left属性用于微调条纹的位置。

.marking-one {
    transform: rotateZ(30deg);
}
.marking-two {
    transform: rotateZ(60deg);
}
.marking-three {
    transform: rotateZ(120deg);
}
.marking-four {
    transform: rotateZ(150deg);
}

通过transform属性对不同的刻度进行旋转变换，使其按照一定的角度分布在外部时钟的圆周上。rotateZ()函数用于指定绕z轴旋转的角度。

.inner-clock-face {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background-image: url('bg.jpeg');
    background-size: 100%;
    z-index: 2;
    border-radius: 50%;
}

定义内部时钟的样式，将内部时钟定位到外部时钟的中心位置。并使用background-size属性对图片进行缩放。z-index属性设置层级为2，使内部时钟位于外部时钟的上方。border-radius属性设置边框圆角为50%。

.inner-clock-face::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4d4b63;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

使用伪元素(::before)在内部时钟上添加一个用于指针的端点。设置宽度和高度为16px，border-radius属性设置边框圆角为50%。通过background属性设置端点的颜色为#4d4b63。使用position属性设置为absolute，并设置top和left属性为50%，将端点定位到内部时钟的中心位置。使用transform属性进行微调，将端点居中显示。

通过这些CSS样式，可以生成一个具有圆形外观、条纹和刻度的时钟界面，并设置了背景图片和阴影效果。同时，通过给指针添加样式，可以实现秒钟、分钟和小时指针的动态效果。

JS部分

我们JS代码主要是为了实现时针、分针、秒针的转动效果，并且获取当前时间来调整每个指针转动的角速度。

const secondHand = document.querySelector('.second-hand') 
const minHand = document.querySelector('.min-hand')
const hourHand = document.querySelector('.hour-hand')

首先，通过querySelector方法获取了页面中class为.second-hand、.min-hand、.hour-hand的元素，分别代表秒针、分针、时针。

function setTime() {   
const now = new Date()

const seconds = now.getSeconds()  
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 hour = now.getHours() 
const hourDegrees = hour * 30 + 90 + (mins / 60) * 30  
hourHand.style.transform = `rotate(${hourDegrees}deg)`

setTime() 
setInterval(setTime, 1000)

然后定义了一个setTime函数，用于更新指针的位置。在函数内部，通过Date对象获取当前时间。

接着通过getSeconds方法获取当前的秒数，并将其转换为角度。由于一圈360度对应60秒，所以每秒钟转动6度。加上初始偏移量90度，得到秒针的旋转角度。

同样地，通过getMinutes方法获取当前分钟数，并计算出分针的旋转角度。

通过getHours方法获取当前小时数，并计算出时针的旋转角度。由于一圈360度对应12小时，所以每小时转动30度。另外，考虑到分针也会对时针产生影响，需要根据当前分钟数的比例调整时针的旋转角度。

最后，在setTime函数中，通过修改元素的style.transform属性来实现指针的旋转效果。

感谢大家的阅读♥

如果想了解更多有用的干货，点赞+收藏 编码不迷茫

转载自:https://juejin.cn/post/7297155636331544613
评论
请登录