javascript入门·动态的时钟,显示完整的一些方法,新年倒计时

Javascript入门-动态的时钟

基本思路

实现动态时钟,需要获取当前的时间,根据时分秒分别计算对应的角度,并使用transform指令对时钟的指针进行旋转。

HTML文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态时钟</title>
    <style>
        body {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
        }
        .clock {
            position: relative;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background-color: white;
            overflow: hidden;
            display: flex;
        }
        .hour,.minute,.second {
            position: absolute;
            top:50%;
            left:50%;
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
            transform-origin: bottom center;
        }
        .hour {
            width:60px;
        }
        .minute {
            width: 45px;
        }
        .second {
            width:30px;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
    </div>
</body>
<script src="js/clock.js"></script>
</html>

Javascript文件

function clock() {
    const secElement = document.querySelector('.second');
    const minElement = document.querySelector('.minute');
    const hrElement = document.querySelector('.hour');

    const curTime = new Date();
    const curSec = curTime.getSeconds() * 6;
    const curMin = curTime.getMinutes() * 6 + (curTime.getSeconds() * 6 / 60);
    const curHr = curTime.getHours() % 12 / 12 * 360 + (curTime.getMinutes() * 30 / 60);

    secElement.style.transform = `rotate(${curSec}deg)`;
    minElement.style.transform = `rotate(${curMin}deg)`;
    hrElement.style.transform = `rotate(${curHr}deg)`;
}
setInterval(clock, 1000);

代码解释

  • 首先我们选用querySelector()方法选取相应的DOM元素,从而可以修改DOM的样式。
  • 获取当前时间使用Date()函数,从中获取分别获取当前的小时,分钟和秒数。
  • 将时、分、秒转成相应的角度,然后使用transform属性给每一个指针加上旋转的效果,根据时分秒,将每个指针按照旋转的角度计算出了需要的transform属性值。
  • 使用setInterval()方法,每间隔1秒钟更新一下钟表指针的位置,从而实现动态闪烁效果。

示例一

这是一个网页时钟,每个指针并不会每一秒都转动,而是有一个平滑的运动过程,比较美观。

示例二

代码中我们使用了绝对定位将指针固定到特定的位置,这种方式可以让指针相对于时钟中心不动,从而实现不同样式的指针,使用的方法值得学习。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript入门·动态的时钟,显示完整的一些方法,新年倒计时 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JS实现数组过滤从简单到多条件筛选

    下面是JS实现数组过滤从简单到多条件筛选的完整攻略。 一、简单数组过滤 在JS中,可以使用数组的filter()方法来实现简单的数组过滤。该方法接受一个回调函数作为参数,该回调函数的返回值为true或false,用于决定每个元素是否要留下。 下面是一个简单的示例,演示如何根据指定的条件过滤数组中的元素: const fruits = [‘apple’, ‘b…

    JavaScript 2023年5月27日
    00
  • 浅析script标签中的defer与async属性

    当我们在HTML文档中使用<script>标签引入JavaScript文件时,我们可以为这个标签添加两个重要的属性:defer和async。这两个属性都是为了优化JavaScript的加载和执行,但它们有一些不同之处。下面我们来分别对这两个属性进行详细的解析。 Defer属性 defer属性告诉浏览器,这个脚本将被延迟到页面加载完成后再执行。这意…

    JavaScript 2023年6月10日
    00
  • Javascript数组去重的几种方法详解

    当我们需要对一个JavaScript数组进行去重操作时,常见的有以下几种方法: 方法一:使用Set数据结构 在ES6中,新增了Set数据结构,它类似于数组,但成员的值都唯一,没有重复的值。我们可以通过将数组转化为Set,然后再将Set转化回数组,就可以实现去重操作。示例代码如下: const arr = [1, 2, 3, 2, 1]; const resu…

    JavaScript 2023年5月27日
    00
  • js怎么判断是否是数组的六种方法小结

    下面是详细讲解“js怎么判断是否是数组的六种方法小结”的完整攻略。 标题 js怎么判断是否是数组的六种方法小结 正文 在JavaScript中,有许多方法可以判断一个变量是否是数组。下面是六种判断方法的小结。 方法一:使用instanceof 使用instanceof操作符可以判断变量是否是数组。如果变量是数组,返回true,反之返回false。 示例代码:…

    JavaScript 2023年5月27日
    00
  • js中关于new Object时传参的一些细节分析

    JS中通过new Object()方式创建对象时,可以传入一个参数来初始化对象属性。本文将介绍new Object()时传入参数的一些细节。 1. new Object()传入一个空对象 当new Object()传入一个空对象时,返回的对象与直接使用对象字面量创建对象的效果一样。 const obj1 = new Object({}); const obj…

    JavaScript 2023年6月10日
    00
  • Dwr3.0纯注解(纯Java Code配置)配置与应用浅析二之前端调用后端

    Dwr是一个轻量级的远程调用框架,它可以帮助开发者在前端页面中方便地调用后端Java方法。在Dwr 3.0版本中,提供了完全基于注解的纯Java代码配置方式,这种方式相对于传统的XML配置方式更加简单、易用。 配置DwrServlet 首先,我们需要在web.xml文件中配置DwrServlet: <servlet> <servlet-na…

    JavaScript 2023年5月28日
    00
  • JavaScript 笔记

    JavaScript 简介 JavsScript 于 1995 年由 Brendan Eich 用时 10 天写出,用于网景浏览器。最初的名字叫 LiveScript,也被部分员工称为 Mocha。那时 Java 语言很流行,出于商业化的考量,更名为 JavaScript,但两者之间没有关联。 最早的 JS 作为脚本语言给浏览器增加一些诸如鼠标跟随等交互性特…

    JavaScript 2023年5月7日
    00
  • javascript中定义类的方法汇总

    下面就来为大家详细讲解“JavaScript中定义类的方法汇总”。 一、使用函数定义类 在 JavaScript 中最基本的定义类的方式就是使用函数。函数内部使用 this 关键字绑定属性和方法,最终返回该函数本身,从而构成一个类。 function Person(name, age) { this.name = name; this.age = age; …

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