时钟的实现

最新推荐文章于 2025-08-06 14:36:16 发布
最新推荐文章于 2025-08-06 14:36:16 发布
阅读量121 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhoushangwu/p/8716325.html

 

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <style>
        .datetime {
            width: 200px;
            height: 200px;
            border: 3px solid #220807;
            border-radius: 50%;
            box-shadow: 0px 0px 5px #220807 inset;
            box-sizing: border-box;
            position: relative;
            color: #220807;
            font-weight: bold;
        }

        .identity>div {
            height: 95px;
            border-left: 1px solid #666;
            position: absolute;
            top: 2px;
            right: 0px;
            width: 97px;
        }

        .identity>div>div {
            width: 5px;
            height: 90px;
            position: absolute;
            top: 5px;
            left: -3px;
            background-color: #fff;
            font-size: 10px;
        }

        .crl {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            z-index: 100;
            background-color: #333;
            position: absolute;
            top: 92px;
            left: 92px;
        }

        .currhour,
        .currmi,
        .currsec {
            display: inline-block;
            background-color: #220807;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-weight: 100;
        }
    </style>
</head>

<body style="overflow:hidden;">

    <div id="datetime">
        <div class="datetime">
            <div class="identity">
                <div style="border-width: 2px;z-index:99;width:96px;">
                    <div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">12</div>
                </div>
                <div style="transform: rotate(6deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(12deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(18deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(24deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="border-width: 2px;z-index:99;width:96px;transform: rotate(30deg);transform-origin: left bottom">
                    <div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">1</div>
                </div>
                <div style="width:97px;transform: rotate(36deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(42deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(48deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(54deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="border-width: 2px;z-index:99;width:96px;transform: rotate(60deg);transform-origin: left bottom">
                    <div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">2</div>
                </div>
                <div style="width:97px;transform: rotate(66deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(72deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(78deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(84deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="border-width: 2px;z-index:99;width:96px;transform: rotate(90deg);transform-origin: left bottom">
                    <div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">3</div>
                </div>
                <div style="width:97px;transform: rotate(96deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(102deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(108deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(114deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="border-width: 2px;z-index:99;width:96px;transform: rotate(120deg);transform-origin: left bottom">
                    <div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">4</div>
                </div>
                <div style="width:97px;transform: rotate(126deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(132deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(138deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(144deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="border-width: 2px;z-index:99;width:96px;transform: rotate(150deg);transform-origin: left bottom">
                    <div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">5</div>
                </div>
                <div style="width:97px;transform: rotate(156deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(162deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(168deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(174deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="border-width: 2px;z-index:99;width:96px;transform: rotate(180deg);transform-origin: left bottom">
                    <div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">6</div>
                </div>
                <div style="width:97px;transform: rotate(186deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(192deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(198deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(204deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="border-width: 2px;z-index:99;width:96px;transform: rotate(210deg);transform-origin: left bottom">
                    <div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">7</div>
                </div>
                <div style="width:97px;transform: rotate(216deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(222deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(228deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(234deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="border-width: 2px;z-index:99;width:96px;transform: rotate(240deg);transform-origin: left bottom">
                    <div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">8</div>
                </div>
                <div style="width:97px;transform: rotate(246deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(252deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(258deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(264deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="border-width: 2px;z-index:99;width:96px;transform: rotate(270deg);transform-origin: left bottom">
                    <div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">9</div>
                </div>
                <div style="width:97px;transform: rotate(276deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(282deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(288deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(294deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="border-width: 2px;z-index:99;width:96px;transform: rotate(300deg);transform-origin: left bottom">
                    <div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">10</div>
                </div>
                <div style="width:97px;transform: rotate(306deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(312deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(318deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(324deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="border-width: 2px;z-index:99;width:96px;transform: rotate(330deg);transform-origin: left bottom">
                    <div style="width:20px;height:85px;top:10px; left:-5px;z-index:99;">11</div>
                </div>
                <div style="width:97px;transform: rotate(336deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(342deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(348deg);transform-origin: left bottom">
                    <div></div>
                </div>
                <div style="width:97px;transform: rotate(354deg);transform-origin: left bottom">
                    <div></div>
                </div>
            </div>
            <div class="crl">

            </div>
            <div class="hour" style="width:4px; height:70px; position:absolute;z-index:101;background-color:#000; left:95px;box-shadow:1px -3px 7px 1px rgb(170, 170, 170);opacity:0.9; top:40px;transform: rotate(30deg);transform-origin: 1.5px 55px;">

            </div>
            <div class="mi" style="width:2px; height:80px; position:absolute;z-index:101;background-color:#000; left:96px;box-shadow:1px -3px 7px 1px rgb(170, 170, 170);opacity:0.9; top:30px;transform: rotate(60deg);transform-origin: 1px 67px;">

            </div>
            <div class="sec" style="width:1px; height:90px; position:absolute;z-index:101;background-color:rgb(255, 102, 0);box-shadow:1px -3px 7px 1px rgb(187, 187, 187);opacity:0.9;  left:96.5px; top:20px;transform: rotate(90deg);transform-origin: left 77px;">

            </div>
            <div style="font-size:8px; position:absolute;top:110px; left:0; text-align:center;z-index:100; width:100%;">
                <div class="currdate" style="margin-bottom:5px;"></div>
                <div style="font-size:10px; color:#fff;">
                    <span class="currhour"></span>
                    <span class="currmi"></span>
                    <span class="currsec"></span>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            var d = new Date();
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();

            //初始化
            $(".hour").css("transform", "rotate(" + h * 30 + "deg)");
            $(".mi").css("transform", "rotate(" + m * 6 + "deg)");
            $(".sec").css("transform", "rotate(" + s * 6 + "deg)");
            $(".currdate").html(d.Format("yyyy年MM月dd日"));
            $(".currhour").html(d.Format("HH"));
            $(".currmi").html(d.Format("mm"));
            $(".currsec").html(d.Format("ss"));

            window.setInterval(function () {
                //此方式不需要每次更新多个标签
                s = s + 1;
                if (s == 60) {
                    s = 0;
                    m = m + 1;
                    if (m == 60) {
                        m = 0;
                        h = h + 1;
                        if (h == 12) {
                            h = 0;
                        }
                        $(".hour").css("transform", "rotate(" + h * 30 + "deg)");
                    }
                    $(".mi").css("transform", "rotate(" + m * 6 + "deg)");
                }
                $(".sec").css("transform", "rotate(" + s * 6 + "deg)");

                //此方式每次狗需要更新多个标签，但无需增加判断
                d.setSeconds(d.getSeconds() + 1);
                $(".currdate").html(d.Format("yyyy年MM月dd日"));
                $(".currhour").html(d.Format("HH"));
                $(".currmi").html(d.Format("mm"));
                $(".currsec").html(d.Format("ss"));
            }, 1000)


        })
        Date.prototype.Format = function (fmt) { //author: meizz   
            var o = {
                "M+": this.getMonth() + 1, //月份   
                "d+": this.getDate(), //日   
                "H+": this.getHours(), //小时   
                "m+": this.getMinutes(), //分   
                "s+": this.getSeconds(), //秒   
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度   
                "S": this.getMilliseconds() //毫秒   
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
    </script>
</body>

</html>

　　

转载于:https://www.cnblogs.com/zhoushangwu/p/8716325.html

qt qss设置字体大小_QT开发（十六）——QT绘图实例-钟表
weixin_39585886的博客
11-16 924
一、钟表实现原理 钟表的实现需要设置定时器，定时器每隔一秒发送timeout()信号到QWidget::update()槽函数，update()槽函数将会重绘一次窗口，重写重绘事件函数paintEvent(QPaintEvent *event)，根据获取的当前系统时间的时钟、分钟、秒钟重绘钟表的时针、分针、秒针。 QTimer *timer = new QTimer(this); timer-&g...
图形钟表的实现
qq_36675830的博客
07-28 578
下午突然对于做图形钟表来了兴趣，就用c语言实现了一番，小有成就感，特写博客一贴，以此分享： 用到的预备知识：1.获取当前系统时间：头文件：#include 定义函数：struct tm *gmtime(const time_t *timep);函数说明：gmtime()将参数timep 所指的time_t 结构中的信息转换成真实世界所使用的时间日期表示方法，然后将结果由结构tm 返回。举例：#i
[转载]线程实例：一个钟表的实现
congji3817的博客
03-03 235
线程实例：一个钟表的实现最近在学习JAVA线程，照着书上例子写的钟表图形程序，对线程有一定的理解，但是发觉对图形编程的掌握不够很多函数还不能掌握~~ 以下是钟表例子的代码 package hello; import...
简单的时钟实现
weixin_45165848的博客
08-04 317
用setInterval(function(){},1000)让其每格1秒刷新一次时间，1000毫秒=1秒； 在获取时间时，先要定义函数 var d=new Date(); var month=d.getMonth()+1;获取月份，因为返回值是 0（一月） 到 11（十二月） 之间的一个整数，所以要获取正确的月份都要+1； var week=d.getUTCDay(); 获取周，该值是 0（星期...
数字时钟
xingoo
11-02 374
数字时钟 /*----------------------------------------- DIGCLOCK.c -- Digital Clock (c) Charles Petzold, 1998 -----------------------------------------*/ ...
数字时钟的实现
小允子的博客
05-27 607
数码时钟的实现 body{background: blue;color: white;font-size: 30px;} #div1{width: 300px;height: 36px;border: 1px solid #fff;} #div1 img{width: 25px; height: 36px;position: relative;} window.onload
易语言-利用时钟实现动画易语言源码例程
06-29
本例程“易语言-利用时钟实现动画易语言源码例程”将向我们展示如何借助时钟组件来实现简单的动画效果。 首先，我们要理解“时钟组件”的概念。在易语言中，时钟组件是一种定时触发事件的工具，它可以在指定的时间...
基于verilog的数字时钟实现，
05-06
基于verilog的数字时钟实现，关于闹钟与时钟使用顺序:设置闹钟前 1.打开setAL 2.打开Adj_Min,Adj_Hour 设置完毕后: 1.关闭Adj_Min,Adj_Hour 2.关闭setAL设置时钟时 1.setAL关闭状态 2.2.打开Adj_Min,Adj_Hour，约束...
javascript背景时钟实现方法.docx
01-18
JavaScript 背景时钟实现方法 JavaScript 背景时钟实现方法是一种使用 JavaScript 实现时钟背景效果的方法，该方法主要介绍了 JavaScript 背景时钟实现方法，涉及 JavaScript 时间及页面元素样式的相关操作技巧。 ...
hlc:JavaScript中的混合逻辑时钟实现。 您可以在分散式系统中使用它来排序由两个单独的设备创建的语句
05-25
@consento/hlc是JavaScript中的实现。 您可以在分散式系统中使用它来排序由两个单独的设备创建的语句。 TL; DR ：该时钟将使用系统时钟，除非系统时钟落后于另一个已知的时间戳，在这种情况下它将增加一个计数器。 ...
基于verilog的数字时钟实现-源码
10-01
总的来说，基于Verilog的数字时钟实现是一个综合性的项目，涵盖了数字逻辑设计的基础知识，包括时钟处理、计数逻辑、状态机设计和接口驱动等。通过实践这样的项目，不仅能够提升对Verilog语言的理解，还能增强硬件...
用CSS3实现钟表效果
weixin_34288121的博客
03-08 807
背景：最近在学习CSS3，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。 效果图 实现过程 1.首先我们需要在页面中写出一个静态的钟表效果。首先我们需要一个表盘div wrap 对其进行简单的样式设置，用border-radius属性将其设置成圆形。 <div id="wrap"><...
Java实现时钟
Cz20072009kM的博客
11-14 4239
在理解吸收了http://blog.csdn.net/fengsigaoju/article/details/51327180这位朋友写的代码之后做了一定的美观性的修改。 增加了两个线程，分别用来操作电子风格表盘和日期显示。 package drawClock; import java.awt.BasicStroke; import java.awt.Color; import java.a
时钟原理（一）硬件篇
热门推荐
箫声清阳的空间
05-14 2万+
参考：http://www.cnblogs.com/xulei/archive/2009/01/12/1374125.html 1 概念定义 1.1 频率 频率单位 kHz MHz GHz THz 换算关系 1×10^3Hz 1×10^6Hz 1×10^9Hz 1×10^12Hz 英文名称 Kilo Hz Mega Hz Giga Hz Tera Hz 中文名称
计算机工作原理--时钟概念
doctorlyly的博客
11-24 3591
计算机的时钟 凡是数字系统都要有时钟 为啥？ 因为时钟是用来协调各单元协调有序工作的 我们在时序图上看到，最上面的信号总是CLK信号 其他信号都是在这个基准下工作的！ T1 T2 T3 T4 啥的 一个一个的节拍 人头脑中也是有一个时钟 所以才有了先后、前后的概念 我们到点，都去同一个教室上课。为啥大家谁也没叫谁，自动都来了 那是因为我们都有一个共同的课程表 和时钟 哈哈 计算机的原理就是这么简单 简单到 像人一样工作 明明我们平时默认就是这么干的 偏偏还要描述出来 2.计算机中，一切皆是计算 一切都要通.
Javascript（二）javascript时钟实现
一枝韩独秀的博客
08-05 1万+
时钟实现 实现这个时钟时间需要解决以下三个问题： 获得当前时间，并格式化 如何可以在页面中显示时间 让时间动起来 1、获得当前时间，并格式化 要获得当前时间，可以使用JavaSctipt的Date对象，默认构造函数会返回当前时间。存储日期为自 1970 年 1 月 1 日 00:00:00以来的毫秒数。 setXxx 这些方法用于设置时间和日期值 getXxx 这些方法用于获取时间和...
设计数字时钟
weixin_45580486的博客
08-29 2203
设计数字时钟（40分） 题目内容： 按照下面要求定义一个时钟结构体类型： struct clock { int hour; int minute; int second; }; typedef struct clock CLOCK; 然后，编程实现将时钟模拟显示在屏幕上。注意：时钟是24小时的。需要判断输入的数据是否合法。 输入样例1： 10,20,3 输出样例1： 10...
计算机时钟的工作原理,电脑时钟电路工作原理
weixin_34312149的博客
07-20 1921
电脑主板时钟电路工作原理和工作过程包括 时钟电路的工作原理：DC3。5V电源经过二极管和L1(L1可以用0欧电阻代替)进入分频器后，分频器开始工作。，和晶体一起产生振荡，在晶体的两脚均可以看到波形。晶体的两脚之间的阻值在450-700之间。在它的两脚各有1V左右的电压，由分频器提供。晶体产生的频率总和是14。318M。总频OSC在分频器出来后送到PCI的B16脚和ISA的B30脚，这两脚叫O...
ref存储对象和reactive深度响应式递归地对对象的嵌套属性进行响应式处理
最新发布
lf_1234的博客
08-06 895
摘要：ref 不会递归处理对象的嵌套属性，仅对顶层数据进行响应式处理。若需深度响应式，应使用 reactive。示例中，ref 存储的嵌套对象 profile 修改后视图不会更新，而 reactive 能确保嵌套属性（如 age）触发更新。总结：ref 适合基本类型或简单对象（需 .value），reactive 适合复杂对象（自动深度响应式）。
MFC时钟实现教程与源码解析
在深入了解MFC（Microsoft Foundation Classes，微软基础类库）实现时钟的知识点之前，我们首先需要明确MFC的定义及其应用场景。MFC是微软公司提供的一个强大的Windows应用程序框架，用以简化Windows API的复杂性，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值