js html5 时钟的代码兼容 ie9+，火狐，谷歌

最新推荐文章于 2024-07-02 22:34:09 发布

weixin_30470857

最新推荐文章于 2024-07-02 22:34:09 发布

阅读量83

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tanSir/archive/2012/12/18/2824110.html

版权

以前做网页的时候需要用到flash 自学过一段时间的 AS2.0

做过一个钟表的程序，今天得这篇写的也是一样的，只是元素的属性叫法不同而已！

先看看效果图吧，

首先分析一下这个构造，有三个主要部件和一个北京！老婆说这个北京像一个锅底

三根指针的角度由date 对象的几个属性计算得来的角度比例问题在此不再赘述！

图片如上

最关键的问题有二

(1),是指针的旋转中心和自身位置的问题

　　旋转中心用transform-origin: x y; 个人感觉这个和background-position的值差不多；

　　旋转角度用transform:rotate(0deg);

(2),是如何以css 控制 transform 属性 moz 和ie9都可以直接用transform :XXX;而webkit的浏览器要加-webkit-transform:XXXX;这样的形式.

　　为了方便我直接把要用js控制的属性写在style="" 里面

实际上 js 改变css也是有且仅有 obj.style.属性名这个方法；

这里是代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{ margin: 0; padding: 0;}
#pan{ height: 400px; width: 400px; background: url("pab.jpg") no-repeat;}
#s{ height: 180px;
    width: 7px;
    background: url("s_03.png") no-repeat;
    display: inline-block;
    position: absolute;
    margin: 40px 0 0 196px;
    z-index: 3;
    transform-origin: 3px 162px;
    -webkit-transform-origin: 3px 162px;
}
#m{ height: 150px;
    width: 10px;
    background: #13025c;
    margin: 70px 0 0 196px;
    box-shadow:2px 1px 3px #555;
    z-index: 2;
    transform-origin: 5px 132px;
    -webkit-transform-origin: 5px 132px;
    display: inline-block;position: absolute;}
#h{ width: 13px;
    height: 103px;
    margin: 113px 0 0 194px;
    box-shadow:2px 1px 3px #555;
    position: absolute;
    background: url("h_03.png") no-repeat;
    display: inline-block;
    transform-origin: 4px 89px;
    -webkit-transform-origin: 4px 89px;
}
</style>
</head>

<body>
<div id="pan">
    <div id="s" style="transform:rotate(0deg);"></div>
    <div id="m" style="transform:rotate(0deg);"></div>
    <div id="h" style="transform:rotate(0deg);"></div>
</div>
</body>
<script type="text/javascript">


//浏览器的种类
var bor=returnBos();
setInterval("showtimeGo()",100);
function showtimeGo(){
    var mytime=new Date();
    //获得三个对象
    var Os=document.getElementById("s");
    var Om=document.getElementById("m");
    var Oh=document.getElementById("h");
    // Oh.getComputedStyle();
    //获得三个指针的角度
    //第一个是毫秒
    var deg_ms=mytime.getMilliseconds();
    var deg_s=(mytime.getSeconds())*6+(deg_ms*3)/500;
    var deg_m=(mytime.getMinutes())*6;
    var deg_h=(mytime.getHours()*30+mytime.getMinutes()/2);
      if("moz"==bor){
        Os.style.transform="rotate("+deg_s+"deg)";
        Om.style.transform="rotate("+deg_m+"deg)";
        Oh.style.transform="rotate("+deg_h+"deg)";
      } else{
        Os.style.webkitTransform="rotate("+deg_s+"deg)";
        Om.style.webkitTransform="rotate("+deg_m+"deg)";
        Oh.style.webkitTtransform="rotate("+deg_h+"deg)";
      }
    //test();
    //测试个浏览器 下的属性与方法
    function test(){
        var str='';
        for(var n in Os.style){
            str+=n+":"+Os.style[n]+"<br>";
        }
        document.write(str);
    }
}


//浏览器器简介
 function returnBos(){
        var reg1=/Firefox/;
        var reg2=/MSIE/;
        var reg3=/Chrome|Safari/;
        var str=navigator.userAgent ;
        //alert(str);
        if(reg1.test(str)){
           // alert("这是火狐");
            return "moz";
        }
        if(reg2.test(str)){
            //alert("这是IE");
            return "ms";
        }
        if(reg3.test(str)){
            //alert("这是谷歌或者苹果");
            return "webkit";
        }
 }


</script>
</html>

本来是一秒钟执行一次的但是感觉指针走的太生硬了！

此demo 还有很多不足之处，比如分针跳格太猛了

转载于:https://www.cnblogs.com/tanSir/archive/2012/12/18/2824110.html

weixin_30470857

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js html5 时钟的代码兼容 ie9+，火狐，谷歌

以前做网页的时候需要用到flash 自学过一段时间的 AS2.0做过一个钟表的程序，今天得这篇写的也是一样的，只是元素的属性叫法不同而已！先看看效果图吧，首先分析一下这个构造，有三个主要部件和一个北京！老婆说这个北京像一个锅底三根指针的角度由date 对象的几个属性计算得来的角度比例问题在此不再赘述！图片如上最关键的问题有二(1),是指针的旋转中心...
复制链接

扫一扫