Javascript学习------js 简单模拟时钟

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title></title>
  5     <style type="text/css">
  6         * { margin: 0px; padding: 0px; }
  7     </style>
  8 </head>
  9 <body>
 10     <div style="width: 130px; height: 130px; border-radius: 130px; position: relative; top: 0px; left: 0px; background: url(//images0.cnblogs.com/blog/474975/201409/161529006907902.png) no-repeat center center;">
 11         <div id="s"></div>
 12         <div id="m"></div>
 13         <div id="h"></div>
 14     </div>
 15 
 16     <script type="text/javascript">
 17         function getid(id) {
 18             if (typeof (id) == "string") return document.getElementById(id);
 19         }
 20         //模拟时钟
 21         function time(hour, m, s) {
 22             this.x = 65;//圆心x
 23             this.y = 65;//圆心y
 24             this.domhour = hour;//时针容器
 25             this.domm = m;//时针容器
 26             this.doms = s;//时针容器
 27             this.shudu;//秒针滚动弧度
 28             this.mhudu;//分针滚动弧度
 29             this.hourhudu;//时针滚动弧度
 30             this.r1 = 50;//移针半径
 31             this.r2 = 40;//分针半径
 32             this.r3 = 35;//时针半径
 33 
 34         };
 35         //初始化
 36         time.prototype.init = function () {
 37             var ts = this;
 38             var html1 = "", html2 = "", html3 = "";
 39             var tphtml = '<s style="background:#586a72; width:1px; height:1px; overflow: hidden; position: absolute; top:0px; left: 0px; display: block; z-index: 0; "></s>';
 40             var tphtml2 = '<s style="background:#586a72; width:2px; height:2px; overflow: hidden; position: absolute; top:0px; left: 0px; display: block; z-index: 0; "></s>';
 41             for (var i = 0; i < ts.r1; i++) {
 42                 html1 += tphtml;//生成移针
 43             }
 44             for (var i = 0; i < ts.r2; i++) {
 45                 html2 += tphtml2;//生成分针
 46             }
 47             for (var i = 0; i < ts.r3; i++) {
 48                 html3 += tphtml2;//生成时针
 49             }
 50             ts.doms.innerHTML = html1;
 51             ts.domm.innerHTML = html2;
 52             ts.domhour.innerHTML = html3;
 53         }
 54         //计算弧度
 55         time.prototype.hudu = function () {
 56             var ts = this;
 57             var datenow = new Date();
 58             var h = datenow.getHours() * 3600;
 59             var m = datenow.getMinutes() * 60;
 60             var s = datenow.getSeconds();
 61             ts.shudu = (2 * Math.PI / 360) * 6 * s;//当前时间 秒针位置
 62             ts.mhudu = (2 * Math.PI / 360) * 0.1 * m;//当前时间 分针位置
 63             ts.hourhudu = (2 * Math.PI / 360) * (360 / (12 * 3600)) * h;//当前时间 时针位置
 64         }
 65         //秒针运动
 66         time.prototype.move = function () {
 67             var ts = this;
 68             ts.init();
 69             setInterval(function () {
 70                 ts.hudu(ts.times);
 71                 for (var i = 0; i < ts.r1; i++) {
 72                     var dom = ts.doms.getElementsByTagName("s")[i];
 73                     var X = Math.round(ts.x + Math.sin(ts.shudu) * i);
 74                     var Y = Math.round(ts.y - Math.cos(ts.shudu) * i);
 75                     dom.style.top = Y + "px";
 76                     dom.style.left = X + "px";
 77                 }
 78                 ts.mmove();
 79                 ts.times++;
 80             }, 1000);
 81         }
 82         //分针运动
 83         time.prototype.mmove = function () {
 84             var ts = this;
 85             for (var i = 0; i < ts.r2; i++) {
 86                 var dom = ts.domm.getElementsByTagName("s")[i];
 87                 var X = Math.round(ts.x + Math.sin(ts.mhudu) * i);
 88                 var Y = Math.round(ts.y - Math.cos(ts.mhudu) * i);
 89                 dom.style.top = Y + "px";
 90                 dom.style.left = X + "px";
 91             }
 92             ts.hourmove();
 93         }
 94         //时针运动
 95         time.prototype.hourmove = function () {
 96             var ts = this;
 97             for (var i = 0; i < ts.r3; i++) {
 98                 var dom = ts.domhour.getElementsByTagName("s")[i];
 99                 var X = Math.round(ts.x + Math.sin(ts.hourhudu) * i);
100                 var Y = Math.round(ts.y - Math.cos(ts.hourhudu) * i);
101                 dom.style.top = Y + "px";
102                 dom.style.left = X + "px";
103             }
104         }
105         var dom1 = getid("h");
106         var dom2 = getid("m");
107         var dom3 = getid("s");
108         new time(dom1, dom2, dom3).move();
109     </script>
110 </body>
111 </html>
*仅供参考
posted on 2014-09-16 15:37 流浪小白鼠阅读(290) 评论(0) 收藏举报