初学JS:用代码感受时间

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

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

1.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及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 复制代码

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触发一次，让时针、分针、秒针以当前时间计算出的角度来进行偏转。最后，一个精美的时钟就做好了。