js实现动态钟表案例

于 2022-03-25 10:06:19 发布
阅读量615 收藏 1
点赞数 1
文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengshengsc/article/details/123728438
版权

 代码附上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
            font-family:"微软雅黑","苹方"：
        }
        .box{
            width:820px;
            height:400px;
            margin:0 auto;
        }
        .time-box{
            height:300px;
            background:#f3f3f3;
        }
        .time-box>div{
            float:left;
            margin-top:50px;
            margin:50px 0 50px 20px;
            width:100px;
            height:200px;
            background:aliceblue;
            position:relative;
        }
        .spa{
            position:absolute;
            background:#272e38;
            transition: all 0.2s;
            /* width:60px;
            height:16px;
            margin-left:20px; */
        }
        .spa-1{
                width:60px;
                height:16px;
                left:50%;
                top:0;
                margin-left:-30px;
            }
            .spa-1:before,.spa-1:after{
                content:"";
                position:absolute;
                width:0;
                height:0;
                border:16px solid transparent;
                border-top:solid 16px #272e38;
            }
            .spa-1:before{
                left:-16px;
            }
            .spa-1:after{
                right:-16px;
            }
            .spa-4{
                width:60px;
                height:16px;
                left:50%;
                bottom:0;
                margin-left:-30px;
            }
            .spa-4:before,.spa-4:after{
                content:"";
                position:absolute;
                width:0;
                height:0;
                border:16px solid transparent;
                border-bottom:solid 16px #272e38;
                top:-16px;
            }
            .spa-4:before{
                left:-16px;
            }
            .spa-4:after{
                right:-16px;
            }
            .spa-2,.spa-3,.spa-5,.spa-6{
                width:16px;
                height:60px;
            }
            .spa-2{
                top:20px;
                right:0;
            }
            .spa-3{
                top:120px;
                right:0;
            }
            .spa-2:before,.spa-2:after,.spa-3:before,.spa-3:after{
                content:"";
                position:absolute;
                width:0;
                height:0;
                border:16px solid transparent;
                border-right:solid 16px #272e38;
                left:-16px;
            }
            .spa-2:before,.spa-3:before{
                top:-16px;
            }
            .spa-2:after,.spa-3:after{
                bottom:-16px;
            }
            .spa-6{
                top:20px;
                left:0;
            }
            .spa-5{
                top:120px;
                left:0;
            }
            .spa-5:before,.spa-5:after,.spa-6:before,.spa-6:after{
                content:"";
                position:absolute;
                width:0;
                height:0;
                border:16px solid transparent;
                border-left:solid 16px #272e38;
            }
            .spa-6:before,.spa-5:before{
                top:-16px;
            }
            .spa-5:after,.spa-6:after{
                bottom:-16px;
            }
            .spa-7{
                width:56px;
                height:20px;
                left:50%;
                margin-left:-29px;
                top:89px;
            }
            .spa-7:before,.spa-7:after{
                position:absolute;
                content:"";
                width:0;
                height:0;
                border:20px solid transparent;
                border-top-width:10px;
                border-bottom-width:10px;
            }
            .spa-7:before{
                border-right-color:#272e38;
                left:-40px;
            }
            .spa-7:after{
                border-left-color:#272e38;
                right:-40px;
            }
            .zero .spa-7{
                opacity:0.1;
            }
            .one .spa-2,.one .spa-3{
                opacity:1;
            }
            .one span{
                opacity:0.1;
            }
            .two .spa-2,.two .spa-1,.two .spa-7,.two .spa-5,.two .spa-4{
                opacity:1;
            }
            .two span{
                opacity:0.1;
            }
            .treen .spa-1,.treen .spa-2,.treen .spa-3,.treen .spa-4,.treen .spa-7{
                opacity:1;
            }
            .treen span{
                opacity:0.1;
            }
            .four .spa-6,.four .spa-7,.four .spa-2,.four .spa-3{
                opacity:1;
            }
            .four span{
                opacity:0.1;
            }
            .five .spa-1,.five .spa-6,.five .spa-7,.five .spa-3,.five .spa-4{
                opacity:1;
            }
            .five span{
                opacity:0.1;
            }
            .fix .spa-1,.fix .spa-6,.fix .spa-7,.fix .spa-3,.fix .spa-4,.fix .spa-5{
                opacity:1;
            }
            .fix span{
                opacity:0.1;
            }
            .seven .spa-1,.seven .spa-2,.seven .spa-3{
                opacity:1;
            }
            .seven span{
                opacity:0.1;
            }
            .eight .spa-4,.eight .spa-1,.eight .spa-2,.eight .spa-3,.eight .spa-5,.eight .spa-6,.eight .spa-7{
                opacity:1;
            }
            .eight span{
                opacity:0.1;
            }
            .nine .spa-1,.nine .spa-2,.nine .spa-3,.nine .spa-6,.nine .spa-7,.nine .spa-4{
                opacity:1;
            }
            .nine span{
                opacity:0.1;
            }
            .dd{
                width:20px;
                height:200px;
                margin-top:50px;
                float:left;
                position:relative;
                margin-left:20px;
               
            }
            .dd:after,.dd:before{
                content:"";
                display:block;
                margin-top:40px;
                width:20px;
                height:20px;
                background:#272e38;
                border-radius:50%;
            }
            .dd:after{
                margin-top:80px;
                border-radius:50%;
            }
    </style>
