当前位置：首页 > 学习笔记 > 正文内容

使用Javascript(js)技术实现动态时钟效果

廖万里3年前 (2022-09-09)学习笔记103922

效果图：

代码：

Markup

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            background:url(img/clock.jpg) no-repeat;
            position: relative;
        }
 
        .clock div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
 
        }
 
        .h {
            background:url(img/hour.png) no-repeat center center;
        }
 
        .m {
            background:url(img/minute.png) no-repeat center center;
        }
 
        .s {
            background: url(img/second.png) no-repeat center center;
        }
    </style>
</head>
 
<body>
    <div class="clock">
        <div class="h" id="hour"></div>
        <div class="m" id="minute"></div>
        <div class="s" id="second"></div>
    </div>
</body>
 
</html>
<script>
    var hour = document.getElementById("hour");
    var minute = document.getElementById("minute");
    var second = document.getElementById("second");
    // 定义变量保存 秒、分、时、毫秒
    var s = 0, m = 0, h = 0, ms = 0;
    // 开始定时器
    setInterval(function () {
        // 得到最新的时间
        var date = new Date();
        // 现在的毫秒数
        ms= date.getMilliseconds();
        // 得到秒，如 1.3 s，通过毫秒计算小数位
        s= date.getSeconds()+ms/1000;
        // 得到分钟，如  45.6m，通过秒计算小数位
        m = date.getMinutes()+s/60;
        // 得到小时，如  4.6h，通过分钟计算小数位
        h=date.getHours()%12+m/60;
        // 计算并设置旋转角度
        // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
        second.style.WebkitTransform = "rotate(" + s * 6 + "deg)";
        //  变化旋转deg度
        minute.style.WebkitTransform = "rotate(" + m * 6 + "deg)";
        hour.style.WebkitTransform = "rotate(" + h * 30 + "deg)";
        second.style.MozTransform = "rotate(" + s * 6 + "deg)";
        //  变化旋转de度
        minute.style.MozTransform = "rotate(" + m * 6 + "deg)";
        hour.style.MozTransform = "rotate(" + h * 30 + "deg)";
    }, 100);
</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            background:url(img/clock.jpg) no-repeat;
            position: relative;
        }
 
        .clock div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
 
        }
 
        .h {
            background:url(img/hour.png) no-repeat center center;
        }
 
        .m {
            background:url(img/minute.png) no-repeat center center;
        }
 
        .s {
            background: url(img/second.png) no-repeat center center;
        }
    </style>
</head>
 
<body>
    <div class="clock">
        <div class="h" id="hour"></div>
        <div class="m" id="minute"></div>
        <div class="s" id="second"></div>
    </div>
</body>
 
</html>
<script>
    var hour = document.getElementById("hour");
    var minute = document.getElementById("minute");
    var second = document.getElementById("second");
    // 定义变量保存 秒、分、时、毫秒
    var s = 0, m = 0, h = 0, ms = 0;
    // 开始定时器
    setInterval(function () {
        // 得到最新的时间
        var date = new Date();
        // 现在的毫秒数
        ms= date.getMilliseconds();
        // 得到秒，如 1.3 s，通过毫秒计算小数位
        s= date.getSeconds()+ms/1000;
        // 得到分钟，如  45.6m，通过秒计算小数位
        m = date.getMinutes()+s/60;
        // 得到小时，如  4.6h，通过分钟计算小数位
        h=date.getHours()%12+m/60;
        // 计算并设置旋转角度
        // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
        second.style.WebkitTransform = "rotate(" + s * 6 + "deg)";
        //  变化旋转deg度
        minute.style.WebkitTransform = "rotate(" + m * 6 + "deg)";
        hour.style.WebkitTransform = "rotate(" + h * 30 + "deg)";
        second.style.MozTransform = "rotate(" + s * 6 + "deg)";
        //  变化旋转de度
        minute.style.MozTransform = "rotate(" + m * 6 + "deg)";
        hour.style.MozTransform = "rotate(" + h * 30 + "deg)";
    }, 100);
</script>
	</body>
</html>

复制成功！

图片素材：（请放在img目录下）

时钟（clock.jpg）

使用Javascript(js)技术实现动态时钟效果

时针（hour.png）

使用Javascript(js)技术实现动态时钟效果

分针（minute.png）

使用Javascript(js)技术实现动态时钟效果

秒针（second.png）

使用Javascript(js)技术实现动态时钟效果

本文链接：https://www.kkkliao.cn/?id=14 转载需授权！

阅读剩余的53%

返回列表

上一篇：javascript求数组之和

下一篇：使用js技术制作的贪吃蛇小游戏_贪吃蛇html代码

“使用Javascript(js)技术实现动态时钟效果” 的相关文章

【新手建站教学】服务器如何安装宝塔？宝塔如何部署php项目？

有小白问买了服务器怎么搭建网站，网上找的源码不会安装，想让我写个教学。提前准备：1，一个域名2，一台服务器（使用海外的不需要备案）3，网上找一个或者淘宝买一个网站php的源码4，一名整装待发的小白服务器系统使用最多的有 Linux跟Windows，我比较推荐推荐安装Linux的CentOS系统。如果...

Spring框架提供的多种属性注入方式

1 set注入注入的成员变量必须要封装 set方法注入bean<!--<bean id="u" class="com.bdqn.User"></bean&g...

pyton打包成exe程序简易教程

我们知道，Python程序需要有python环境才能够运行的，但当我们开发出一个程序之后，给到用户那么用户是不会去添加这个python环境的。所以为了用户也能够正常使用，我们就需要将这个程序打包成exe程序。 location.href="https://blog.csd...

python如何连接mysql数据库

python链接mysql数据库要用到pymysql模块中的connect ，connect函数是pymysql模块中用于连接MySQL数据库的一个函数。所以连接mysql之前需要先导入pymysql模块 location.href="ht...

使用Python制作电脑无限弹窗恶搞程序教程

效果如下：编辑演示视频：python弹窗恶搞程序演示视频教程：1，导入模块，下载模块的方法不过多说明了，可以看我其他的文章有说怎么下载第三方模块，或者Alt+Enter下载也可。# 弹窗恶搞import tkinter as tkimp...

Python如何实现多线程，多线程概述

线程：线程是CPU调度的基本单位，是进程中具体的执行单元。进程包含线程，一个进程中至少包含一个线程；如果一个进程中包含了多个线程，称为多线程。多线程的实现：编辑 1，引入threading模块。import threading import time2，编...