zoukankan      html  css  js  c++  java
  • javascript实现的时钟

    之前就看到园子里很多牛人写js应用都非常炫,看的我是心痒痒,但技术有限,只能做些及丑陋又不实用的东西来玩玩,班门弄斧呢

    View Code
    <html>
    <head>
    <title>js时钟</title>
    <script type="text/javascript">
    function clock(obj){
        
    var $ = function(id){
            
    return document.getElementById(id);
        }
        
        
    var box = $(obj), bh,bw,hour=new Array(),minute=new Array(),second=new Array(),raduis,re;
        box.style.position 
    = 'relative';
        bh 
    = box.clientHeight;
        bw 
    = box.clientWidth;
        
    function createInterface(){
            
    var point1 = document.createElement('span');
            point1.style.height 
    = '3px';
            point1.style.width
    ='3px';
            point1.style.backgroundColor
    ='#000';
            point1.style.lineHeight 
    = '1px';
            point1.style.fontSize 
    = '1px'
            point1.style.position 
    = 'absolute';
            
    var point2 = document.createElement('span');
            point2.style.height 
    = '5px';
            point2.style.width
    ='5px';
            point2.style.lineHeight 
    = '1px';
            point2.style.fontSize 
    = '1px'
            point2.style.backgroundColor
    ='#000';
            point2.style.position 
    = 'absolute';
            
    var centerY = bh/2;
            var centerX = bw/2;
            raduis = (centerY >= centerX ? centerY : centerX) - 10;
            
    for(var angle=0; angle < 360 ; angle+=30){
                
    var qy = Math.round(Math.sin(angle * Math.PI / 180* raduis);
                
    var qx = Math.round(Math.cos(angle * Math.PI / 180* raduis);
                
    var el = point1.cloneNode(true);
                el.style.top 
    = centerY + qy + 'px';
                el.style.left 
    = centerX + qx + 'px';
                box.appendChild(el);
            }
            
    for(var angle=0; angle < 360 ; angle+=90){
                
    var qy = Math.round(Math.sin(angle * Math.PI / 180* raduis);
                
    var qx = Math.round(Math.cos(angle * Math.PI / 180* raduis);
                
    var el = point2.cloneNode(true);
                el.style.top 
    = centerY + qy + 'px';
                el.style.left 
    = centerX + qx + 'px';
                box.appendChild(el);
            }
            
    var hourone = document.createElement('span');
            hourone.style.width 
    = '8px';
            hourone.style.height 
    = '8px';
            hourone.style.backgroundColor 
    = '#000';
            hourone.style.position 
    = 'absolute';
            hourone.style.lineHeight 
    = '1px';
            hourone.style.fontSize 
    = '1px'
            
    for(var i=0; i < 30; i++){
                
    var hone = hourone.cloneNode(true);
                box.appendChild(hone);
                hour.push(hone);
            }
            minuteone 
    = document.createElement('span');
            minuteone.style.width 
    = '6px';
            minuteone.style.height 
    = '6px';
            minuteone.style.backgroundColor 
    = '#888';
            minuteone.style.position 
    = 'absolute';
            minuteone.style.lineHeight 
    = '1px';
            minuteone.style.fontSize 
    = '1px'
            
    for(var i=0; i < 30; i++){
                
    var mone = minuteone.cloneNode(true);
                box.appendChild(mone);
                minute.push(mone);
            }
            
            secondone 
    = document.createElement('span');
            secondone.style.width 
    = '4px';
            secondone.style.height 
    = '4px';
            secondone.style.backgroundColor 
    = '#f00';
            secondone.style.position 
    = 'absolute';
            secondone.style.lineHeight 
    = '1px';
            secondone.style.fontSize 
    = '1px'
            
    for(var i=0; i < 40; i++){
                
    var sone = secondone.cloneNode(true);
                box.appendChild(sone);
                second.push(sone);
            }
        }
        
    function calhour(h,m){
            
    return ((h * 60 + m) / (12 * 60)) * 360 - 90;
        }
        
        
    function calaa(m){
            
    return (m / 60* 360 - 90;
        }
        
        
    function setTime(h,m,s){
            
    var hourA = calhour(h,m);
            
    var minuteA = calaa(m);
            
    var secondA = calaa(s);
            
    for(var i=0,len=hour.length; i < len ; i++){
                
    var araduis = (i/len) * (raduis * 0.5);
                var hy = Math.round(Math.sin(hourA * Math.PI / 180* araduis);
                
    var hx = Math.round(Math.cos(hourA * Math.PI / 180* araduis);
                hour[i].style.top 
    = (bh/2) + hy + "px";
                hour[i].style.left = (bw/2) + hx + "px";
            }
            
            
    for(var i=0,len=minute.length; i < len ; i++){
                
    var araduis = (i/len) * (raduis * 0.6);
                var hy = Math.round(Math.sin(minuteA * Math.PI / 180* araduis);
                
    var hx = Math.round(Math.cos(minuteA * Math.PI / 180* araduis);
                minute[i].style.top 
    = (bh/2) + hy + "px";
                minute[i].style.left = (bw/2) + hx + "px";
            }
            
            
    for(var i=0,len=second.length; i < len ; i++){
                
    var araduis = (i/len) * (raduis * 0.8);
                var hy = Math.round(Math.sin(secondA * Math.PI / 180* araduis);
                
    var hx = Math.round(Math.cos(secondA * Math.PI / 180* araduis);
                second[i].style.top 
    = (bh/2) + hy + "px";
                second[i].style.left = (bw/2) + hx + "px";
            }
        }
        
    function update(){
            
    var d = new Date();
            
    var h = Math.abs(d.getHours() - 12);
            
    var m = d.getUTCMinutes();
            
    var s = d.getSeconds();
            setTime(h,m,s);
        }
        
    function run(){
            re 
    = setInterval(update,1000);
        }
        
    function stop(){
            clearInterval(re);
        }
        createInterface();
        update();
        
    return {'run':run,'stop':stop};
    }
    window.onload 
    = function(){
        clock(
    'clock').run();
    }
    </script>
    <style type="text/css">
    #clock
    { height:300px; width:300px; border:1px solid #ccc;}
    </style>
    </head>
    <body>
    <div id="clock">
    </div>
    </body>
    </html>

  • 相关阅读:
    Activiti系列——如何在eclipse中安装 Activiti Designer插件
    C语言 二维数组与指针笔记
    Ubuntu linux设置从当前目录下加载动态库so文件
    Ubuntu14.04安装nfs服务器
    Ubuntu14.04 搭建FTP服务器
    Linux备忘命令
    Java实现对xml文件的增删改查
    Java利用jacob实现打印Excel文件
    git操作列表
    swiper 窗口宽度变化,页面宽度高度变化 导致自动滑动 解决方案
  • 原文地址:https://www.cnblogs.com/xingzhi/p/2017645.html
Copyright © 2011-2022 走看看