编程 Javascript

js+css3制作时钟特效

Posted in Javascript onOctober 16, 2016

我们先来看看效果图吧

js+css3制作时钟特效

再来奉上源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS3 钟表</title>
  <style>
    .clock{
      position: relative;
      width: 200px;
      height: 200px;
      border-radius: 110px;
      border: 10px solid #000;
      margin: 200px auto;
    }
    .line1,.line4{
      position: absolute;
      background-color: #aaa;
      width: 10px;
      height: 200px;
      left: 50%;
      margin-left: -5px;
    }
    .line2,.line3,.line5,.line6{
      position: absolute;
      background-color: #ccc;
      width: 8px;
      height: 200px;
      left: 50%;
      margin-left: -4px;
    }
    .line2{
      transform: rotate(30deg);
    }
    .line3{
      transform: rotate(60deg);
    }
    .line4{
      transform: rotate(90deg);
    }
    .line5{
      transform: rotate(120deg);
    }
    .line6{
      transform: rotate(150deg);
    }
    .cover{
      position: absolute;
      width: 180px;
      height: 180px;
      background-color: #fff;
      left: 50%;
      top: 50%;
      margin: -90px 0 0 -90px;
      border-radius: 90px;
    }
    .dotted{
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #000;
      border-radius: 10px;
      left: 50%;
      top: 50%;
      z-index: 2;
      margin: -10px 0 0 -10px;
    }
    .hour{
      position: absolute;
      width: 10px;
      height: 60px;
      background-color: #ccc;
      left: 50%;
      top: 50%;
      margin: -60px 0 0 -5px;
    }
    .minute{
       position: absolute;
       width: 8px;
       height: 70px;
       background-color: #ddd;
       left: 50%;
       top: 50%;
      margin: -70px 0 0 -4px;
     }
    .seconds{
      position: absolute;
      width: 6px;
      height: 80px;
      background-color: red;
      left: 50%;
      top: 50%;
      margin: -80px 0 0 -3px;
    }
    .minute,.hour,.seconds{
      transform-origin: center bottom;
    }
  </style>
  <script>
    window.onload = function () {
      var hour = document.querySelector(".hour");
      var minute = document.querySelector(".minute");
      var second = document.querySelector(".seconds");
      var h = 0,m = 0,s = 0,ms =0;
      setInterval(fn,10);
      function fn () {
        var date = new Date();
        ms = date.getMilliseconds();
        s = date.getSeconds()+ms/1000;
        m = date.getMinutes()+s/60;
        h = date.getHours()%12+m/60;
        second.style.WebkitTransform = "rotate("+s*6+"deg)";
        minute.style.WebkitTransform = "rotate("+m*6+"deg)";
        hour.style.WebkitTransform = "rotate("+h*30+"deg)";
      }
    }
  </script>
</head>
<body>
<div class="clock">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
  <div class="line4"></div>
  <div class="line5"></div>
  <div class="line6"></div>
  <div class="cover"></div>
  <div class="dotted"></div>
  <div class="hour"></div>
  <div class="minute"></div>
  <div class="seconds"></div>
</div>
</body>
</html>

