`

Javascript时钟

JavaScriptBlog 
阅读更多
一个Javascript编写的时钟。 运行效果如下图：


代码如下： 
<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">&nbsp;&nbsp;&nbsp;<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>


文章地址：http://javapub.iteye.com/blog/734727
分享到：
| 页面显示器代码效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript时钟

    JavaScript时钟是一个基于JavaScript编程语言实现的实时时间显示功能，它可以动态更新页面上的时间，为用户提供当前日期和时间。在网页开发中，JavaScript时钟常用于创建动态用户体验，例如显示实时倒计时、日程提醒...

    javascript经典特效---纯JavaScript时钟.rar

    在本主题中，我们将深入探讨“纯JavaScript时钟”这一经典特效，它展示了JavaScript如何实时更新页面上的时间显示，无需依赖任何外部库，如jQuery。 在纯JavaScript时钟中，我们首先需要理解JavaScript的时间处理...

    javascript时钟

    javascript时钟，首先从服务器获取一个时间，再从本地机器上获取一个时间，计算时差A。然后每500毫秒从本地机器获取一次时间，用这个时间与时差A进行加减计算，得到服务器时间并打印在首页上。另外每次都要计算当前...

    简单的javascript时钟

    我个人编写的简单的javascript时钟 供初学朋友学习使用

    javascript时钟.zip

    在这个"javascript时钟.zip"压缩包中，我们很显然关注的是如何使用JavaScript来实现一个实时更新的时钟功能。这个功能对于网页开发者来说非常重要，因为它能够帮助用户了解当前时间，增强用户体验。 在JavaScript中...

    纯JavaScript时钟效果

    纯JavaScript时钟效果，可以直接在您的网页中直接引用。！！

    不错的javascript时钟效果

    在“不错的javascript时钟效果”这个项目中，我们看到一个利用JavaScript实现的独特时钟，它具有倒影效果，增加了视觉吸引力，并且代码结构清晰，易于理解和扩展。 首先，我们关注的是`clock.html`文件，这是网页的...

    带阴影的javaScript时钟程序

    ### 带阴影的JavaScript时钟程序：深入解析与实现 #### 核心知识点概览 1. **JavaScript定时器的使用**：`setTimeout`函数的运用，用于定时更新时钟显示。 2. **日期时间操作**：通过`Date`对象获取当前时间，并...

    js 特效 html 特效 纯JavaScript时钟

    js 特效 html 特效 纯JavaScript时钟 js 特效 html 特效 纯JavaScript时钟

    一个简单的JavaScript时钟可以显示一天中的1440分钟

    在这个场景中，我们讨论的“一个简单的JavaScript时钟可以显示一天中的1440分钟”是一个用JavaScript实现的计时器，它不仅显示小时和分钟，还可能包括秒，以展示一天中每一分钟的流逝。 首先，让我们了解一下...

    javascript时钟控件

    ### JavaScript时钟控件知识点详解 #### 一、概述 在网页开发中，有时我们需要在页面上显示实时的时间，这不仅能够为用户提供便利，还能增强网站的交互性和实用性。JavaScript作为一种常用的前端脚本语言，提供了...

    javaScript时钟日历特效

    网络特效-时钟日历，有50个例子，非常好的JavaScript资料。

    纯JavaScript时钟

    ### 知识点详解：纯JavaScript时钟 #### 一、项目概述 本文将详细介绍一个完全基于纯JavaScript实现的数字时钟项目。该时钟具备美观的用户界面以及丰富的功能特性，无需借助任何第三方库或框架，使得学习者能够更...

    javascript实现动态时钟

    通过这种方式，我们可以实现一个动态的JavaScript时钟。这个项目不仅可以帮助初学者理解JavaScript时间和日期处理，还可以深入学习CSS3的动画和变换效果。在实际的博客说明中，可以详细解释每个步骤，并提供完整的...

    JavaScript 时钟

    JavaScript 实现带滴答音效的时钟

    javascript+html实现的时钟

    这里的`&lt;style&gt;`标签定义了时钟显示的样式，而`&lt;script&gt;`标签则链接了一个名为`script.js`的外部JavaScript文件，这个文件将包含实现时钟功能的代码。 接下来，我们讨论JavaScript部分。`script.js`文件会包含一个...

Magicbox
Global site tag (gtag.js) - Google Analytics