這個網頁設計專案會介紹如何用HTML, CSS, JavaScript來設計出一個l時鐘

html程式碼

<!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>Analog Clock</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="clock">

            <div class="hour hr1">1</div>
            <div class="hour hr2">2</div>
            <div class="hour hr3">3</div>
            <div class="hour hr4">4</div>
            <div class="hour hr5">5</div>
            <div class="hour hr6">6</div>
            <div class="hour hr7">7</div>
            <div class="hour hr8">8</div>
            <div class="hour hr9">9</div>
            <div class="hour hr10">10</div>
            <div class="hour hr11">11</div>
            <div class="hour hr12">12</div>
            <div class="point"></div>
            <div class="hand hour-hand" id="hour-hand" data-hour-hand></div>
            <div class="hand minute-hand" id="minute-hand" data-minute-hand></div>
            <div class="hand second-hand" id="second-hand" data-second-hand></div>

        </div>
    </div>

</body>
<script src="script.js"></script>

</html>

JS 程式碼


setInterval(setClock, 1000)

const hourHand = document.querySelector('[data-hour-hand]')
const minuteHand = document.querySelector('[data-minute-hand]')
const secondHand = document.querySelector('[data-second-hand]')

function setClock() {
    const currentDate = new Date()
    const secondsRatio = currentDate.getSeconds() / 60
    const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60
    const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
    setRotation(secondHand, secondsRatio)
    setRotation(minuteHand, minutesRatio)
    setRotation(hourHand, hoursRatio)
}

function setRotation(element, rotationRatio) {
    element.style.setProperty('--rotation', rotationRatio * 360)
}

setClock()

CSS 程式碼

body {
    background-color: rgb(69, 69, 69);
}

.clock {
    width: 500px;
    height: 500px;
    background-color: rgb(0, 252, 177);
    border: 10px solid rgba(0, 232, 124, 0.904);
    border-radius: 50%;
    margin-bottom: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.clock .hour {
    font-family: sans-serif;
    font-size: 70px;
    font-weight: bold;
    color: white;
    position: absolute;
    /* width: 100%;
    height: 100%;
    text-align: center; */
    /* --rotation: 0;
    transform: rotate(var(--rotation)); */
    z-index: 12;
}

.point {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 240px;
    left: 240px;
    z-index: 110;
}


/* .clock .hr1 {
    --rotation: 30deg;
}

.clock .hr2 {
    --rotation: 60deg;
}

.clock .hr3 {
    --rotation: 90deg;
}

.clock .hr4 {
    --rotation: 120deg;
}

.clock .hr5 {
    --rotation: 150deg;
}

.clock .hr6 {
    --rotation: 180deg;
}

.clock .hr7 {
    --rotation: 210deg;
}

.clock .hr8 {
    --rotation: 240deg;
}

.clock .hr9 {
    --rotation: 270deg;
}

.clock .hr10 {
    --rotation: 300deg;
}

.clock .hr11 {
    --rotation: 330deg;
}

.clock .hr12 {
    --rotation: 360deg;
} */

.hr1 {
    top: 8%;
    right: 22%;
}

.hr2 {
    top: 110px;
    right: 40px;
}

.hr3 {
    top: 210px;
    right: 10px;
}

.hr4 {
    top: 320px;
    right: 40px;
}

.hr5 {
    top: 410px;
    right: 120px;
}

.hr6 {
    top: 430px;
    right: 230px;
}

.hr7 {
    bottom: 20px;
    right: 340px;
}

.hr8 {
    top: 320px;
    right: 420px;
}

.hr9 {
    top: 210px;
    right: 450px;
}

.hr10 {
    top: 110px;
    right: 380px;
}

.hr11 {
    top: 30px;
    right: 310px;
}

.hr12 {
    top: 10px;
    right: 210px;
}

.clock .hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    background-color: black;
    transform: translateX(-50%);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    /* 從底部來轉 */
    transform-origin: bottom;
    --rotation: 0;
    transform: rotate(calc(var(--rotation)*1deg));
    z-index: 1;
}

.clock .second-hand {
    left: 49.5%;
    width: 3px;
    height: 45%;
    background-color: rgb(255, 255, 255);
}

.clock .minute-hand {
    left: 49.2%;
    width: 6px;
    height: 34%;
    background-color: rgb(255, 255, 255);
}

.clock .hour-hand {
    left: 49.5%;
    width: 9px;
    height: 28%;
    background-color: rgb(244, 244, 244);
}


/* .minute-hand {
    width: 6px;
    height: 170px;
    border-radius: 10px;
    background-color: white;
    position: absolute;
    left: 247px;
    top: 80px;
}

.hour-hand {
    width: 10px;
    height: 140px;
    border-radius: 10px;
    background-color: rgb(169, 169, 169);
    position: absolute;
    left: 245px;
    top: 110px;
} */

.container {
    width: 580px;
    height: 580px;
    background-color: ivory;
    padding: 0px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
}

發表迴響