再给大家分享一个网友的作品

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8">
<title>利用JS和CSS3制作的时钟效果</title>
<style type="text/css">
#clock{width:300px;height:300px;border:15px solid #333;position:relative;
    border-radius:300px;
    -moz-border-radius:300px;
    -webkit-border-radius:300px;
    -o-border-radius:300px;
    -ms-border-radius:300px;
    background:#ddd;
    background:radial-gradient(#fff,#ddd);
    background:-moz-radial-gradient(#fff,#ddd);
    background:-webkit-radial-gradient(#fff,#ddd);
    background:-o-radial-gradient(#fff,#ddd);
    background:-ms-radial-gradient(#fff,#ddd);
    box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
    -moz-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
    -webkit-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
    -o-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
    -ms-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
}
.clock-core{width:16px;height:16px;background:#f00;position:absolute;left:50%;top:50%;margin:-8px 0 0 -8px;z-index:30;
    border-radius:16px;
    -moz-border-radius:16px;
    -webkit-border-radius:16px;
    -o-border-radius:16px;
    -ms-border-radius:16px;
}
#clock-h,#clock-m,#clock-s{width:6px;height:70px;background:#333;position:absolute;left:50%;top:50%;margin:-70px 0 0 -3px;z-index:10;
    transform-origin:50% 100%;
    -moz-transform-origin:50% 100%;
    -webkit-transform-origin:50% 100%;
    -o-transform-origin:50% 100%;
    -ms-transform-origin:50% 100%;
}
#clock-m{height:100px;margin-top:-100px}
#clock-s{width:2px;height:155px;margin:-135px 0 0 -1px;background:#f00;
    transform-origin:50% 87.097%;
    -moz-transform-origin:50% 87.097%;
    -webkit-transform-origin:50% 87.097%;
    -o-transform-origin:50% 87.097%;
    -ms-transform-origin:50% 87.097%;
}
#clock-h b,#clock-m b{width:0;height:0;font-size:0;border:3px dashed transparent;border-bottom:3px solid #333;position:absolute;left:0;top:-6px}
.big-mark,.small-mark{width:4px;height:12px;background:#333;position:absolute;left:50%;top:0;margin-left:-2px;
    transform-origin:50% 0%;
    -moz-transform-origin:50% 0%;
    -webkit-transform-origin:50% 0%;
    -o-transform-origin:50% 0%;
    -ms-transform-origin:50% 0%;
}
.small-mark{width:2px;height:5px;background:#999;margin-left:-1px}
.big-mark i{font:700 20px/1.5 Arial;position:absolute;left:-100%;top:12px}
.c60 i{font:700 20px/1.5 Arial;position:absolute;left:-200%;top:12px}
#clock-date{width:170px;height:24px;line-height:24px;background:#fff;color:#666;border:1px solid #ccc;text-align:center;position:absolute;left:50%;bottom:70px;margin:0 0 0 -85px;border-radius:6px}
</style>
<script type="text/javascript">
function clock(){
    var $=function(id){return document.getElementById(id)};
    //写入刻度DOM，以及刻度的定位
    function mark(){
        //圆的半径
        var r=parseFloat(window.getComputedStyle?window.getComputedStyle($("clock"),null).width:$("clock").currentStyle["width"])/2;
        //插入DOM
        for(var i=1;i<61;i++){
            $("clock-mark").innerHTML+="<b class='c"+i+"'><i></i></b>";
            var ci=document.getElementsByClassName("c"+i)[0];
            var cii=ci.getElementsByTagName("i")[0];
            //利用正弦定理计算刻度的定位
            ci.style.left=r+r*(Math.sin(i*6*2*Math.PI/360))+"px";
            /*注意正弦的角度制算法和弧度制算法，Math.sin的参数是弧度制算法，所以先把角度转换成弧度，再计算*/
            ci.style.top=r-r*(Math.sin((90-i*6)*2*Math.PI/360))+"px";
            //计算转动的角度
            /*other*/
            ci.style.transform="rotate("+i*6+"deg)";
            /*FF*/
            ci.style.MozTransform="rotate("+i*6+"deg)";
            /*webkit*/
            ci.style.WebkitTransform="rotate("+i*6+"deg)";
            /*opera*/
            ci.style.OTransform="rotate("+i*6+"deg)";
            /*ms*/
            ci.style.msTransform="rotate("+i*6+"deg)";
            //大刻度
            if(i%5==0){
                ci.className="c"+i+" "+"big-mark";
                cii.innerHTML=i/5;
                }
            //小刻度
            else{
                ci.className="c"+i+" "+"small-mark";
                ci.removeChild(cii);
                }
            //把数字转正
            var iRotate=-i*6;
            cii.style.transform="rotate("+iRotate+"deg)";
            cii.style.MozTransform="rotate("+iRotate+"deg)";
            cii.style.WebkitTransform="rotate("+iRotate+"deg)";
            cii.style.OTransform="rotate("+iRotate+"deg)";
            cii.style.msTransform="rotate("+iRotate+"deg)";
            }
        }
    //指针的转动
    function turnR(){
        var d=new Date();
        var h=d.getHours();
        var m=d.getMinutes();
        var s=d.getSeconds();
        var sRadius=360/60*s;
        var mRadius=360/60*m;
        //如果需要分针匀速移动，就赋值var mRadius=360/60*m+360/60/60*s
        var hRadius=360/12*h+30/60*m;
        var ch=$("clock-h");
        var cm=$("clock-m");
        var cs=$("clock-s");
        /*other*/
        ch.style.transform="rotate("+hRadius+"deg)";
        cm.style.transform="rotate("+mRadius+"deg)";
        cs.style.transform="rotate("+sRadius+"deg)";
        /*FF*/
        ch.style.MozTransform="rotate("+hRadius+"deg)";
        cm.style.MozTransform="rotate("+mRadius+"deg)";
        cs.style.MozTransform="rotate("+sRadius+"deg)";
        /*webkit*/
        ch.style.WebkitTransform="rotate("+hRadius+"deg)";
        cm.style.WebkitTransform="rotate("+mRadius+"deg)";
        cs.style.WebkitTransform="rotate("+sRadius+"deg)";
        /*opera*/
        ch.style.OTransform="rotate("+hRadius+"deg)";
        cm.style.OTransform="rotate("+mRadius+"deg)";
        cs.style.OTransform="rotate("+sRadius+"deg)";
        /*ms*/
        ch.style.msTransform="rotate("+hRadius+"deg)";
        cm.style.msTransform="rotate("+mRadius+"deg)";
        cs.style.msTransform="rotate("+sRadius+"deg)";
        setTimeout(turnR,1000);
        }
    /*显示日期*/
    function clockDate(){
        var d=new Date();
        var week=["日","一","二","三","四","五","六"];
        $("clock-date").innerHTML=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+" 星期"+week[d.getDay()];
        }
    //调用函数
    mark();
    turnR();
    clockDate();
    }
window.onload=clock;
</script>
</head>
<body>
<div id="clock">
    <b class="clock-core"></b>
  <div id="clock-h">
      <b></b>
  </div>
  <div id="clock-m">
      <b></b>
  </div>
  <div id="clock-s"></div>
  <div id="clock-mark"></div>
  <div id="clock-date"></div>
</div>
</body>
</html>

js+css3制作时钟特效

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Div自动滚动到末尾的代码

Oct 26 Javascript

javascript 多级checkbox选择效果

Aug 20 Javascript

zeroclipboard复制到剪切板的flash

Aug 04 Javascript

js 连接数据库如何操作数据库中的数据

Nov 23 Javascript

JS+CSS实现实用的单击输入框弹出选择框的方法

Feb 28 Javascript

分享我的jquery实现下拉菜单心的

Nov 29 Javascript

JavaScript获取服务器端时间的方法

Nov 29 Javascript

JavaScript实现多栏目切换效果

Dec 12 Javascript

微信小程序开发之滑块视图容器(swiper)详解及实例代码

Feb 22 Javascript

浅谈Vue.js应用的四种AJAX请求数据模式

Aug 30 Javascript

JavaScript之创意时钟项目(实例讲解)

Oct 23 Javascript

小程序组件之自定义顶部导航实例

Jun 12 Javascript

js实现可旋转的立方体模型

Oct 16 #Javascript

移动端滑动插件Swipe教程

Oct 16 #Javascript

类似于QQ的右滑删除效果的实现方法

Oct 16 #Javascript

js实现点击图片自动提交action的简单方法

Oct 16 #Javascript

jQuery监听文件上传实现进度条效果的方法

Oct 16 #Javascript

浅谈js对象的创建和对6种继承模式的理解和遐想

Oct 16 #Javascript

利用jQuery对无序列表排序的简单方法

Oct 16 #Javascript