首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 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
限流器(1) 轮询锁(1) 死锁(3) sql模式(1) springCloud(6) 全表扫描(1) into outfile(1) 异步机制(1) 逻辑备份(1) 远程连接(2)
You might like
javascript 小型动画组件与实现代码
2010/06/02 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
英国最大的奢侈珠宝和手表网站：C W Sellors
2017/02/10 全球购物
ASOS比利时：英国线上零售商及自有品牌
2018/07/29 全球购物
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Redis RDB技术底层原理详解
2021/09/04 Redis