Javascript时钟

最新推荐文章于 2021-06-28 08:44:32 发布

iteye_17172

最新推荐文章于 2021-06-28 08:44:32 发布

阅读量123

点赞数

分类专栏： web前端文章标签： JavaScript Blog ViewUI

本文链接：https://blog.csdn.net/iteye_17172/article/details/81917993

版权

web前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一个Javascript编写的时钟。运行效果如下图：
[img]http://www.kutoku.info/images/java/100812/clock.png[/img]

代码如下：


<html>
<head>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
function $a(id,attr){return $(id).getAttribute(attr);}
function gn(){
this.drawpoint=function(p1,parent){
   var p=document.createElement("div");
   p.style.overflow="hidden";
   p.style.width="1px";
   p.style.height="1px";
   p.style.position="absolute";
   p.style.top=parseInt(p1.y)+"px";
   p.style.left=parseInt(p1.x)+"px";
   p.style.background=p1.color||"#000";
   ($(parent)||document.body).appendChild(p);
}
this.drawline=function(p1,p2,color,parent){
   if(p1.x==p2.x&&p1.y==p2.y){
    p1.color=color;
    this.drawpoint(p1,parent);
   }else if(p1.x==p2.x){
    var startp=p1.y<p2.y?p1:p2;
    var endp=p1.y<p2.y?p2:p1;
    for(var i=startp.y;i<=endp.y;i++){
     this.drawpoint({"x":p1.x,"y":i,"color":color},parent);
    }
   }else{
    var x_dis=Math.abs(p1.x-p2.x);
    var y_dis=Math.abs(p2.y-p1.y);
    var dis=Math.sqrt(x_dis*x_dis+y_dis*y_dis);
    if(Math.atan(y_dis/x_dis)<Math.PI/4){
     var startp=p1.x<p2.x?p1:p2;
     var endp=p1.x<p2.x?p2:p1;
     var arc=Math.asin(y_dis/dis);
     for(var i=startp.x;i<=endp.x;i++){
      var tmpy=(startp.y-endp.y>0)?(startp.y-(i-startp.x)*Math.tan(arc)):(startp.y+(i-startp.x)*Math.tan(arc));
      this.drawpoint({"x":i,"y":tmpy,"color":color},parent);
     }
    }else{
     var startp=p1.y<p2.y?p1:p2;
     var endp=p1.y<p2.y?p2:p1;
     var arc=Math.asin(x_dis/dis);
     for(var i=startp.y;i<=endp.y;i++){
      var tmpx=(startp.x-endp.x>0)?(startp.x-(i-startp.y)*Math.tan(arc)):(startp.x+(i-startp.y)*Math.tan(arc));
      this.drawpoint({"x":tmpx,"y":i,"color":color},parent);
     }
    }
   }
}
this.drawcircle=function(p1,parent){
   p1.color=p1.color||"#000";
   var midp=Math.floor(Math.sqrt(2)*p1.r/2);
   for(var i=p1.x-midp;i<=p1.x+midp;i++){
    var xdis=Math.abs(i-p1.x);
    var ydis=xdis*Math.tan(Math.acos(xdis/p1.r));
    if(xdis==0){ydis=p1.r;}
    this.drawpoint({"x":i,"y":p1.y+ydis,"color":p1.color},parent);
    this.drawpoint({"x":i,"y":p1.y-ydis,"color":p1.color},parent);
   }
   for(var i=p1.y-midp;i<=p1.y+midp;i++){
    var ydis=Math.abs(i-p1.y);
    var xdis=ydis*Math.tan(Math.acos(ydis/p1.r));
    if(ydis==0){xdis=p1.r;}
    this.drawpoint({"x":p1.x+xdis,"y":i,"color":p1.color},parent);
    this.drawpoint({"x":p1.x-xdis,"y":i,"color":p1.color},parent);
   }
}
}
function movePointer(n,p,n2){
var sec=n%15*Math.PI/30;
if(p=="hours"){
   sec=(n%12%3+n2/60)*Math.PI/6;
}
sec_r=timeConfig.pointer[p];
sec_x=sec_r*Math.sin(sec);
sec_y=sec_r*Math.cos(sec);
$(p).innerHTML="";
switch(Math.floor(n/15)){
   case 0:
    x.drawline(
     {"x":timeConfig.x,"y":timeConfig.y},
     {"x":timeConfig.x+sec_x,"y":timeConfig.y-sec_y},
     "",
     p
    );
    break;
   case 1:
    x.drawline(
     {"x":timeConfig.x,"y":timeConfig.y},
     {"x":timeConfig.x+sec_y,"y":timeConfig.y+sec_x},
     "",
     p
    );
    break;
   case 2:
    x.drawline(
     {"x":timeConfig.x,"y":timeConfig.y},
     {"x":timeConfig.x-sec_x,"y":timeConfig.y+sec_y},
     "",
     p
    );
    break;
   case 3:
    x.drawline(
     {"x":timeConfig.x,"y":timeConfig.y},
     {"x":timeConfig.x-sec_y,"y":timeConfig.y-sec_x},
     "",
     p
    );
    break;
}
}
function start(){
var dt=new Date();
movePointer(dt.getSeconds(),"seconds");
movePointer(dt.getMinutes(),"minutes");
movePointer(dt.getHours(),"hours",dt.getMinutes());
}
</script>
<style type="text/css">
.times{position:absolute;top:0px;left:0px;width:100%;height:100%;background:url('');}
#log{position:absolute;top:187px;left:140px;text-align:center;}
</style>
</head>
<body>
<div id="hours" class="times"><!--时针--></div>
<div id="minutes" class="times"><!--分针--></div>
<div id="seconds" class="times"><!--秒针--></div>
<div id="log">   <a target="_blank" href="http://www.kutoku.com">KuToKu.com<a></div>
<script type="text/javascript">
var timeConfig={
x:200,
y:150,
r:100,
pointer:{
   /*指针设置*/
   "hours":30,
   "minutes":40,
   "seconds":75
},
scale:{
   /*刻度设置*/
   "short":8,
   "long":18
}
};
var x=new gn();
x.drawcircle({x:timeConfig.x,y:timeConfig.y,r:timeConfig.r});
x.drawcircle({x:timeConfig.x,y:timeConfig.y,r:2});
for(var i=0;i<60;i++){
   /*绘制刻度*/
   var tmpa=(i%15)*Math.PI/30;
   var sl=timeConfig.scale[(i%5==0)?"long":"short"];
   var r=timeConfig.r;
   var rdis=timeConfig.r-sl;
   var xdis=rdis*Math.cos(tmpa);
   var ydis=rdis*Math.sin(tmpa);
   var xdis2=r*Math.cos(tmpa);
   var ydis2=r*Math.sin(tmpa);
   switch(Math.floor(i/15)){
    case 0:
     x.drawline(
      {"x":timeConfig.x+xdis,"y":timeConfig.y-ydis},
      {"x":timeConfig.x+xdis2,"y":timeConfig.y-ydis2}
     );
     break;
    case 1:
     x.drawline(
      {"x":timeConfig.x+ydis,"y":timeConfig.y+xdis},
      {"x":timeConfig.x+ydis2,"y":timeConfig.y+xdis2}
     );
     break;
    case 2:
     x.drawline(
      {"x":timeConfig.x-xdis,"y":timeConfig.y+ydis},
      {"x":timeConfig.x-xdis2,"y":timeConfig.y+ydis2}
     );
     break;
    case 3:
     x.drawline(
      {"x":timeConfig.x-ydis,"y":timeConfig.y-xdis},
      {"x":timeConfig.x-ydis2,"y":timeConfig.y-xdis2}
     );
     break;
   }
}
setInterval("start()",1000);
</script>
</body>
</html>

文章地址：[url]http://javapub.iteye.com/blog/734727[/url]

iteye_17172

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript时钟

一个Javascript编写的时钟。运行效果如下图：[img]http://www.kutoku.info/images/java/100812/clock.png[/img]代码如下：[code="java"]function $(id){return document.getElementById(id);}function $a(id,attr){ret...
复制链接

扫一扫