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

使用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)技术实现动态时钟效果” 的相关文章

在javaweb项目中进行MD5加密

加密的java类:MD5keyBean.javapackage cn.itcast.elec.util;   /******************************************************************************* &...

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

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

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

在mybatis中使用mysql存储过程-教学

在mybatis中使用mysql存储过程-教学

mysql  存储过程 ,教程来源:廖万里的CSDNMysql中的方法, 好处:安全,复用。缺点:不利于修改。1,将以下储存过程代码复制到mysql数据库中进行执行DELIMITER ;;CREATE DEFINER=`root`@`localhost`&nb...

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

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

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

如何在程序中实现多进程,多进程概述

如何在程序中实现多进程,多进程概述

 多进程:在一个程序中实现多任务处理,可以使用多线程和多进程两种方式。多进程创建:使用Process、类,每次实例化这个类的时候,就创建一个进程对象。编辑 多进程:一个程序运行中,产生了多个进程。N个正在运行的程序----至少N个程序1个程序------可能只有一个进程/也可能有...

pyton打包成exe程序简易教程

pyton打包成exe程序简易教程

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

发表评论

访客

看不清,换一张

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