javascript显示一个时钟

最新推荐文章于 2024-07-29 11:53:27 发布

sz_bdqn

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量2.7k

点赞数

文章标签： javascript generator div

本文链接：https://blog.csdn.net/sz_bdqn/article/details/2779080

版权

 
 <HTML>
<HEAD>
<META name="GENERATOR" content="Microsoft FrontPage 5.0">
<META name="ProgId" content="FrontPage.Editor.Document">
<TITLE>指针式时钟</TITLE>
</HEAD>
<BODY οnlοad="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>标记，并且设置为绝对定位。

sz_bdqn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript显示一个时钟

"GENERATOR" content="Microsoft FrontPage 5.0">"ProgId" content="FrontPage.Editor.Document">指针式时钟"clock()">"JavaScript">var S = ......; S = S.split();//构成秒针的圆点 var
复制链接

扫一扫