js+css3制作时钟特效

站长资源 2024/11/25 佚名

2 0 1

我们先来看看效果图吧

再来奉上源码

<!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"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制作时钟特效,js时钟特效,js,动态时钟特效