广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS实现电子时钟入门操作
  • 1023

0
分享到

JS实现电子时钟入门操作

2024-04-02 19:04:59 1023人浏览 泡泡鱼
摘要

本文实例为大家分享了js实现电子时钟入门操作的具体代码，供大家参考，具体内容如下 代码呈上： <!DOCTYPE html> <html lang="en">

本文实例为大家分享了js实现电子时钟入门操作的具体代码，供大家参考，具体内容如下

代码呈上：

<!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>Document</title>
    <style>
        h1{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1></h1>
</body>
<script>
    var h1 = document.getElementsByTagName("h1")[0]  
    function setH1(){
        //获取时间戳
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var riqi = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        //拼接成指定格式
        // var str = year + "/" + month + "/" + riqi + "/" + " " + hour + ":" + minute + ":" + second 
        var str = `${year}/${month}/${riqi} ${hour}:${minute}:${second}`
        //通过innerHTML对标签的内容进行获取或修改
        h1.innerHTML= str;
    }
    //函数的执行
    setH1();
    var timer = setInterval(function(){
        setH1();
    },1000)//每间隔1000毫秒（即1秒钟），执行一次函数function
</script>
</html>

讲解要点：

1.getElementsByTagName返回的是类数组的集合

所以要用[0]来读取元素的值。

var h1 = document.getElementsByTagName("h1")[0] 

2.date.getMonth()得到的是一个介于0到11之间的整数。

所以要执行 +1 操作才能显示正确的月份。

var month = date.getMonth()+1;

效果展示：

 js不仅可以实现电子时钟，也可以实现带有表盘的时钟。

代码呈上：

<!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>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .clock{
            width: 200px;
            height: 200px;
            border: 10px solid lightskyblue;
            border-radius: 50%;
            margin: 0 auto;
            box-shadow: 5px 5px 5px lightgray;
            background-color: #fff;
            position: relative;
        }
        .clock p{
            width: 200px;
            height: 20px;
            
            line-height: 20px;
            position: absolute;
            top: 90px;
        }
        .clock p span{
            display: block; 
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            
        }
        #hour {
            position: absolute;
            transfORM-origin: center bottom;
            width: 6px;
            height: 50px;
            background-color: tomato;
            left: 97px;
            top: 50px;
        }
        #minute {
            position: absolute;
            transform-origin: center bottom;
            width: 4px;
            height: 70px;
            background-color: deepskyblue;
            left: 98px;
            top: 30px;
        }
        #second {
            position: absolute;
            transform-origin: center bottom;
            width: 2px;
            height: 90px;
            background-color: hotpink;
            left: 99px;
            top: 10px;
        }
    </style>
</head>
<body>
    <div class="clock">
        <p><span>1</span></p>
        <p><span>2</span></p>
        <p><span>3</span></p>
        <p><span>4</span></p>
        <p><span>5</span></p>
        <p><span>6</span></p>
        <p><span>7</span></p>
        <p><span>8</span></p>
        <p><span>9</span></p>
        <p><span>10</span></p>
        <p><span>11</span></p>
        <p><span>12</span></p>
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
</body>
<script>
    //获取数字
    var ps = document.getElementsByTagName("p");
    //获取三个表针
    var dHour = document.getElementById("hour");
    var dMinute = document.getElementById("minute");
    var dSecond = document.getElementById("second");
    //设置定时器
    var timer = null;
    //设置数字的位置
    function setNums(){
        for (var i=0;i<ps.length; i++){
            ps[i].style.transform = `rotate(${120 + i*30}deg)`;
            //获取p下边的span标签}
            var span = ps[i].getElementsByTagName("span")[0];
             span.style.transform = `rotate(${((120 + i*30)*-1)}deg`;
        }
    }
    setNums();
    //开启定时器
    // timer = setInterval(function(){},1000)   每1000毫秒执行一次function（）
    timer = setInterval(function(){
        changeZhen();
    },1000)
 
    //获取时间戳
    function changeZhen(){
        var date = new Date();
        var s = date.getSeconds();
        var m = date.getMinutes() + s/60;
        var h = date.getHours() + m/60;
 
        dSecond.style.transform = `rotate(${s * 6}deg)`;
        dMinute.style.transform = `rotate(${m * 6}deg)`;
        dHour.style.transform = `rotate(${h * 30}deg)`;
    }
</script>
</html>

讲解要点：

1.实现思路

表盘：首先用border-radius构造一个圆框，接着用12个p标签承载12个span标签并旋转p标签，由于旋转后，数字方向不正确，所以将span标签的类型改为块标签后，通过旋转改正各数字的方向。

表针：用三个矩形分别代表时针、分针和秒针，通过js函数实现他们在规定时间内旋转的角度。

2.行标签不支持旋转

所以要将span标签改为块标签后再使用旋转。

.clock p span{
            display: block; 
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            
        }

3.表盘的指针除整点外都不是正好指向时间点的。

所以要对分针和时针进行这样的操作：

var m = date.getMinutes() + s/60;
var h = date.getHours() + m/60;

4.注意更改时针、分针和秒针的旋转点

transform-origin: center bottom;

效果展示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JS实现电子时钟入门操作

