zoukankan      html  css  js  c++  java
  • JS小案例--简单时钟

    JS小案例--简单时钟

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            #box {
                 200px;
                height: 200px;
                background: #fff;
                position: relative;
                left: 0;
                right: 0;
                margin: auto;
                border-radius: 50%;
                /* perspective: 99px;
                transform-style: preserve-3d; */
            }
    
            #box div {
                 200px;
                height: 5px;
                position: absolute;
                top: 100px;
                background: #000;
    
            }
    
            .list1 {
                transform: rotate(90deg);
            }
    
            .list2 {
                transform: rotate(60deg);
            }
    
            .list3 {
                transform: rotate(30deg);
            }
    
            .list4 {
                transform: rotate(120deg);
            }
    
            .list5 {
                transform: rotate(150deg);
            }
    
            #box .list7 {
                background: #fff;
                 180px;
                height: 180px;
                border-radius: 50%;
                top: 10px;
                left: 10px;
            }
    
            #box .list8 {
                background: red;
                 5px;
                height: 80px;
                top: 20px;
                left: 97px;
                transform: rotate(90deg);
                transform-origin: 50% bottom;
            }
    
            #box .list9 {
                background: blue;
                 5px;
                height: 70px;
                top: 30px;
                left: 97px;
                transform-origin: 50% bottom;
            }
    
            #box .list10 {
                background: pink;
                 5px;
                height: 60px;
                top: 40px;
                left: 97px;
                transform-origin: 50% bottom;
            }
        </style>
    </head>
    
    <body bgcolor="#000">
        <div id="box">
            <div class="list1"></div>
            <div class="list2"></div>
            <div class="list3"></div>
            <div class="list4"></div>
            <div class="list5"></div>
            <div class="list6"></div>
            <div class="list7"></div>
            <div class="list8 list"></div>
            <div class="list9 list"></div>
            <div class="list10 list"></div>
        </div>
    </body>
    <script>
        (function () {
            var list = document.getElementsByClassName('list');
            var speed = 6;
            function show() {
                var timer = new Date;
                var hour = timer.getHours();
                var minute = timer.getMinutes();
                var miao = timer.getSeconds();
                console.log(hour, minute, miao);
                list[0].style = 'transform: rotate(' + miao * speed + 'deg);';
                list[1].style = 'transform: rotate(' + minute * speed + 'deg);';
                list[2].style = 'transform: rotate(' + (hour * 30 + 30 * (minute / 60)) + 'deg);';
                console.log(hour * speed);
            }
            setInterval(show, 1000);
        })();
    </script>
    </html>
  • 相关阅读:
    Computer Networking: Computer networks and the Internet
    编译pqxx源码configure时遇到codecs.py LookupError的解决方法
    DBMS-存储和文件结构
    DBMS-关系数据库的设计:范式、函数依赖、分解算法、多值依赖
    WebPack填坑笔记
    VsCode常用快捷键
    用户 在地址栏输入网址 经历了那些
    正向代理和反向代理
    检测浏览器(BOM)以及地址栏网址的API
    js变量按照存储方式区分,有哪些类型,并表述其特点
  • 原文地址:https://www.cnblogs.com/muyun123/p/11426617.html
Copyright © 2011-2022 走看看