</head>
<body>
    <div class="box">
        <div class="time-box">
            <div class="time zero">
                <span class="spa spa-1"></span>
                <span class="spa spa-2"></span>
                <span class="spa spa-3"></span>
                <span class="spa spa-4"></span>
                <span class="spa spa-5"></span>
                <span class="spa spa-6"></span>
                <span class="spa spa-7"></span>
            </div>
            <div class="time one">
                <span class="spa spa-1"></span>
                <span class="spa spa-2"></span>
                <span class="spa spa-3"></span>
                <span class="spa spa-4"></span>
                <span class="spa spa-5"></span>
                <span class="spa spa-6"></span>
                <span class="spa spa-7"></span>
            </div>
            <p class="dd"></p>
            <div class="time two">
                <span class="spa spa-1"></span>
                <span class="spa spa-2"></span>
                <span class="spa spa-3"></span>
                <span class="spa spa-4"></span>
                <span class="spa spa-5"></span>
                <span class="spa spa-6"></span>
                <span class="spa spa-7"></span>
            </div>
            <div class="time treen">
                <span class="spa spa-1"></span>
                <span class="spa spa-2"></span>
                <span class="spa spa-3"></span>
                <span class="spa spa-4"></span>
                <span class="spa spa-5"></span>
                <span class="spa spa-6"></span>
                <span class="spa spa-7"></span>
            </div>
            <p class="dd"></p>
            <div class="time four">
                <span class="spa spa-1"></span>
                <span class="spa spa-2"></span>
                <span class="spa spa-3"></span>
                <span class="spa spa-4"></span>
                <span class="spa spa-5"></span>
                <span class="spa spa-6"></span>
                <span class="spa spa-7"></span>
            </div>
            <div class="time five">
                <span class="spa spa-1"></span>
                <span class="spa spa-2"></span>
                <span class="spa spa-3"></span>
                <span class="spa spa-4"></span>
                <span class="spa spa-5"></span>
                <span class="spa spa-6"></span>
                <span class="spa spa-7"></span>
            </div>
            <!-- <div class="time fix">
                <span class="spa spa-1"></span>
                <span class="spa spa-2"></span>
                <span class="spa spa-3"></span>
                <span class="spa spa-4"></span>
                <span class="spa spa-5"></span>
                <span class="spa spa-6"></span>
                <span class="spa spa-7"></span>
            </div>
            <div class="time seven">
                <span class="spa spa-1"></span>
                <span class="spa spa-2"></span>
                <span class="spa spa-3"></span>
                <span class="spa spa-4"></span>
                <span class="spa spa-5"></span>
                <span class="spa spa-6"></span>
                <span class="spa spa-7"></span>
            </div>
            <div class="time eight">
                <span class="spa spa-1"></span>
                <span class="spa spa-2"></span>
                <span class="spa spa-3"></span>
                <span class="spa spa-4"></span>
                <span class="spa spa-5"></span>
                <span class="spa spa-6"></span>
                <span class="spa spa-7"></span>
            </div>
            <div class="time nine">
                <span class="spa spa-1"></span>
                <span class="spa spa-2"></span>
                <span class="spa spa-3"></span>
                <span class="spa spa-4"></span>
                <span class="spa spa-5"></span>
                <span class="spa spa-6"></span>
                <span class="spa spa-7"></span>
            </div> -->
        </div>
    </div>
</body>
<script>
    //实现电子表  获取当前时间
    //1-获取所有的时间数据
    function getNowTime(){
        var s,f,m;
        var date = new Date();
        var s = date.getHours();
        var f = date.getMinutes();
        var m = date.getSeconds();
        s = s<10?"0"+s:s;
        f = f<10?"0"+f:f;
        m = m<10?"0"+m:m;

        return ""+s+f+m;
    }
    //2-将数据展示cl出来
    function showTime(){
        var box = document.getElementsByClassName("time")
        var arr = ["zero","one","two","treen","four","five","fix","seven","eight","nine"];
        // var timestr = getNowTime()[0]+getNowTime()[1]+getNowTime()[2];
        var txt = getNowTime();
        for(var i = 0 ; i < txt.length ; i++){
            box[i].className = "time " + arr[txt[i]]
        }
        var dd = document.querySelectorAll(".dd");
         
        setTimeout(function(){
            dd[0].style.opacity = "1";
            dd[1].style.opacity = "1";
        },500);
        dd[0].style.opacity = "0.5";
        dd[1].style.opacity = "0.5";

        //获取节点 改变时间样式 展示当前时间
    }
    //3-开启定时器 自动
    setInterval(function(){
        showTime();
    },1000)




    // var time = document.querySelectorAll("time");
    // var arr = ["zero","one","two","treen","four","five"];
