zoukankan      html  css  js  c++  java
  • 简易时钟的制作

    这是我自己根据现在时间做的简易的时钟,如果有哪里不好的多多指点.

    首先是简简单单的页面布局:

    <div id="tab">
        <div id="Tradion">
            <div id="hours" class="tran"></div>
            <div id="minutes" class="tran"></div>
            <div id="seconds" class="tran"></div>
            <div id="dian"></div>
        </div>
    </div>

    然后是CSS样式:

    <style type="text/css">
            #Tradion{
                width: 100px;
                height: 100px;
                border: 2px solid #fff;
                border-radius: 100px;
                float: left;
                margin: 50px 50px;
            }
            #hours{
                width: 30px;
                height: 2px;
                margin:50px 50px;
                background: #fff;
                transform-origin: left bottom;
            }
            #minutes{
                width: 38px;
                height: 2px;
                background: #fff;
                margin:-50px 50px;
                transform-origin: left bottom;
            }
            #seconds{
                width: 45px;
                height: 1px;
                background: #fff;
                margin:50px 50px;
                transform-origin: left bottom;
    
            }
            .tran{
            }
            #dian{
                width:6px;
                height: 6px;
                border-radius: 6px;
                background: #fff;
                margin:-55px 46px;
            }
    </style>

    这是页面显示的效果,你们也可以根据自己的喜号做个比我更好看的页面显示效果,我这个垃圾点了:

    最后就是js样式了:

        var d = new Date();
        var num3 = d.getHours();
        var num2 = d.getMinutes();
        var num1 = d.getSeconds();
        a = num1*6-90;
        b = num2*6-90;
        c = num3*30-90;
        seconds.style.transform = "rotate(" + a + "deg)";
        minutes.style.transform = "rotate(" + b + "deg)";
        hours.style.transform = "rotate(" + c + "deg)";
        var timer = setInterval(function() {
            var d = new Date();
            var num3 = d.getHours();
            var num2 = d.getMinutes();
            var num1 = d.getSeconds();
            a = num1*6-90;
            b = num2*6-90;
            c = num3*30-90;
            seconds.style.transform = "rotate(" + a + "deg)";
            minutes.style.transform = "rotate(" + b + "deg)";
            hours.style.transform = "rotate(" + c+ "deg)";
        }, 1000)

    实现效果自己运行一下就可以看到了.

    最后谢谢大家赏脸看我的菜鸡操作.

  • 相关阅读:
    HDU 4644 BWT (KMP)
    常数的值类型问题
    HDU 1395 2^x mod n = 1 (欧拉函数)
    HDU 5384 Danganronpa(AC自动机)
    9.自己实现linux中的tree
    8.底层文件库
    7.标准文件库
    7.gcc的使用
    5.文件I/O
    4.vim操作
  • 原文地址:https://www.cnblogs.com/bigcrank/p/8350609.html
Copyright © 2011-2022 走看看