用javascript和css写简单的网页钟表

最新推荐文章于 2023-08-21 11:10:52 发布

会钓猫的鱼

最新推荐文章于 2023-08-21 11:10:52 发布

阅读量335

点赞数 1

分类专栏： javascript 文章标签： css javascript html

本文链接：https://blog.csdn.net/qq_43936346/article/details/106793300

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用javascript和css写简单的网页钟表

一.首先需要表示时针，分针和秒针。
有的人可能这样想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wrong</title>
    <style>
        .hour{
            width: 4px;
            height: 400px;
            background-color: red;
            margin: 0px auto;
            transform: rotateZ(30deg);
        }
    </style>
</head>
<body>
    <div class="hour"></div>
</body>
</html>

运行结果如图
如果是这样的话，我们会发现表针的转动是围绕杆的中心，不符合钟表转动的原理。因此这种表示表针的方法不可取。
所以我们可以将表针放在正方形容器中，高度是正方形的一半，这样的话，就可以达到钟表的效果。
在这里插入图片描述
二.设置钟表的基本样式

根据指针长短的不同，设置不同的高度宽度

此时样式构造就已经完成。

三.利用JS让钟表获取当前计算机的时间，并且让其转起来。

到这一步，基本上已经完成了。
在这里插入图片描述
下面是源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clock</title>
    <style>
        /*去掉默认样式*/
        *{
            margin: 0px;
            padding: 0px;
        }       
        /*
            设置表盘的宽和高，
            让表盘居中，
            开启相对定位，
            引入钟表表盘图片（这个根据个人喜好自己在网上下载),
            图片全覆盖背景。
        */     
        .clock{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            margin-top: 100px;
            border-radius: 50%;     
            position: relative;
            background-image: url('./33.jpg');
            background-size: cover;
        }
        /*
        对clock下的所有子元素开启绝对定位，并居中。
        */
        .clock>div{
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;

        }
        .hour-wrapper{
            height: 70%;
            width: 70%;
            transform:rotateZ(0deg);

        }
        .hour{
            height: 50%;
            width: 6px;
            background-color: black;
            margin: 0 auto;
        }
        .minute-wrapper{
            height: 80%;
            width: 80%;
            transform: rotateZ(0deg);
        }
        .minute{
            height: 50%;
            width: 4px;
            background-color: black;
            margin: 0 auto;
        }
        .second-wrapper{
            width: 95%;
            height: 95%;
            transform: rotateZ(0deg);
        }
        .second{
            height: 50%;
            width: 2px;
            background-color: red;
            margin: 0 auto;
        }
       
    </style>
</head>
<body>
    <!--
        clock 是钟表容器，hour-wrapper是时针正方形容器,hour是时针显示；
        minute-wrapper是分针正方形容器,minute是分针显示；
        second-wrapper是秒针正方形容器,second是秒针显示；
    -->
    <div class="clock">
        <div class="hour-wrapper" >
            <div class="hour"></div>
        </div>
        <div class="minute-wrapper" >
            <div class="minute"></div>
        </div>
        <div class="second-wrapper" >
            <div class="second"></div>
        </div>
    </div>
</body>
<script>
    window.onload = function(){
        /*
        我们需要每一秒钟获取计算机时间，并且让表针不断转动，因此我们用到setInterval()函数。
        */
        setInterval(()=>{ 
            /*
            创建日期对象，并且获取当前时，分，秒。
            */
        var date=new Date();
        var nowhour=date.getHours();
        var nowminute=date.getMinutes();
        var nowsecond=date.getSeconds();
            /*
            通过类名获取元素，注意获取的是数组。
            */

        var hours=document.getElementsByClassName('hour-wrapper')[0];
        var minutes=document.getElementsByClassName('minute-wrapper')[0];
        var seconds=document.getElementsByClassName('second-wrapper')[0];
            /*
            计算偏转的角度
            */
        var degsecond = (360/60)*nowsecond + "deg";
        var degminute = (360/60)*nowminute+ (360/3600)*nowsecond + "deg";
        var deghour = (360/12)*(nowhour%12)+(360/720)*nowminute+(360/43200)*nowsecond + "deg";

        /*
        设置样式，尤其注意赋值（开始这一块我也弄错了）。
        */
        seconds.style.transform="rotateZ("+degsecond+")";
        minutes.style.transform="rotateZ("+degminute+")";
        hours.style.transform="rotateZ("+deghour+")";},1000);
      
    } 
</script>
</html>

感谢各位观看

会钓猫的鱼

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用javascript和css写简单的网页钟表

用javascript和css写简单的网页钟表一.首先需要表示时针，分针和秒针。有的人可能这样想<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wrong</title&
复制链接

扫一扫