炫酷的HTML5时钟代码示例 - 使用CSS和JavaScript实现

很高兴为您提供这个项目，这是一个用HTML5、CSS和JavaScript编写的炫酷时钟。

HTML部分：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Cool Clock</title>
    <link rel='stylesheet' href='style.css'>
</head>
<body>
    <div class='clock'>
        <div class='hour'>
            <div class='hr' id='hr'></div>
        </div>
        <div class='min'>
            <div class='mn' id='mn'></div>
        </div>
        <div class='sec'>
            <div class='sc' id='sc'></div>
        </div>
    </div>

    <script src='script.js'></script>
</body>
</html>

CSS部分：

body {
    background-color: #000;
}

.clock {
    width: 200px;
    height: 200px;
    background-color: #fff;
    border-radius: 50%;
    margin: 50px auto;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.hour,
.min,
.sec {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.hr {
    width: 4px;
    height: 40px;
    background-color: #000;
    position: absolute;
    top: 10px;
    left: 48px;
    transform-origin: bottom center;
    transform: rotate(30deg);
}

.mn {
    width: 4px;
    height: 60px;
    background-color: #000;
    position: absolute;
    top: 10px;
    left: 48px;
    transform-origin: bottom center;
    transform: rotate(60deg);
}

.sc {
    width: 2px;
    height: 80px;
    background-color: #f00;
    position: absolute;
    top: 10px;
    left: 49px;
    transform-origin: bottom center;
    transform: rotate(90deg);
    animation: rotate 60s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(450deg);
    }
}

JavaScript部分：

function clock() {
    const fullDate = new Date();
    let hours = fullDate.getHours();
    let mins = fullDate.getMinutes();
    let secs = fullDate.getSeconds();

    if (hours < 10) {
        hours = '0' + hours;
    }
    if (mins < 10) {
        mins = '0' + mins;
    }
    if (secs < 10) {
        secs = '0' + secs;
    }

    document.getElementById('hr').style.transform = `rotateZ(${hours * 30}deg)`;
    document.getElementById('mn').style.transform = `rotateZ(${mins * 6}deg)`;
    document.getElementById('sc').style.transform = `rotateZ(${secs * 6}deg)`;
}

setInterval(clock, 1000);

这个时钟由一个白色的圆形背景组成，上面有三个黑色的指针，分别代表时针、分针和秒针。秒针是红色的，每秒钟会旋转一圈。时针、分针和秒针的角度根据当前时间计算得出，并通过JavaScript代码实现旋转。

希望这个项目对您有所帮助！