首页 > 代码库 > 超酷的圆盘时钟表

超酷的圆盘时钟表

2024-07-17 08:19:30   222人阅读



<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>超酷数码钟表</title>
<script type="text/javascript"src=http://www.mamicode.com/"http://ajax.googleapis.com/ajax/libs
/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
//引用的是在线jquery地址，如果不行请自行下载切换
(function($){
    $.fn.drawClock =function(options){
        varmainId = $(this);
         
        //设置默认参数
        vardefaultOptions = {
            ‘width‘:‘300px‘,
            ‘height‘:‘300px‘,
            ‘margin‘:‘200px auto‘,
            ‘border‘:‘1px solid #888‘,
            ‘border-radius‘:‘50%‘,
            ‘box-shadow‘:‘2px 2px 4px #111‘
        };
        varoptions = $.extend(defaultOptions, options);
         
        mainId.css({
            ‘width‘: options.width,
            ‘height‘: options.height,
            ‘margin‘: options.margin,
            ‘border‘: options.border,
            ‘border-radius‘: options[‘border-radius‘],
            ‘box-shadow‘: options[‘box-shadow‘],
            ‘position‘:‘relative‘
        }).css({
            ‘background‘:‘-webkit-gradient(radial, ‘ + mainId.width()/2 + ‘ ‘ + mainId.height()/2 + ‘, 0, ‘ + mainId.width()/2 + ‘ ‘ + mainId.height()/2 + ‘, ‘ + mainId.width()/2 + ‘, from(#ffe), to(#eee))‘,
            ‘background‘:‘-moz-radial-gradient(circle closest-side, #ffe 0%, #eee 100%)‘
        });
         
        //钟表盘中心圆
        $("<div id=‘circle‘></div>").appendTo(mainId).css({
            ‘width‘:‘20px‘,
            ‘height‘:‘20px‘,
            ‘border-radius‘:‘50%‘,
            ‘box-shadow‘:‘0 0 5px rgba(0,0,0,0.8)‘,
            ‘position‘:‘absolute‘,
            ‘z-index‘: 999,
            ‘background‘:‘-webkit-gradient(radial, ‘ + mainId.width()/2 + ‘ ‘ + mainId.height()/2 + ‘, 0, ‘ + mainId.width()/2 + ‘ ‘ + mainId.height()/2 + ‘, ‘ + mainId.width()/2 + ‘, from(#ffe), to(#eee))‘,
            ‘background‘:‘-moz-radial-gradient(circle, #eee 30%, #ffe 100%)‘
        }).css({
            ‘left‘: mainId.width()/2 - $(‘#circle‘).width()/2,
            ‘top‘: mainId.height()/2 - $(‘#circle‘).height()/2
        });
         
        vardateTime = new Date();
        varoHours = dateTime.getHours();
        varoMinutes = dateTime.getMinutes();
        varoSeconds = dateTime.getSeconds();
         
        //初始化时分秒
        varhPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(3/6), 5,"#333", -90+oHours*30+oMinutes*6/12);
        varmPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(4/6), 4,"#666", -90+oMinutes*6);
        varsPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(5/6), 3,"#f00", -90+oSeconds*6);
         
        //运动时分秒
        vartimer = setInterval(function(){
            dateTime =new Date();
            oHours = dateTime.getHours();
            oMinutes = dateTime.getMinutes();
            oSeconds = dateTime.getSeconds();      
            hPointer.css({‘transform‘:‘rotate(‘ + (-90+oHours*30+oMinutes*6/12) +‘deg)‘});
            mPointer.css({‘transform‘:‘rotate(‘ + (-90+oMinutes*6) +‘deg)‘});
            sPointer.css({‘transform‘:‘rotate(‘ + (-90+oSeconds*6) +‘deg)‘});
        }, 1000);
         
         
        //绘制钟表刻度
        for(vari=0; i<60; i++){
            varwidth = 3, height = 6, oBcolor = ‘#111‘;
            if(i%5 == 0){
                width = 5;
                height = 10;
            }
            if(i%15 == 0){
                oBcolor =‘red‘;
            }
            $("<div class=‘clockMark‘></div>").appendTo(mainId).css({
                ‘width‘: width,
                ‘height‘: height,
                ‘position‘:‘absolute‘,
                ‘top‘: 0,
                ‘left‘: mainId.width()/2,
                ‘background‘: oBcolor,
                ‘transform‘:‘rotate(‘ + i*6 + ‘deg)‘,
                "transform-origin":"0 " + mainId.width()/2+‘px‘
            });
        }
         
        //绘制钟表指针
        functiondrawPointer (startx, starty, width, height, bcolor, angle) {
            varoPointer = $("<div></div>");
            oPointer.appendTo(mainId).css({
                ‘width‘: width,
                ‘height‘: height,
                ‘position‘:‘absolute‘,
                ‘top‘: starty,
                ‘left‘: startx,
                ‘background‘: bcolor,
                ‘transform‘:‘rotate(‘ + angle + ‘deg)‘,
                ‘transform-origin‘:‘0 0‘
            });
            returnoPointer;
        }
         
        returnthis;
    }
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
    $(‘#clock‘).drawClock();
});
</script>
</head>
 
<body>
    <div id="clock"></div>
</body>
</html>


联系
我们