</script>
</html>

笑等枫
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS实现钟表效果
王佳斌
12-20 2280
效果图： HTML： <div id="clock"> <div id="h"></div> <div id="m"></div> <div id="s"></div> </div> CSS： div { width: 600px; height: 600px...
JS实现实时钟表
小小鸟的博客
10-22 1453
JS实现实时钟表 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生JS实现实时钟表</title> <style> .clock { width: 600...
For循环-九九乘法表/九九偶数乘法表/九九奇数乘法表
qq_45579661的博客
09-12 782
1.九九乘法表 2.九九偶数乘法表 3.九九奇数乘法表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
JS10---javascript实现钟表
XIAO_YuBaby的博客
08-17 291
一.html内容 <style> .clock{ width: 600px; height: 600px; position: relative; margin: auto; background: url("img/2.jpg") no-repeat; } .clock>di...
Javascript（二）javascript时钟实现
一枝韩独秀的博客
08-05 1万+
时钟实现 实现这个时钟时间需要解决以下三个问题： 获得当前时间，并格式化 如何可以在页面中显示时间 让时间动起来 1、获得当前时间，并格式化 要获得当前时间，可以使用JavaSctipt的Date对象，默认构造函数会返回当前时间。存储日期为自 1970 年 1 月 1 日 00:00:00以来的毫秒数。 setXxx 这些方法用于设置时间和日期值 getXxx 这些方法用于获取时间和...
JS中获取Date对象实现实时钟表小demo
04-17
当我们想要实现实时钟表，也就是一个不断更新当前时间的时钟，我们可以利用JavaScript的定时器（setTimeout或setInterval）与Date对象相结合。下面将详细介绍如何实现这个功能。 首先，我们需要创建一个Date对象来...
js实现转动刻度钟表
11-22
在JavaScript（js）中实现一个转动的刻度钟表是一个典型的动态网页效果，涉及到HTML、CSS和JavaScript的综合运用。这个项目的核心在于利用JavaScript来控制时间的更新，并通过CSS实现钟表的样式，最终使钟表指针按照...
JavaScript小特效钟表 大笨钟.zip
10-26
JavaScript小特效钟表，通常指的是使用JavaScript编程语言创建的具有动态显示时间功能的网页元素，这类特效钟表能够实时更新当前的时间，为网页增添互动性和趣味性。在本案例中，"大笨钟"可能是一种视觉设计上的比喻...
JavaScript小特效钟表 大笨钟.7z
最新发布
10-26
JavaScript小特效钟表，通常指的是使用JavaScript编程语言创建的具有动态显示时间功能的网页特效。在本案例中，"大笨钟"可能是指一个模拟传统大型机械钟外观和功能的数字时钟。这个项目可能包括了HTML文件（timea....
CSS3+SVG实现米老鼠钟表特效特效代码
03-20
3. **可编程性**：SVG元素可以通过JavaScript或CSS直接操作，实现动态效果，比如指针的运动。 4. **样式化**：SVG元素可以接受CSS样式，这样就可以通过CSS3来改变颜色、阴影、填充等视觉属性。 在实际的项目文件中...
原生抖音时钟js实现的一个文字时钟代码
12-15
抖音时钟通过原生js实现抖音很火的一个文字时钟，具体不知干什么觉得设计的满好玩 抖音时钟通过原生js实现抖音很火的一个文字时钟，具体不知干什么觉得设计的满好玩
JS动态时钟
06-29
这里是简单的动态时钟，利用CSS和js的完美结合，适合初学JS 的学生
原生js实现动态指针时钟效果
09-25
原生js实现动态指针时钟效果,简单又直接的效果，css3+js实现
JS实现钟表效果
qq_35515563的博客
03-18 5004
JS实现钟表效果 通过new Date();获取实时时间然后通过css3的定位和旋转实现钟表效果 css代码: .clock { position: relative; width: 400px; height: 400px; margin: 20px auto; border-radius: 50%; backgr
HTML创建简单动态时钟
算法与编程之美
08-06 5580
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！介绍动态时钟，...
js动态显示实时时间
热门推荐
赵阳的博客
04-08 2万+
利用js动态显示实时时间<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv
用javaScript实现钟表功能
wangjianq_bobo的博客
10-27 1017
用JavaScript实现简单的钟表功能，效果如下： 注：本代码只在Chrome浏览器中运行过，没有在IE浏览器中做过检测，给读者带来的不便敬请谅解。 var body_ = document.getElementsByTagName("body"); body_[0].style.background = 'black
js 时钟小案例
一阵云翳✲
06-11 635
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;时钟&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0;
JavaScript实现动态时钟
weixin_33975951的博客
04-26 133
2019独角兽企业重金招聘Python工程师标准>>> ...
python turtle画动态钟表
07-05
要使用Python中的turtle模块绘制动态钟表，可以按照以下步骤进行： 1. 首先，需要导入`turtle`模块，并创建一个`turtle`对象，例如：`import turtle`和`screen = turtle.Screen()`。 2. 接下来，需要定义一个函数...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值