JS石英钟实现

来源：互联网发布：淘宝叶罗丽娃娃编辑：程序博客网时间：2024/04/30 20:41

JS石英钟练习

1 概述

随着前端技术的发展，越来越多的H5技术被应用到实际开发中，本章我们介绍一个显示系统时间的石英钟小玩意。

2 效果图如下：

3 主要功能

显示系统时间，

以防不时之需。

适于初学者应用。

4实现方式

首先，我们需要四张图片，分别是表盘，时针，分针，秒针。这些图片大家从网上找素材即可。代码如下，四张照片依次是表盘，秒针，分针，时针。

<body>
<imgclass="img1" id="img1"src="11.png"alt=""/>
<imgclass="img2"id="img2"src="22.png"alt=""/>
<imgclass="img3" id="img3"src="33.png"alt=""/>
<imgclass="img4"id="img4"src="44.png"alt=""/>
</body>

接下来，我们给予四张照片的样式，主要调节，照片的大小，位置等。代码如下。

<style>
    .img1{
        float: left;
    }
    .img2{
        float: left;
        width: 10px;
        position: absolute;
        left: 182px;
        top: 102px;
        z-index:3;
        transform-origin:bottom;

    }
    .img3{
        float: left;
        width: 20px;
        position: absolute;
        left: 177px;
        top: 35px;
        z-index:2;
        transform-origin:bottom;
    }
    .img4{
        float: left;
        width: 15px;
        position: absolute;
        left: 177px;
        top: 104px;
        z-index:1;
        transform-origin:bottom;
    }
</style>

注意，z-index必须有position属性才能使用，目的是控制照片显示前后，数字越大，显示越往上。

接下来，我们就要给予图片的事件了。

setInterval(function(){
    var date=newDate();
    var seconds=date.getSeconds()
    var min=date.getMinutes()
    var hour=date.getHours()
    var img2=document.getElementById("img2");
    var img3=document.getElementById("img3");
    var img4=document.getElementById("img4");
  img2.style.transform="rotate("+(seconds*6)+"deg) ";
  img3.style.transform="rotate("+(min*6+seconds/10)+"deg) "
  img4.style.transform="rotate("+(hour*30+min/2)+"deg) "

},1);

这里给予时针分针秒针定时器，不停地在调用。

var date=newDate();创建date对象，用于处理日期和时间。

注意Date 对象会自动把当前日期和时间保存为其初始值。
var seconds=date.getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
var min=date.getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
var hour=date.getHours()返回 Date 对象的小时 (0 ~ 23)。

  img2.style.transform="rotate("+(seconds*6)+"deg) ";
  img3.style.transform="rotate("+(min*6+seconds/10)+"deg) "
  img4.style.transform="rotate("+(hour*30+min/2)+"deg) "
这里img2是秒针，一秒钟转六度，实时更新，img3是分针，得到当前系统时间后，在加上秒针实时更新的度数，是旋转的更平滑。Img4时针，同理。

5总结

到这简单的石英钟实现就完成了，大家可以找点更好看的图片，使得石英钟更美观，希望大家互相交流，公同进步。

下面给出完整代码：

<!DOCTYPE html>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
    <style>
        .img1{
            float: left;
        }
        .img2{
            float: left;
            width: 10px;
            position: absolute;
            left: 182px;
            top: 102px;
            z-index:3;
            transform-origin:bottom;

        }
        .img3{
            float: left;
            width: 20px;
            position: absolute;
            left: 177px;
            top: 35px;
            z-index:2;
            transform-origin:bottom;
        }
        .img4{
            float: left;
            width: 15px;
            position: absolute;
            left: 177px;
            top: 104px;
            z-index:1;
            transform-origin:bottom;
        }
    </style>
    <script>
        setInterval(function(){
            var date=newDate();
            var seconds=date.getSeconds()
            var min=date.getMinutes()
            var hour=date.getHours()
            var img2=document.getElementById("img2");
            var img3=document.getElementById("img3");
            var img4=document.getElementById("img4");
            img2.style.transform="rotate("+(seconds*6)+"deg) ";
            img3.style.transform="rotate("+(min*6+seconds/10)+"deg) "
            img4.style.transform ="rotate("+(hour*30+min/2)+"deg) "

        },1);
    </script>

</head>
<body>
<imgclass="img1" id="img1"src="11.png"alt=""/>
<imgclass="img2"id="img2"src="22.png"alt=""/>
<imgclass="img3" id="img3"src="33.png"alt=""/>
<imgclass="img4"id="img4"src="44.png"alt=""/>

</body>
</html>

阅读全文

1 0