- 浏览: 3117881 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (372)
- diy (4)
- linux (19)
- 杂项 (30)
- Swing (21)
- Java2D (21)
- Java3D (5)
- JavaIO (9)
- Java通讯 (5)
- Java设计模式 (3)
- Java多媒体 (0)
- Java算法 (7)
- Spring&EJB (29)
- Javaoffice (4)
- web前端 (23)
- javascript (1)
- php基础 (1)
- eclipse (3)
- 网站相关 (3)
- Apache (4)
- seo (12)
- db (28)
- server (3)
- api (4)
- 异常 (12)
- 计算机网络词汇表 (3)
- 随想录 (52)
- 收藏 (17)
- 犹太人的智慧 (3)
- 多线程 (1)
- jfreechart (7)
- Test (1)
- SorLib (30)
- ruby on rails (1)
最新评论
-
houyutao:
二三四都是错的空字符串也被匹配,*应该改成+
Java中判断字符串是否为数字的五种方法 -
mingyun:
但是 java.util.ArrayList 实现了 remo ...
java.lang.UnsupportedOperationException 解决方案 -
mingyun:
1.因为 Arrays.asList 返回的是 Arrays内 ...
java.lang.UnsupportedOperationException 解决方案 -
leolu007:
用java8新特性String testStr = " ...
java.lang.UnsupportedOperationException 解决方案 -
zhaohuaxishiwzw:
我之前所在的项目就是日本一家证券公司的项目。完全使用的是j2e ...
抛弃EJB(EJB2.0,EJB3.0,EJB4.0)
一个Javascript编写的时钟。 运行效果如下图:
代码如下:
文章地址:http://javapub.iteye.com/blog/734727
代码如下:
<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>
文章地址:http://javapub.iteye.com/blog/734727
- clock.zip (1.7 KB)
- 下载次数: 6
发表评论
-
JavaScript 实现MD5算法
2011-03-22 10:48 1729对MD5算法简要的叙述可以为:MD5以512位分组来处理输入的 ... -
IE7 window.close()
2011-03-22 10:44 1347window.opener=null; // 不能少,否则依然 ... -
利用CSS使 a超级链接无边框
2011-01-06 16:00 9263我们在给图片加上超级链接时,发现图片上总是有一个超级链接的边框 ... -
Border style的使用
2010-12-17 14:12 1554使用方法: div{ border:1px soli ... -
域名解析中记录类型的作用
2010-12-05 20:42 3376什么是域名解析:域名解析就是域名到IP地址的转换过程。IP地址 ... -
HTML 转义字符串
2010-11-04 18:23 2405为什么要用转义字符串? HTML中<,>,& ... -
JavaScript Number函数
2010-11-04 15:11 1831Number的用法非常简单直接,就是将一个Javascript ... -
用Joomla搭建网站推荐安装的插件
2010-10-09 17:04 42611.网站安全插件 plgSystemJ ... -
CSS在Firefox和IE下的不同和解决方案
2010-09-09 17:42 27531. Div居中问题 div设置 margin-left, m ... -
Servlet的特点和优势
2010-09-02 15:43 10378Servlet是用Java编写的Serve ... -
新手究竟该如何学习Joomla
2010-08-31 17:21 3721Joomla是一套自助式的内容管理系统,可以方便的帮助我们建立 ... -
颜色理论
2010-08-15 13:25 2075应用色彩学 由于生长在一个充满着色彩的世界,色彩一直刺激我们的 ... -
<!DOCTYPE>的作用和使用
2010-08-13 14:01 5064当您打开网易,新浪等网站的任何一个页面的源码时,第一行都会看到 ... -
页面显示器代码效果
2010-08-11 17:19 2124我们在光顾一些特效网站时,为了展示特显,网站经常是让我们直接运 ... -
利用CSS生成精美细线Table表格
2010-08-10 17:31 11658精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面 ... -
DIV的Position属性和DIV嵌套DIV
2010-08-10 10:58 376641.前言 我们在利用div+css ... -
10个设计师戒律
2010-08-05 14:09 1244第一条: 不可抄袭他人之创意,不论有何前提; Not to c ... -
10个WEB设计戒律
2010-08-05 14:08 13691. 不可滥用 Flash,Adobe ... -
JavaScript树形目录 收集整理
2010-07-29 15:14 10277Javascript是Web开发常用的工具,如果自己开发,是比 ... -
DIV+CSS 圆角边框
2010-07-13 17:10 6048利用DIV+CSS生成圆角边框,在很多情况下都会用到,目前DI ...
相关推荐
JavaScript时钟是一个基于JavaScript编程语言实现的实时时间显示功能,它可以动态更新页面上的时间,为用户提供当前日期和时间。在网页开发中,JavaScript时钟常用于创建动态用户体验,例如显示实时倒计时、日程提醒...
在本主题中,我们将深入探讨“纯JavaScript时钟”这一经典特效,它展示了JavaScript如何实时更新页面上的时间显示,无需依赖任何外部库,如jQuery。 在纯JavaScript时钟中,我们首先需要理解JavaScript的时间处理...
javascript时钟,首先从服务器获取一个时间,再从本地机器上获取一个时间,计算时差A。然后每500毫秒从本地机器获取一次时间,用这个时间与时差A进行加减计算,得到服务器时间并打印在首页上。另外每次都要计算当前...
我个人编写的简单的javascript时钟 供初学朋友学习使用
在这个"javascript时钟.zip"压缩包中,我们很显然关注的是如何使用JavaScript来实现一个实时更新的时钟功能。这个功能对于网页开发者来说非常重要,因为它能够帮助用户了解当前时间,增强用户体验。 在JavaScript中...
纯JavaScript时钟效果,可以直接在您的网页中直接引用。!!
在“不错的javascript时钟效果”这个项目中,我们看到一个利用JavaScript实现的独特时钟,它具有倒影效果,增加了视觉吸引力,并且代码结构清晰,易于理解和扩展。 首先,我们关注的是`clock.html`文件,这是网页的...
### 带阴影的JavaScript时钟程序:深入解析与实现 #### 核心知识点概览 1. **JavaScript定时器的使用**:`setTimeout`函数的运用,用于定时更新时钟显示。 2. **日期时间操作**:通过`Date`对象获取当前时间,并...
js 特效 html 特效 纯JavaScript时钟 js 特效 html 特效 纯JavaScript时钟
在这个场景中,我们讨论的“一个简单的JavaScript时钟可以显示一天中的1440分钟”是一个用JavaScript实现的计时器,它不仅显示小时和分钟,还可能包括秒,以展示一天中每一分钟的流逝。 首先,让我们了解一下...
### JavaScript时钟控件知识点详解 #### 一、概述 在网页开发中,有时我们需要在页面上显示实时的时间,这不仅能够为用户提供便利,还能增强网站的交互性和实用性。JavaScript作为一种常用的前端脚本语言,提供了...
网络特效-时钟日历,有50个例子,非常好的JavaScript资料。
### 知识点详解:纯JavaScript时钟 #### 一、项目概述 本文将详细介绍一个完全基于纯JavaScript实现的数字时钟项目。该时钟具备美观的用户界面以及丰富的功能特性,无需借助任何第三方库或框架,使得学习者能够更...
通过这种方式,我们可以实现一个动态的JavaScript时钟。这个项目不仅可以帮助初学者理解JavaScript时间和日期处理,还可以深入学习CSS3的动画和变换效果。在实际的博客说明中,可以详细解释每个步骤,并提供完整的...
JavaScript 实现带滴答音效的时钟
这里的`<style>`标签定义了时钟显示的样式,而`<script>`标签则链接了一个名为`script.js`的外部JavaScript文件,这个文件将包含实现时钟功能的代码。 接下来,我们讨论JavaScript部分。`script.js`文件会包含一个...