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>
Javascript 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
关于IFRAME 自适应高度的研究
Jul 20 Javascript
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
JavaScript实现图片轮播特效
Oct 23 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
You might like
ftp类(myftp.php)
2006/10/09 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
微信红包随机生成算法php版
2016/07/21 PHP
php中final关键字用法分析
2016/12/07 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
YII框架关联查询操作示例
2019/04/29 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
python tkinter窗口最大化的实现
2019/07/15 Python
django列表筛选功能的实现代码
2020/03/27 Python
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
党风廉政承诺书
2014/03/27 职场文书
村党支部换届选举方案
2014/05/02 职场文书
保管员岗位职责
2015/02/14 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
python游戏开发Pygame框架
2022/04/22 Python
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
V Rising 服务器搭建图文教程
2022/06/16 Servers
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python