zoukankan      html  css  js  c++  java
  • javascript 通过面向对象编写圆形数字时钟

    效果如图所示,代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            .hour{height: 200px; 200px;position: relative;top:100px;left: 100px;border-radius: 50%;
                border: 3px solid #666666;display: inline-block}
            .minute{height: 200px; 200px;position: relative;top:100px;left: 100px;border-radius: 50%;
                border: 3px solid #666666;display: inline-block}
            .second{height: 200px; 200px;position: relative;top:100px;left: 100px;border-radius: 50%;
                border: 3px solid #666666;display: inline-block}
            .innerLeft{height: 178px; 89px;position: absolute;top: 1px;left: 1px;border-radius: 178px 0 0 178px
                    ;border-bottom: 10px solid #009bff;border-top: 10px solid #009bff;border-left: 10px solid #009bff;background: white
                    ;transform-origin: 100% 50%;}
            .innerRight{height: 178px; 89px;position: absolute;top: 1px;right: 1px;border-radius:0 178px  178px 0
                ;border-bottom: 10px solid #009bff;border-top: 10px solid #009bff;border-right: 10px solid #009bff;background: white;transform-origin: 0 50%;
                transform: rotate(-180deg) ;}
            .cover{position: absolute;height: 200px; 100px;border-radius: 198px 0 0 198px;background: white;z-index: 1}
            input{position: absolute;top: 60px;left: 120px;}
            span{height: 20px; 80px;line-height: 20px;display: block;position: absolute;;top: 90px;
                z-index: 2; left: 60px;font-size: 16px;font-weight: bold;text-align: center}
        </style>
    </head>
    <body>
        <div class="hour">
            <div class="innerLeft"></div>
            <div class="cover"></div>
            <div class="innerRight"></div>
            <span></span>
        </div>
        <div class="minute">
            <div class="innerLeft"></div>
            <div class="cover"></div>
            <div class="innerRight"></div>
            <span></span>
        </div>
        <div class="second">
            <div class="innerLeft"></div>
            <div class="cover"></div>
            <div class="innerRight"></div>
            <span></span>
        </div>
    
        <script>
            window.onload=function(){
                function roll(progress,n) {
                    innerLeft = document.querySelector('.'+this.className + ' .innerLeft');
                    innerRight = document.querySelector('.'+this.className +  ' .innerRight');
                    span = document.querySelector('.'+this.className + ' span');
                    cover = document.querySelector('.'+this.className + ' .cover');
                    span.innerHTML = progress+''+this.className;
    
                    if (progress*n < 180) {
                        console.log(this.className);
                        cover.style.display = 'block';
    
                        innerLeft.style.transform = 'rotate(' + (progress*n) + "deg)";
                        innerRight.style.transform = 'rotate(' + (progress*n - 180) + 'deg)';
                    }
                    else{
                        console.log(this.className);
                        cover.style.display = 'none';
    
                        innerLeft.style.transform = 'rotate(' + (progress*n) + "deg)";
                        innerRight.style.transform = 'rotate(0deg)';
                    }
                }
                var T=setInterval(function(){
                    var time=new Date();
                    var hours=time.getHours();
                    var minutes=time.getMinutes();
                    var seconds=time.getSeconds();
                    var hour=document.querySelector('.hour');
                    var minute=document.querySelector('.minute');
                    var second=document.querySelector('.second');
    
    
                    roll.call(hour,hours,30);
                    roll.call(minute,minutes,6);
                    roll.call(second,seconds,6);
                },1000);
    
            }
        </script>
    </body>
    </html>

    在编程过程中向使用tansform 来实现动态效果,但是会出现归零时逆向,最后就没有使用,接下来还是去探索一下吧。

  • 相关阅读:
    java定时读取文件
    Java面试:投行的15个多线程和并发面试题(转)
    读取一个文件,给定一个字符串,判断这个字符串在文件中出现的次数
    随机产生10个数,并每个数给定一个序号,然后将这10个数按照从小到大的顺序输出来,并带上序号输出
    找出给定字符串中出现最多的字符和次数
    公司开发部门GIT与SVN 之争
    浅谈Hibernate中的三种数据状态
    MyBatis框架的XML数据访问Dao层接口的组合使用
    浅谈WebLogic和Tomcat
    为什么我们不要 .NET 程序员
  • 原文地址:https://www.cnblogs.com/xueandsi/p/5968908.html
Copyright © 2011-2022 走看看