初学JS:用代码感受时间


highlight: agate

如今人们的生活已与代码密切不分,可以说入眼所见皆有代码背后“作祟”。早上起床,耳边是手机闹铃,这是代码根据你的意愿产生的,打开手机看看时间,这是代码根据你所选择的时区为你提供的最准确的时间,等等。代码可以为你做很多事,但使用它来写出所想要的功能,这就需要专业技术,而如果你没有时间学习,这就需要程序员来帮助,而前端则是让你能更方便的使用由代码所编写出的功能。

JavaScript是前端学习不可避免的一项技术,html与css可以让你的想法有形,js可以让形有生,这里我来编写一个传统时钟,它的主要部分有html、css、以及最重要的js三部分构成

1.html部分


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">


<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>

这里是一个简单的页面设置,并且引入了css及js的设置,它有外表盘、四根刻度线、里表盘、时针、分针、秒针这些元素组成,接下来对这些元素进行一些设置

2.css部分

    margin: 0;
    padding: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.clock{
    width: 300px;
    height: 300px;
    border: 7px solid #ffebdb;
    border-radius: 50%;
    background-image: url(./Image_1715598291159.jpg);
    background-size: 111%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 20px;
}
.outer-clock-face{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: relative;
}
.marking{
    width: 3px;
    height: 100%;
    background-color:#596235;
    position: absolute;
    left: 50%;
    margin-left: -1.5px;
    border-radius: 8px;
    transform-origin: 50% 50%;
}
.marking-one{
    transform: rotateZ(30deg);
}
.marking-two{
    transform: rotateZ(60deg);
}
.marking-three{
    transform: rotate(120deg);
}
.marking-four{
    transform: rotate(150deg);
}
.outer-clock-face::before,
.outer-clock-face::after{
    content: '';
    width: 10px;
    height: 100%;
    background-color:#596235;
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border-radius: 8px;
}
.outer-clock-face::after{
    transform: rotateZ(90deg);
}
.inner-clock-face{
    width: 80%;
    height: 80%;
    border-radius: 100%;
    background-color: #ffebdb;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-image: url(./Image_1715598291159.jpg);
    background-size: 150%;
    background-position: center center;

}
.hand{
width: 30%;
height: 6px;
background-color:#b03715;
position: absolute;
top: 50%;
right: 50%;
border-radius: 6px;
margin-top: -3px;
transform: rotate(90deg);
transform-origin: 100% 50%;
}
.second-hand{
width: 45%;
height: 2px;
margin-top: -1px;
background-color: #b3b3b3;
}
.min-hand{
width: 45%;
background-color: #000000;
}
.hour-hand{
background-color: #000000;
}

这里是对哪些元素进行的一些设置,使这些元素构成了表的样子,并且以我的图片作为背景图片

最后为这个时钟注入灵魂

3.js部分

var minHand = document.querySelector('.min-hand')
var hourHand = document.querySelector('.hour-hand')

function setDate(){
//get当前时间
var now = new Date()

//读秒
var seconds= now.getSeconds()

//计算旋转角度
var secondDeg=((seconds / 60) * 360) + 90

//set秒针角度
secondHand.style.transform = `rotate(${secondDeg}deg)`

//读分
var mins= now.getMinutes()

//计算旋转角度
var minsDeg=((mins / 60) * 360 + (seconds / 60)* 6 ) + 90

//set秒针角度
minHand.style.transform = `rotate(${minsDeg}deg)`

//读时
var hours= now.getHours()

//计算旋转角度
var hoursDeg=((hours / 12) * 360 + (mins / 60)* 30 + (seconds / 60) * 0.5) + 90

//set秒针角度
hourHand.style.transform = `rotate(${hoursDeg}deg)`

}

setInterval(setDate,1000);

最后其实仅仅只是加了一个触发器,使setDate这个函数每1000ms触发一次,让时针、分针、秒针以当前时间计算出的角度来进行偏转。最后,一个精美的时钟就做好了。


这是一个从 https://juejin.cn/post/7368662452529922075 下的原始话题分离的讨论话题