js 动态时钟

待我称王封你为后i 2022-07-15 00:05 226阅读 0赞

> 引用块内容  
> ![这里写图片描述][20161025204142316]

![这里写图片描述][20161025204321354]

这里写代码片<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>动态时钟</title>
            <style type="text/css"> #time{ position: absolute; left: 10%; top: 20%; width: 1000px; height: 400px; line-height: 400px; text-align: center; background: linear-gradient(#B66A3E,#4F4A72); box-shadow: 4px 7px #625068; border-radius:50px; } #time img{ width: 132px; height: 134px; overflow: hidden; vertical-align: center; font-size: 24px; border: 3px solid #BC56DE; background: linear-gradient(#B66A3E,#4F4A72); } </style>
        </head>
        <body onload="time()" >
            <div id="time">
            </div>
        </body>
        <script type="text/javascript"> function time(){ var date=new Date(); var hour=date.getHours(); var minute=date.getMinutes(); var second=date.getSeconds(); var gg="AM"; if(hour>12){ gg="PM"; } if(hour==0){ hour=12; } if(minute<=9){ minute="0"+minute; } if(second<=9){ second="0"+second; } var arr1=changePic(hour); var arr2=changePic(minute); var arr3=changePic(second); // var varTime="<span>"+hour+"点"+minute+"分"+second+"秒"+"&nbsp"+gg+"</span>"; var vatImgTime="<img src=img/"+arr1[0]+".png/><img src=img/"+arr1[1]+".png/>"; vatImgTime+="<img src=img/"+arr2[0]+".png/><img src=img/"+arr2[1]+".png/>"; vatImgTime+="<img src=img/"+arr3[0]+".png/><img src=img/"+arr3[1]+".png/>"; document.getElementById("time").innerHTML=vatImgTime; function changePic(obj){ return obj.toString().split(""); } } setInterval("time()",1000); </script>
    </html>

[20161025204142316]: /images/20220715/8f905ec0fc4144e9b57a2ffa8b0d9121.png
[20161025204321354]: /images/20220715/339114d553bc420895159ceeae45f100.png

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 Qt实现指针式时钟+动态时钟 (详细注释)

先上效果图： ![20200705214351114.gif][] 点击运行后首先是一个指针式时钟窗口，点击Digital Clock->可以跳转到数字时钟窗口，再点击

左手的ㄟ右手/ 2023年02月16日 15:25/ 0 赞/ 24 阅读

相关 Python实现动态时钟小程序

前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。 PS：如有需要Python学习资料的小伙伴可以加点击下方链接

梦里梦外;/ 2022年12月07日 15:09/ 0 赞/ 233 阅读

相关 JavaScript经典动态流光时钟

原文链接：[你真的会前端css吗？用css做的非常炫酷的时间显示表][css_css] 效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3po

朴灿烈づ我的快乐病毒、/ 2022年11月20日 01:53/ 0 赞/ 179 阅读

相关 JS30 02时钟

JS30 02时钟文章目录 JS30 02时钟 CSS旋转变换 JavaScript对元素样式调整时间类时钟示

古城微笑少年丶/ 2022年09月03日 10:23/ 0 赞/ 149 阅读

相关 js 动态时钟

> 引用块内容 > ![这里写图片描述][20161025204142316] ![这里写图片描述][20161025204321354] 这里写代码片<!DO

待我称王封你为后i/ 2022年07月15日 00:05/ 0 赞/ 227 阅读

相关 Html动态时钟实例

Html动态时钟实例时间已经成为我们每天必不可少的一个元素，我们是否想过用html来实现一款动态的实时时钟呢？今天我就与大家分享一下html动态

绝地灬酷狼/ 2022年06月09日 03:38/ 0 赞/ 1697 阅读

相关原生js 时钟

话不多说，直接上代码。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

我就是我/ 2022年05月30日 07:53/ 0 赞/ 261 阅读

相关 js倒计时时钟

<!doctype html> <html> <head> <meta charset="utf-8"> <t

太过爱你忘了你带给我的痛/ 2022年05月16日 06:07/ 0 赞/ 169 阅读

相关 js时钟案例

> 之前觉得利用js来实现时钟功能是一件特别优秀的事，现在，我发现它不仅优秀而且可以练习代码，难度适中。总体思想：时钟的针及表框为图片；各种针的转动为css样式；利用da

悠悠/ 2022年03月25日 06:08/ 0 赞/ 335 阅读

相关 js实现动态时钟

> 发现一个超级好用的gif图工具"抠抠视频秀"，很好用也不占内存，长这样 > ![在这里插入图片描述][20190820011431901.png] 1. 效果图

以你之姓@/ 2021年10月26日 13:22/ 0 赞/ 448 阅读