1. Python技术站首页
  2. 其他
  3. JavaScript

JS实现电子时钟入门操作

• JavaScript

JS实现电子时钟是前端开发中一个常见的功能，下面我来为大家介绍一下实现步骤：

步骤一：创建HTML结构

首先需要建立html结构，在标签内添加一个

标签用来存放时钟显示的部分，同时还需要使用CSS样式对时钟进行美化。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS电子时钟</title>
    <style type="text/css">
        .clock {
            width: 400px;
            height: 400px;
            margin: auto;
            position: relative;
            background-color: #fff;
            box-shadow: 0 0 30px #888;
            border-radius: 50%;
        }
        .hour-hand, .minute-hand, .second-hand {
            position: absolute;
            background-color: #000;
            border-radius: 2px;
            transform-origin: 50% 100%;
            box-shadow: 0 0 5px #888;
        }
        .hour-hand {
            width: 12px;
            height: 100px;
            top: 100px;
            left: 194px;
            transform: rotate(60deg);
        }
        .minute-hand {
            width: 8px;
            height: 130px;
            top: 90px;
            left: 196px;
            transform: rotate(50deg);
        }
        .second-hand {
            width: 4px;
            height: 150px;
            top: 80px;
            left: 198px;
            transform: rotate(13deg);
        }
        .numbers {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .numbers span {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
            color: #000;
        }
        .numbers span:nth-child(1) {
            transform: rotate(30deg) translate(135px) rotate(-30deg);
        }
        .numbers span:nth-child(2) {
            transform: rotate(60deg) translate(135px) rotate(-60deg);
        }
        .numbers span:nth-child(3) {
            transform: rotate(90deg) translate(135px) rotate(-90deg);
        }
        .numbers span:nth-child(4) {
            transform: rotate(120deg) translate(135px) rotate(-120deg);
        }
        .numbers span:nth-child(5) {
            transform: rotate(150deg) translate(135px) rotate(-150deg);
        }
        .numbers span:nth-child(6) {
            transform: rotate(180deg) translate(135px) rotate(-180deg);
        }
        .numbers span:nth-child(7) {
            transform: rotate(210deg) translate(135px) rotate(-210deg);
        }
        .numbers span:nth-child(8) {
            transform: rotate(240deg) translate(135px) rotate(-240deg);
        }
        .numbers span:nth-child(9) {
            transform: rotate(270deg) translate(135px) rotate(-270deg);
        }
        .numbers span:nth-child(10) {
            transform: rotate(300deg) translate(135px) rotate(-300deg);
        }
        .numbers span:nth-child(11) {
            transform: rotate(330deg) translate(135px) rotate(-330deg);
        }
        .numbers span:nth-child(12) {
            transform: rotate(0deg) translate(135px) rotate(0deg);
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="hour-hand"></div>
        <div class="minute-hand"></div>
        <div class="second-hand"></div>
        <div class="numbers">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>10</span>
            <span>11</span>
            <span>12</span>
        </div>
    </div>
</body>
</html>

步骤二：获取当前时间

可以使用Date()函数获取当前时间，如下代码：

var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();

步骤三：计算指针位移

用当前时间计算出时分秒指针的偏移角度，因为一共60秒， 一圈360度，所以每一秒指针转动的角度为6度，同样地，每一分钟指针转动的角度为6度，每一小时指针转动的角度为30度。用转盘度数来计算时针、分针、秒针的示例代码如下：

// 计算时针、分针、秒针的偏移角度
var hourAngle = (hour % 12) * 30 + minute / 60 * 30;
var minuteAngle = minute * 6;
var secondAngle = second * 6;

步骤四：指针位置回归

如果不加特殊处理，指针会在一直转圈圈，所以我们需要把指针的起始角度设置为起始时间，在起始时间的基础上不断叠加，不过针对处理时针的偏移角度可以在每小时加上30度，如下代码所示：

// 回归起始角度
hourAngle = hourAngle + minute / 60 * 30;
minuteAngle = minuteAngle + second / 60 * 6;

步骤五：指针转动效果实现

通过CSS中的transform属性，可以使时针、分针、秒针实现顺时针转动效果，示例代码如下：

// 旋转指针
document.querySelector('.hour-hand').style.transform = 'rotate(' + hourAngle + 'deg)';
document.querySelector('.minute-hand').style.transform = 'rotate(' + minuteAngle + 'deg)';
document.querySelector('.second-hand').style.transform = 'rotate(' + secondAngle + 'deg)';

至此，JS电子时钟制作完成。

以下是完整的代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS电子时钟</title>
    <style type="text/css">
        .clock {
            width: 400px;
            height: 400px;
            margin: auto;
            position: relative;
            background-color: #fff;
            box-shadow: 0 0 30px #888;
            border-radius: 50%;
        }
        .hour-hand, .minute-hand, .second-hand {
            position: absolute;
            background-color: #000;
            border-radius: 2px;
            transform-origin: 50% 100%;
            box-shadow: 0 0 5px #888;
        }
        .hour-hand {
            width: 12px;
            height: 100px;
            top: 100px;
            left: 194px;
            transform: rotate(60deg);
        }
        .minute-hand {
            width: 8px;
            height: 130px;
            top: 90px;
            left: 196px;
            transform: rotate(50deg);
        }
        .second-hand {
            width: 4px;
            height: 150px;
            top: 80px;
            left: 198px;
            transform: rotate(13deg);
        }
        .numbers {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .numbers span {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
            color: #000;
        }
        .numbers span:nth-child(1) {
            transform: rotate(30deg) translate(135px) rotate(-30deg);
        }
        .numbers span:nth-child(2) {
            transform: rotate(60deg) translate(135px) rotate(-60deg);
        }
        .numbers span:nth-child(3) {
            transform: rotate(90deg) translate(135px) rotate(-90deg);
        }
        .numbers span:nth-child(4) {
            transform: rotate(120deg) translate(135px) rotate(-120deg);
        }
        .numbers span:nth-child(5) {
            transform: rotate(150deg) translate(135px) rotate(-150deg);
        }
        .numbers span:nth-child(6) {
            transform: rotate(180deg) translate(135px) rotate(-180deg);
        }
        .numbers span:nth-child(7) {
            transform: rotate(210deg) translate(135px) rotate(-210deg);
        }
        .numbers span:nth-child(8) {
            transform: rotate(240deg) translate(135px) rotate(-240deg);
        }
        .numbers span:nth-child(9) {
            transform: rotate(270deg) translate(135px) rotate(-270deg);
        }
        .numbers span:nth-child(10) {
            transform: rotate(300deg) translate(135px) rotate(-300deg);
        }
        .numbers span:nth-child(11) {
            transform: rotate(330deg) translate(135px) rotate(-330deg);
        }
        .numbers span:nth-child(12) {
            transform: rotate(0deg) translate(135px) rotate(0deg);
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="hour-hand"></div>
        <div class="minute-hand"></div>
        <div class="second-hand"></div>
        <div class="numbers">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>10</span>
            <span>11</span>
            <span>12</span>
        </div>
    </div>

    <script type="text/javascript">
        // 获取当前时间
        function clock() {
            var now = new Date();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();

            // 计算时针、分针、秒针的偏移角度
            var hourAngle = (hour % 12) * 30 + minute / 60 * 30;
            var minuteAngle = minute * 6;
            var secondAngle = second * 6;

            // 回归起始角度
            hourAngle = hourAngle + minute / 60 * 30;
            minuteAngle = minuteAngle + second / 60 * 6;

            // 旋转指针
            document.querySelector('.hour-hand').style.transform = 'rotate(' + hourAngle + 'deg)';
            document.querySelector('.minute-hand').style.transform = 'rotate(' + minuteAngle + 'deg)';
            document.querySelector('.second-hand').style.transform = 'rotate(' + secondAngle + 'deg)';
        }

        setInterval(clock, 1000);
    </script>
</body>
</html>

以上代码可以直接复制到文件中运行，即可看到完整的电子时钟展现，同时可以根据需求进行进一步的调整和美化。

示例一：实现电子时钟中刻度部分的数字实现

<div class="clock">
    <!-- 省略时针、分针、秒针部分HTML内容 -->

    <div class="numbers">
        <span id="number-1"></span>
        <span id="number-2"></span>
        <span id="number-3"></span>
        <span id="number-4"></span>
        <span id="number-5"></span>
        <span id="number-6"></span>
        <span id="number-7"></span>
        <span id="number-8"></span>
        <span id="number-9"></span>
        <span id="number-10"></span>
        <span id="number-11"></span>
        <span id="number-12"></span>
    </div>
</div>

<script type="text/javascript">
    // 获取当前时间
    function clock() {
        var now = new Date();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();

        // 计算时针、分针、秒针的偏移角度
        var hourAngle = (hour % 12) * 30 + minute / 60 * 30;
        var minuteAngle = minute * 6;
        var secondAngle = second * 6;

        // 回归起始角度
        hourAngle = hourAngle + minute / 60 * 30;
        minuteAngle = minuteAngle + second / 60 * 6;

        // 旋转指针
        document.querySelector('.hour-hand').style.transform = 'rotate(' + hourAngle + 'deg)';
        document.querySelector('.minute-hand').style.transform = 'rotate(' + minuteAngle + 'deg)';
        document.querySelector('.second-hand').style.transform = 'rotate(' + secondAngle + 'deg)';

        // 显示时间数字
        document.querySelector('#number-1').textContent = hour == 12 ? 12 : hour % 12;
        document.querySelector('#number-2').textContent = hour >= 11 || hour < 1 ? hour - 1 + 12 : hour - 1;
        document.querySelector('#number-3').textContent = hour >= 10 || hour < 2 ? hour - 2 + 12 : hour - 2;
        document.querySelector('#number-4').textContent = hour >= 9 || hour < 3 ? hour - 3 + 12 : hour - 3;
        document.querySelector('#number-5').textContent = hour >= 8 || hour < 4 ? hour - 4 + 12 : hour - 4;
        document.querySelector('#number-6').textContent = hour >= 7 || hour < 5 ? hour - 5 + 12 : hour - 5;
        document.querySelector('#number-7').textContent = hour >= 6 || hour < 6 ? hour - 6 + 12 : hour - 6;
        document.querySelector('#number-8').textContent = hour >= 5 || hour < 7 ? hour - 7 + 12 : hour - 7;
        document.querySelector('#number-9').textContent = hour >= 4 || hour < 8 ? hour - 8 + 12 : hour - 8;
        document.querySelector('#number-10').textContent = hour >= 3 || hour < 9 ? hour - 9 + 12 : hour - 9;
        document.querySelector('#number-11').textContent = hour >= 2 || hour < 10 ? hour - 10 + 12 : hour - 10;
        document.querySelector('#number-12').textContent = hour >= 1 || hour < 11 ? hour - 11 + 12 : hour - 11;
    }

    setInterval(clock, 1000);
</script>

以上示例将电子时钟中的刻度数字实现了，使用了Js的条件运算符? :，因此容易看懂，同时具有一定的参考意义。

示例二：实现电子时钟中液晶显示屏上的时间和日期信息展示

```html

  • JavaScript 条件判断使用技巧详解

    JavaScript 条件判断使用技巧详解 在 JavaScript 中，条件判断是非常常用的语法，它决定着程序的流程。本篇文章将详细讲述 JavaScript 条件判断使用技巧，主要包括以下三个部分： if、else、else if 的使用 三元表达式的使用 switch 语句的使用 if、else、else if 的使用 if 语句是最基本的条件语句，它…

    JavaScript 2023年5月18日
    00

  • JS实现十分钟倒计时代码实例

    下面是详细讲解“JS实现十分钟倒计时代码实例”的完整攻略。 一、需求分析 首先，我们需要明确需求：实现一个倒计时功能，从10分钟开始倒计时，并在倒计时结束时触发一段特定的操作。 二、技术选型 接下来，我们需要选型。考虑到要实现一个网页上的倒计时，我们选用JavaScript作为主要开发语言，并采用HTML和CSS作为配套技术。 三、代码实现 首先，在HTML…

    JavaScript 2023年5月27日
    00
    • 合作推广
    合作推广
    分享本页
    返回顶部