`
guoxuepeng
  • 浏览: 39371 次
文章分类
社区版块
存档分类
最新评论

Css3+Js 漂亮时钟

 
阅读更多

Css3+Js 漂亮时钟

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


HTML代码

<!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>


分享到：
| 纯HTML+CSS3 导航菜单
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css3+js漂亮时钟

    总的来说，"css3+js漂亮时钟"是一个结合了CSS3视觉效果和JavaScript动态功能的项目，它展示了现代Web开发中的创新和交互性。通过学习和理解这个项目，开发者可以提升自己在网页动态元素设计和实现方面的能力，同时也...

    CSS3+HTML5实现漂亮LED数字时钟

    总结一下，这个"CSS3+HTML5实现漂亮LED数字时钟"项目展示了如何结合HTML5的语义化标签和CSS3的动画特性，创建出一个交互式的网页时钟。开发者不仅需要掌握HTML和CSS的基础知识，还需要理解JavaScript的时间处理和...

    CSS+js 做漂亮时钟.zip

    CSS+js 做漂亮时钟。这是一个非常仿真的圆形时钟。通过js获取当前时间并调整时钟的指针旋转，完成时间的显示。样子也非常漂亮。 --------------------------------------------------------------------------------...

    CSS3制作漂亮时钟显示效果.rar

    总的来说，这个“CSS3制作漂亮时钟显示效果”的项目展示了CSS3与JavaScript如何协同工作，创造出动态且具有交互性的网页元素。它不仅锻炼了开发者对CSS3特性的理解和应用，也提醒我们在网页设计中应充分利用现代...

    Css3+Js制作漂亮时钟(附源码)

    在本文中，我们将深入探讨如何使用CSS3和JavaScript来创建一个美观的时钟。这个时钟设计兼容多种浏览器，包括IE9、Google Chrome、Firefox和Safari。通过学习这个案例，你可以了解如何结合这两门技术来创建动态且...

    CSS3实现漂亮时钟代码.zip

    在这款"CSS3实现漂亮时钟代码.zip"压缩包中，开发者利用CSS3的新特性创建了一个吸引人的时钟特效。这个时钟不仅具有良好的视觉效果，而且完全依赖于纯CSS3实现，无需JavaScript的辅助，展示了CSS3的强大潜力。 首先...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本...

    纯 js + css 实现非常漂亮的网页电子时钟

    - **代码组织**：在项目中，`simpleClock.css` 用于存储所有 CSS 样式，`simpleClock.js` 存储 JavaScript 逻辑，而 `H5 时钟.html` 是包含 HTML 结构和引入 CSS、JS 文件的主文件。 - **调试与优化**：开发者工具...

    jQuery+css3实现漂亮的以圆圈方式显示的彩色时钟效果.zip

    在本项目中，"jQuery+css3实现漂亮的以圆圈方式显示的彩色时钟效果.zip" 是一个包含利用jQuery和CSS3技术创建的动态彩色时钟的资源包。这个时钟设计独特，以圆形的方式展示时间，使得界面既美观又具有现代感。以下是...

    jquery版时钟（css3实现）

    本项目“jquery版时钟（css3实现）”是结合了jQuery和CSS3技术来创建一个实时显示当前时间的动态时钟。下面我们将详细探讨这个项目的实现原理、关键技术和相关知识点。 首先，jQuery的引入是为了利用其强大的DOM...

    js 漂亮的可移动时钟

    【JS漂亮的可移动时钟】是一种利用现代浏览器技术，尤其是CSS3和JavaScript，构建的交互式时钟。这种时钟不仅能够准确显示时间，还能在网页上自由移动，增加了用户体验的趣味性。以下是对这个项目的技术细节进行的...

    CSS3时钟圆形立体倒计时代码.zip

    【CSS3时钟圆形立体倒计时代码】是一种利用CSS3技术实现的具有立体效果的圆形倒计时组件。在网页设计中，这样的时钟常用于活动倒计时或者重要事件提醒，为用户提供直观的时间感知。这个代码示例通过HTML和CSS3的组合...

    CSS3的3D立体感指针时钟代码.zip

    js代码 [removed] var miao = document.getElementById("miao"); ... var fen = document.getElementById("fen");...一款漂亮的基于CSS3 JS实现钟表特效，界面设计带有3D立体感的CSS3指针时钟走动代码。

    漂亮的电子屏LED数字时钟js代码

    **标题解析：** "漂亮的电子屏LED数字时钟js代码" 指的是一种使用JavaScript编写的网页时钟，它模拟了电子屏上的LED数字显示效果。这种时钟通常会以动态的方式显示当前时间，包括小时、分钟和秒，且具有较高的视觉...

    js时钟

    【标题】：“js时钟”指的是使用JavaScript编程语言创建的实时动态显示时间的代码实现。JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它可以直接在用户浏览器上运行，无需服务器支持，能够方便地更新...

    漂亮JS时钟 很酷很炫

    在本案例中，"漂亮JS时钟"是一个利用JavaScript实现的视觉效果丰富的时钟应用，旨在提供一种时尚且吸引人的方式来显示时间。 首先，我们关注的核心文件是`clock.js`，这是一个JavaScript源代码文件，里面包含了实现...

    纯Js实现的精美液晶时钟

    "纯Js实现的精美液晶时钟"项目就是一个利用JavaScript的强大功能，来创建一个模拟液晶显示屏效果的时钟。这个项目完全基于JavaScript，不依赖任何外部库，展现了JS在实现复杂动画和实时更新能力上的潜力。 液晶显示...

    js动态实现美观的时钟展示显示

    例如，使用CSS3的过渡效果，当时间变化时，时钟的背景颜色或数字颜色可以平滑地过渡： ```css #clock { transition: background-color 0.5s ease, color 0.5s ease; } ``` 还可以通过JavaScript动态改变这些样式...

    漂亮的js时钟样式网页代码.rar

    在这个主题中，我们关注的是“漂亮的js时钟样式网页代码”，这通常指的是利用JavaScript来创建美观、实时更新的时间显示功能。 首先，JavaScript时钟的核心是Date对象。这个内置对象提供了获取当前日期和时间的方法...

Magicbox
Global site tag (gtag.js) - Google Analytics