JS实现电子时钟入门操作

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

  • 利用JS十分钟判断数组中存在元素的多种方式

    利用JS十分钟判断数组中存在元素的多种方式 在JavaScript中,判断一个数组中是否存在某个元素,是我们经常需要面对的问题。以下是几种实现此功能的方式。 方法一:使用includes()方法 ES6中,可以使用数组的includes()方法来判断是否包含某个元素。 示例代码: const arr = [1, 2, 3]; console.log(arr.…

    JavaScript 2023年5月27日
    00
  • 在React中this容易遇到的问题详解

    在React中this容易遇到的问题详解 在React开发中,this这个关键字非常常用,但同时也很容易引起问题。接下来,本文将详细讲解在React中this容易遇到的问题,并提供相应的解决方法。 问题1:函数调用时this指向问题 在React中,我们一般使用bind绑定this来确保函数中的this指向正确。但是,有时我们会在组件渲染时动态传递数据,这时…

    JavaScript 2023年6月10日
    00
  • 浅谈JSON5解决了JSON的两大痛点

    让我详细地讲解一下“浅谈JSON5解决了JSON的两大痛点”的完整攻略。 背景介绍 首先,让我们来了解一下 JSON5 背后的背景。JSON(JavaScript Object Notation)是一种常用的数据交换格式,用于存储和传输简单和复杂的数据。JSON 这种格式的优点在于它的可读性、易于解析和在 Web 应用程序和 API 中的广泛使用。然而,在实…

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