javascript显示一个时钟
2008-08-06 22:46
417 查看
<HTML>
<HEAD>
<META name="GENERATOR" content="Microsoft FrontPage 5.0">
<META name="ProgId" content="FrontPage.Editor.Document">
<TITLE>指针式时钟</TITLE>
</HEAD>
<BODY onload="clock()">
<SCRIPT LANGUAGE="JavaScript">
var S = '......'; S = S.split('');//构成秒针的圆点
var M = '.....'; M = M.split('');//构成分针的圆点
var H = '....'; H = H.split('');//构成时针的圆点
var Ybase = 8; //构成秒、分和时针的圆点之间的间隔距离(Y轴)
var Xbase = 8; //构成秒、分和时针的圆点之间的间隔距离(X轴)
var dots = 12; //钟盘上的小时刻度数,通常为12,即1,2,3,...,12
for (var i = 0; i < dots; i++)
{//将小时刻度值(即1,2,3,...,12)分别放入各自的<DIV>块中,且其id属性相同,即dot_Digits
document.write('<DIV id="dot_Digits" style="position:absolute;width:30px;height:30px;font-size:10px;color:black;text-align:center;padding-top:10px">'+(i+1)+'</DIV>');
}
for (i = 0; i < S.length; i++)
{//将构成秒针的圆点分别放入各自的<DIV>块中,且其id属性相同,即s_dots
document.write('<DIV id=s_dots style="position:absolute;width:2px;height:2px;font-size:2px;background:red"></DIV>');
}
for (i = 0; i < M.length; i++)
{//将构成分针的圆点分别放入各自的<DIV>块中,且其id属性相同,即m_dots
document.write('<DIV id=m_dots style="position:absolute;width:2px;height:2px;font-size:2px;background:black"></DIV>');
}
for (i = 0; i < H.length; i++)
{//将构成时针的圆点分别放入各自的<DIV>块中,且其id属性相同,即h_dots
document.write('<DIV id=h_dots style="position:absolute;width:2px;height:2px;font-size:2px;background:black"></DIV>');
}
function clock()
{//显示指针式时钟
var time = new Date ();
var secs = time.getSeconds();
var mins = time.getMinutes();
var hrs = time.getHours();
var Ypos = document.body.scrollTop +80; //把时钟中心设置为距可视区顶边 80 pixel
var Xpos = document.body.scrollLeft +100;//把时钟中心设置为距可视区左边界 100 pixel
for (var i=0; i < dots; ++i)
{//根据新的时钟中心和各个小时刻度值的角度值,设置其新坐标
dot_Digits[i].style.pixelTop = Ypos -15 + 44 * Math.sin(-Math.PI/2+2*Math.PI*(i+1)/12);
dot_Digits[i].style.pixelLeft = Xpos -15 + 44 * Math.cos(-Math.PI/2+2*Math.PI*(i+1)/12);
}
var sec = -Math.PI/2 + 2*Math.PI * secs/60; //秒针角度
for (i=0; i < S.length; i++)
{//根据新的时钟中心和秒针角度,设置秒针上各个圆点的坐标值
s_dots[i].style.pixelTop = Ypos + i * Ybase * Math.sin(sec);
s_dots[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(sec);
}
var min = -Math.PI/2 + 2*Math.PI * mins/60; //分针角度
for (i=0; i < M.length; i++)
{//根据新的时钟中心和分针角度,设置分针上各个圆点的坐标值
m_dots[i].style.pixelTop = Ypos + i * Ybase * Math.sin(min);
m_dots[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(min);
}
var hr = -Math.PI/2 + 2*Math.PI * (hrs+mins/60)/12; //时针角度
for (i=0; i < H.length; i++)
{//根据新的时钟中心和时针角度,设置时针上各个圆点的坐标值
h_dots[i].style.pixelTop = Ypos + i * Ybase*Math.sin(hr);
h_dots[i].style.pixelLeft = Xpos + i * Xbase*Math.cos(hr);
}
setTimeout('clock()', 50);//定时
}
</SCRIPT>
</BODY>
</HTML>
设计思路
1、根据document.body对象的scrollTop和scrollLeft属性把时钟中心设置在页面可视区的左上角。
2、通过显示连续的几个小圆点 “.”来模拟显示秒针、分针和时针;而对于各个点的显示位置,可以根据各个指针的长度和角度计算得出。
3、为便于重新定位,可将表示时钟的所有元素(即小时刻度值和小圆点“.”)放入<DIV>标记,并且设置为绝对定位。
<HEAD>
<META name="GENERATOR" content="Microsoft FrontPage 5.0">
<META name="ProgId" content="FrontPage.Editor.Document">
<TITLE>指针式时钟</TITLE>
</HEAD>
<BODY onload="clock()">
<SCRIPT LANGUAGE="JavaScript">
var S = '......'; S = S.split('');//构成秒针的圆点
var M = '.....'; M = M.split('');//构成分针的圆点
var H = '....'; H = H.split('');//构成时针的圆点
var Ybase = 8; //构成秒、分和时针的圆点之间的间隔距离(Y轴)
var Xbase = 8; //构成秒、分和时针的圆点之间的间隔距离(X轴)
var dots = 12; //钟盘上的小时刻度数,通常为12,即1,2,3,...,12
for (var i = 0; i < dots; i++)
{//将小时刻度值(即1,2,3,...,12)分别放入各自的<DIV>块中,且其id属性相同,即dot_Digits
document.write('<DIV id="dot_Digits" style="position:absolute;width:30px;height:30px;font-size:10px;color:black;text-align:center;padding-top:10px">'+(i+1)+'</DIV>');
}
for (i = 0; i < S.length; i++)
{//将构成秒针的圆点分别放入各自的<DIV>块中,且其id属性相同,即s_dots
document.write('<DIV id=s_dots style="position:absolute;width:2px;height:2px;font-size:2px;background:red"></DIV>');
}
for (i = 0; i < M.length; i++)
{//将构成分针的圆点分别放入各自的<DIV>块中,且其id属性相同,即m_dots
document.write('<DIV id=m_dots style="position:absolute;width:2px;height:2px;font-size:2px;background:black"></DIV>');
}
for (i = 0; i < H.length; i++)
{//将构成时针的圆点分别放入各自的<DIV>块中,且其id属性相同,即h_dots
document.write('<DIV id=h_dots style="position:absolute;width:2px;height:2px;font-size:2px;background:black"></DIV>');
}
function clock()
{//显示指针式时钟
var time = new Date ();
var secs = time.getSeconds();
var mins = time.getMinutes();
var hrs = time.getHours();
var Ypos = document.body.scrollTop +80; //把时钟中心设置为距可视区顶边 80 pixel
var Xpos = document.body.scrollLeft +100;//把时钟中心设置为距可视区左边界 100 pixel
for (var i=0; i < dots; ++i)
{//根据新的时钟中心和各个小时刻度值的角度值,设置其新坐标
dot_Digits[i].style.pixelTop = Ypos -15 + 44 * Math.sin(-Math.PI/2+2*Math.PI*(i+1)/12);
dot_Digits[i].style.pixelLeft = Xpos -15 + 44 * Math.cos(-Math.PI/2+2*Math.PI*(i+1)/12);
}
var sec = -Math.PI/2 + 2*Math.PI * secs/60; //秒针角度
for (i=0; i < S.length; i++)
{//根据新的时钟中心和秒针角度,设置秒针上各个圆点的坐标值
s_dots[i].style.pixelTop = Ypos + i * Ybase * Math.sin(sec);
s_dots[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(sec);
}
var min = -Math.PI/2 + 2*Math.PI * mins/60; //分针角度
for (i=0; i < M.length; i++)
{//根据新的时钟中心和分针角度,设置分针上各个圆点的坐标值
m_dots[i].style.pixelTop = Ypos + i * Ybase * Math.sin(min);
m_dots[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(min);
}
var hr = -Math.PI/2 + 2*Math.PI * (hrs+mins/60)/12; //时针角度
for (i=0; i < H.length; i++)
{//根据新的时钟中心和时针角度,设置时针上各个圆点的坐标值
h_dots[i].style.pixelTop = Ypos + i * Ybase*Math.sin(hr);
h_dots[i].style.pixelLeft = Xpos + i * Xbase*Math.cos(hr);
}
setTimeout('clock()', 50);//定时
}
</SCRIPT>
</BODY>
</HTML>
设计思路
1、根据document.body对象的scrollTop和scrollLeft属性把时钟中心设置在页面可视区的左上角。
2、通过显示连续的几个小圆点 “.”来模拟显示秒针、分针和时针;而对于各个点的显示位置,可以根据各个指针的长度和角度计算得出。
3、为便于重新定位,可将表示时钟的所有元素(即小时刻度值和小圆点“.”)放入<DIV>标记,并且设置为绝对定位。
相关文章推荐
- 一个简洁的(javascript时钟)动态显示日期时间
- 一个网页上随鼠标移动显示时钟的javascript 代码
- 下面是一个时钟显示的JavaScript文档。在文档中用了非常多的函数
- javascript显示一个时钟
- JavaScript练习—在页面中显示一个九九乘法表
- javascript实现 时钟实时显示及幻灯片自动播放
- ASP.NET MVC-- 在网页上显示一个时钟
- 在你的网页里面显示时间(javascript 时钟原理)
- 用javascript写一个显示时间差 几分钟前 几小时前 几天前 几周前 大于一个月显示日期
- 分享一个很有意思的js,动态时钟显示,能跟随鼠标移动
- 一个显示时钟的脚本
- 动态显示日期时间(javascript时钟)
- 题目:JavaScript编程题 页面上输入一个年份(需验证),判断是否是闰年(能被4整除却不能被100整除的年份;能被400整除的是闰年),需在页面上显示提示信息
- 在网页上显示一个会移动的透明时钟的代码。。。
- 在网页中显示一个时钟 (js)
- 一个不错的,JavaScript代码,显示首页图片幻灯片效果
- 用javascript做的一个背景时钟
- javascript与jQuery设置取得div绝对位置一个小应用(像日历控件一样,在编辑框下面显示一个层)
- JavaScript 在页面上显示数字时钟
- 一个实时显示系统时钟的android应用