本文链接: https://www.lsjlt.com/news/151933.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • JS实现电子时钟入门操作
    本文实例为大家分享了JS实现电子时钟入门操作的具体代码，供大家参考，具体内容如下 代码呈上： <!DOCTYPE html> <html lang="en">...
    99+
    2022-11-13
  • js实现电子时钟效果
    本文实例为大家分享了js实现电子时钟效果的具体代码，供大家参考，具体内容如下 代码区域 代码如下（示例）： <!DOCTYPE html> <html lang="...
    99+
    2022-11-13
  • 原生js实现电子时钟
    本文实例为大家分享了js实现电子时钟的具体代码，供大家参考，具体内容如下 index.html <!DOCTYPE html> <html lang="en"&g...
    99+
    2022-11-13
  • js实现电子时钟功能
    电子时钟是网上常见的功能，在学习date对象和定时器功能时，来完成一个电子时钟的制作是不错的选择。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascrip...
    99+
    2022-11-13
  • js+html+css实现简单电子时钟
    本文实例为大家分享了js+html+css实现简单电子时钟的具体代码，供大家参考，具体内容如下 最终结果： HTML部分 <!DOCTYPE html> <htm...
    99+
    2022-11-13
  • js如何实现电子时钟效果
    本篇内容主要讲解“js如何实现电子时钟效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“js如何实现电子时钟效果”吧!代码如下（示例）：<!DOCTYPE html><...
    99+
    2023-07-02
  • js怎么实现电子时钟功能
    这篇“js怎么实现电子时钟功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“js怎么实现电子时钟功能”文章吧。先准备一个ht...
    99+
    2023-07-02
  • 怎么使用JS实现电子时钟
    本篇内容介绍了“怎么使用JS实现电子时钟”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！代码呈上：<!DOCTYPE html...
    99+
    2023-07-02
  • 怎么用原生js实现电子时钟
    这篇文章主要介绍“怎么用原生js实现电子时钟”，在日常操作中，相信很多人在怎么用原生js实现电子时钟问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用原生js实现电子时钟”的疑惑有所帮助！接下来，请跟着小编...
    99+
    2023-07-02
  • QT5实现电子时钟
    本文实例为大家分享了QT5实现电子时钟的具体代码，供大家参考，具体内容如下 一、电子时钟的显示 效果如下： 电子时钟显示 二、新建工程 Widgets Application项目名...
    99+
    2022-11-13
  • Qt实现电子时钟
    本文实例为大家分享了Qt实现电子时钟的具体代码，供大家参考，具体内容如下 进一步认识Qt中的属性，我们现在再做一个小练习，去实现一个简易版电子时钟的效果。 效果展示： 新建项目： ...
    99+
    2022-11-13
  • JavaScript实现网页电子时钟
    本文实例为大家分享了JavaScript实现网页电子时钟的具体代码，供大家参考，具体内容如下 如图就是一个简易的网页电子时钟，利用Javascript和 html和 css就可以制...
    99+
    2022-11-13
  • C++实现电子时钟效果
    本文实例为大家分享了C++实现电子时钟的具体代码，供大家参考，具体内容如下 此精确到秒，因为有精度误差加上从计算机获取初始时间时处理比较简单，因此运行一段时间会出现较大的误差。 代码...
    99+
    2022-11-13
  • JavaScript实现页面电子时钟
    本文实例为大家分享了JavaScript实现页面电子时钟的具体代码，供大家参考，具体内容如下 题目：页面上有一个电子时钟，显示当前的年月日，时分秒，要求自动变化，双位显示，例如：九点...
    99+
    2022-11-13
  • vue实现电子时钟效果
    本文实例为大家分享了vue实现电子时钟的具体代码，供大家参考，具体内容如下 html <div class="dateBox">       <div class...
    99+
    2022-11-13
  • Qt怎么实现电子时钟
    今天小编给大家分享一下Qt怎么实现电子时钟的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。一、项目介绍利用Qt实现显示与桌面上...
    99+
    2023-07-02
  • C++怎么实现电子时钟效果
    今天小编给大家分享一下C++怎么实现电子时钟效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。此精确到秒，因为有精度误差加上...
    99+
    2023-06-30
  • JavaScript如何实现页面电子时钟
    这篇文章主要介绍了JavaScript如何实现页面电子时钟的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript如何实现页面电子时钟文章都会有所收获，下面我们一起来看看吧。题目：页面上有一个电子时钟...
    99+
    2023-07-02
  • Python入门——实现简易数码时钟
    最近迷上了Python，要说为什么呢？Python语法简单，功能强大，有广泛的第三方库能快速编程实现自己的想法（无需重复去造轮子）。就像某位前辈说的：“人生苦短，学会偷懒…”，配置好sublime text照着网上教程直接上手写个小程序入...
    99+
    2023-01-31
    时钟 简易 入门
  • Qt实现电子时钟的示例代码
    目录一、项目介绍二、项目基本配置三、UI界面设计四、主程序实现4.1 添加新文件4.2 digiclock.h头文件4.3 digiclock.cpp源文件4.4 main.cpp源...
    99+
    2022-11-13
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作