Css3+Js 漂亮时钟

简介: 原文 http://blog.csdn.net/guoxuepeng123/article/details/8842794 Css3+Js 漂亮时钟 浏览器支持 IE9/GoogleChrome/FireFox/Safari 效果图: 代码下载:http://download.

原文 http://blog.csdn.net/guoxuepeng123/article/details/8842794

Css3+Js 漂亮时钟

浏览器支持 IE9/GoogleChrome/FireFox/Safari
效果图:

HTML代码

[html] view plaincopyprint?

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta >  
    <title>css3+js打造漂亮时钟</title>  
    <style>  
    body{background: -webkit-radial-gradient(center center,circle,#666,#000); margin: 0;}  
    div{margin: 0; padding: 0;}  
    .box{padding-top: 50px; width:410px; margin: 0 auto;}  
    .clock{position: relative; width:400px; height: 400px; border: 5px solid #fff; border-radius: 200px; background:-webkit-radial-gradient(center center,circle,#fff,#bbb); box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.8); }  
    .clock .clock-xin{position: absolute; top: 50%; left: 50%; width:30px; height: 30px; border-radius: 15px; background: #eee;margin:-15px 0 0 -15px;}  
    .clock .clock-xin2{position: absolute; top: 50%; left: 50%; width:12px; height: 12px; border-radius: 6px; background: #f00; z-index: 100; margin:-6px 0 0 -6px;}  
    .clock .date{position: absolute; z-index: 3; top: 245px; left: 130px; font-size: 20px; color: #000; text-shadow: 1px 1px white; }  
    .clock .hour{position: absolute; z-index: 3; top: 50%; left: 50%; width:160px; height: 6px; border-radius:5px; background: #000; -webkit-transform-origin: 10px 50%; margin:-3px 0 0 -10px;}  
    .clock .min{position: absolute; z-index: 4;top: 50%; left: 50%; width:180px; height: 4px; border-radius:5px; background: #333; -webkit-transform-origin: 10px 50%; margin:-2px 0 0 -10px;}  
    .clock .sec{position: absolute; z-index: 5; top: 50%; left: 50%; width:210px; height: 2px; background: #f00; -webkit-transform-origin: 30px 50%; margin:-1px 0 0 -30px;}  
    .clock em{display: block; width: 2px; height: 5px; background: #000; position: absolute; top: 0; left: 0; -webkit-transform-origin: 50% 0; margin-left: -1px;}  
    .clock em.ishour{width: 6px; height: 10px; margin-left: -3px;}  
    .clock em.ishour i{font-size: 25px; color: #000; position: absolute; top: 12px; left: -7px;text-shadow: 1px 1px white; }  
    </style>  
    </head>  
    <body>  
    <div style="color:white;">浏览器支持:GoogleChrome</div>  
    <div class="box">  
        <div class="clock" id="clock">  
            <div class="clock-xin"></div>  
            <div class="clock-xin2"></div>  
            <div id="date" class="date"></div>  
            <div id="hour" class="hour"></div>  
            <div id="min" class="min"></div>  
            <div id="sec" class="sec"></div>  
        </div>  
    </div>  
      
      
    <script>  
    window.onload = function() {  
        var winHeight = document.documentElement.clientHeight;  
        document.getElementsByTagName('body')[0].style.height = winHeight+'px';  
      
      
        var $clock = document.getElementById('clock'),  
            $date = document.getElementById('date'),  
            $hour = document.getElementById('hour'),  
            $min = document.getElementById('min'),  
            $sec = document.getElementById('sec'),  
            oSecs = document.createElement('em');  
        for (var i = 1; i < 61; i++) {  
            var tempSecs = oSecs.cloneNode(),  
            pos = getSecPos(i);  
            if(i%5==0){  
                tempSecs.className = 'ishour';  
                tempSecs.innerHTML = '<i style="-webkit-transform:rotate('+(-i*6)+'deg);">'+(i/5)+'</i>';  
            }  
            tempSecs.style.cssText='left:'+pos.x+'px; top:'+pos.y+'px; -webkit-transform:rotate('+i*6+'deg);';  
            $clock.appendChild(tempSecs);  
        }  
      
      
        // 圆弧上的坐标换算  
        function getSecPos(dep) {  
            var hudu = (2*Math.PI/360)*6*dep,  
            r = 200; //半径大小  
            return {  
                x: Math.floor(r + Math.sin(hudu)*r),  
                y: Math.floor(r - Math.cos(hudu)*r),  
            }  
        }  
      
      
      
      
        ;(function() {  
            // 当前时间  
            var _now = new Date(),  
            _h = _now.getHours(),  
            _m = _now.getMinutes(),  
            _s = _now.getSeconds();  
      
      
            var _day = _now.getDay();  
            _day = (_day==0)?7:_day;  
    if(_day==1){  
    _day = "一";  
    }else if(_day==2){  
    _day = "二";  
    }else if(_day==3){  
    _day = "三";  
    }else if(_day==4){  
    _day = "四";  
    }else if(_day==5){  
    _day = "五";  
    }else if(_day==6){  
    _day = "六";  
    }else if(_day==7){  
    _day = "日";  
    }  
            $date.innerHTML = _now.getFullYear()+'-'+(_now.getMonth()+1)+'-'+_now.getDate()+' 星期'+_day;  
            //绘制时钟  
            var gotime = function(){  
                var _h_dep = 0;  
                _s++;  
                if(_s>59){  
                    _s=0;  
                    _m++;  
                }  
                if(_m>59){  
                    _m=0;  
                    _h++;  
                }  
                if(_h>12){  
                   _h = _h-12;  
                }  
      
      
                //时针偏移距离  
                _h_dep = Math.floor(_m/12)*6;   
      
      
                $hour.style.cssText = '-webkit-transform:rotate('+(_h*30-90+_h_dep)+'deg);';  
                $min.style.cssText = '-webkit-transform:rotate('+(_m*6-90)+'deg);';  
                $sec.style.cssText = '-webkit-transform:rotate('+(_s*6-90)+'deg);';  
      
      
            };  
      
      
            gotime();  
            setInterval(gotime, 1000);  
        })();  
      
      
    };  
      
      
      
      
    </script>  
    </body>  
    </html>  

 

目录
相关文章
|
15天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
3天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
3天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
9天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
50 6
|
2月前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
25 4
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
39 0
JS配合CSS3实现动画和拖动小星星小Demo
|
2月前
|
前端开发 JavaScript
uniapp动态修改css样式(通过js来修改css样式)
uniapp动态修改css样式(通过js来修改css样式)
|
30天前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战