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

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

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

效果图:

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

代码:

<!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 转载需授权!

分享到:

版权声明:本文由廖万里的博客发布,如需转载请注明出处。


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

黑客必备的Kali Linux是什么,有哪些弊端?

黑客必备的Kali Linux是什么,有哪些弊端?

我们很多人都会对黑客感兴趣,甚至觉得黑客霸气外漏,当然也有人是觉得黑客是遭人唾弃,没干啥好事儿。先不管黑客这个职业有什么好与不好,我们了解黑客,也是为了防止自己的信息安全被泄露。今天就揭秘黑客常用的Kali Linux。Kali Linux到底是什么?Kali Linux是一个基于Debian的Li...

Python所有的库都在这里了!!强烈建议收藏

Python所有的库都在这里了!!强烈建议收藏

前言嗨喽,大家好呀~又到了学Python时刻~随着大数据和人工智能的发展,Python也与多种科技深深绑定。比如自动化测试,运维,爬虫,数据分析,机器学习,金融领域,后端开发,云计算,游戏开发都有涉及。万丈高楼平地起,Python这座大厦能够如此强大,就是拥有强大的成千上万的库的支持无数牛x的轮子在...

如何配置mybatis并且自动生成实体类pojo和mapper

如何配置mybatis并且自动生成实体类pojo和mapper

1如何配置mybatis1.1 复制jar 点击下载mybatis和mysql的jar包:mybatis和mysql的jar包 - 万策云盘编辑1.2 复制配置文件 resources配置文件下载: resources配置文件 - 万策云盘编辑1.3...

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

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

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

pyton打包成exe程序简易教程

pyton打包成exe程序简易教程

 我们知道,Python程序需要有python环境才能够运行的,但当我们开发出一个程序之后,给到用户 那么用户是不会去添加这个python环境的。所以为了用户也能够正常使用,我们就需要将这个程序打包成exe程序。1.打包之前需要先下载一个模块:pyinstaller方法一:pip包安装:因...

socket概述 python中如何使用TCP/UDP协议实现通信-教程

socket概述 python中如何使用TCP/UDP协议实现通信-教程

 很多编程语言中,都使用scoket套接字实现网络通信。Socket是对TCP/IP协议的封装,Socket本身就是一个调用接口(API),方便程序员用Socket使用TCP/IP协议簇,实现网络通信。不同编程语言,shiyongSocket通信的语法有所区别,但基本原理类型相似。它的两种...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。