HTML与JavaScript时钟-优快云博客

本文链接：https://blog.youkuaiyun.com/princegang/article/details/83291381

在电脑上看到前辈留下的资料。保存下看看，稍作了调整。


<html>
<head>
    <title></title>
    <script language=javascript>
        <!--
        var pX = 100
        var pY = 70
        var pointer = new Array(13)
        var i;
        function pt()
        {
            for (i = 0; i < 13; i++)
            {
                if (document.all)
                    pointer[i] = new Array(document.getElementById('pt' + i).style, -100, -100)
                else
                    pointer[i] = new Array(document.getElementById('pt' + i).style, -100, -100)
            }

        }

        function cl(a, b, c)
        {
            if (document.all)
            {
                if (a != 0) b += -1
                document.getElementById('c' + a).style.pixelTop = pY + c
                document.getElementById('c' + a).style.pixelLeft = pX +b
            }
            else
            {
                if (a != 0) b += 10
                document.getElementById('c' + a).style.top = pY +c;
                document.getElementById('c' + a).style.left = pX +b;
            }
            if (document.all)
                c0.style.pixelLeft = 26
        }

        function runClock()
        {
            for (i = 0; i < 13; i++)
            {
                pointer[i][0].left = pointer[i][1] + pX
                pointer[i][0].top = pointer[i][2] + pY
            }
        }
        var lastsec

        function timer()
        {
            var time = new Date()
            var sec = time.getSeconds()
            if (sec != lastsec)
            {
                lastsec = sec
                sec = Math.PI * sec / 30
                var min = Math.PI * time.getMinutes() / 30
                var hr = Math.PI * ((time.getHours() * 60) + time.getMinutes()) / 360
                for (i = 1; i < 6; i++)
                {
                    pointer[i][1] = Math.sin(sec) * (44 - (i - 1) * 11) - 16;
                    if (document.layers) pointer[i][1] += 10;
                    pointer[i][2] = -Math.cos(sec) * (44 - (i - 1) * 11) - 27;
                }
                for (i = 6; i < 10; i++)
                {
                    pointer[i][1] = Math.sin(min) * (40 - (i - 6) * 10) - 16;
                    if (document.layers) pointer[i][1] += 10;
                    pointer[i][2] = -Math.cos(min) * (40 - (i - 6) * 10) - 27;
                }
                for (i = 10; i < 13; i++)
                {
                    pointer[i][1] = Math.sin(hr) * (37 - (i - 10) * 11) - 16;
                    if (document.layers) pointer[i][1] += 10;
                    pointer[i][2] = -Math.cos(hr) * (37 - (i - 10) * 11) - 27;
                }
            }
        }

        function setNum()
        {
            cl(0, -67, -65);
            cl(1, 10, -51);
            cl(2, 28, -33);
            cl(3, 35, -8);
            cl(4, 28, 17);
            cl(5, 10, 35);
            cl(6, -15, 42);
            cl(7, -40, 35);
            cl(8, -58, 17);
            cl(9, -65, -8);
            cl(10, -58, -33);
            cl(11, -40, -51);
            cl(12, -16, -56);
        }
        //-->
    </script>
</head>

<body bgcolor="#fef4d9" onLoad="pt(),setNum(),setInterval('timer()',100);setInterval('runClock()',100)">
<div id="c0" style="position:absolute;right:6;top:6; z-index:2;"></div>
<div id="c1" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>1</b></div>
<div id="c2" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>2</b></div>
<div id="c3" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>3</b></div>
<div id="c4" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>4</b></div>
<div id="c5" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>5</b></div>
<div id="c6" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>6</b></div>
<div id="c7" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>7</b></div>
<div id="c8" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>8</b></div>
<div id="c9" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>9</b></div>
<div id="c10" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>10</b></div>
<div id="c11" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>11</b></div>
<div id="c12" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>12</b></div>
<div id="pt0" style="position:absolute;left:-20;top:-20;z-index:1"></div>
<div id="pt1" style="position:absolute;left:-20;top:-20;z-index:8"><font size="+3" color="#0000FF"><b>.</b></font></div>
<div id="pt2" style="position:absolute;left:-20;top:-20;z-index:8"><font size="+3" color="#0000FF"><b>.</b></font></div>
<div id="pt3" style="position:absolute;left:-20;top:-20;z-index:8"><font size="+3" color="#0000FF"><b>.</b></font></div>
<div id="pt4" style="position:absolute;left:-20;top:-20;z-index:8"><font size="+3" color="#0000FF"><b>.</b></font></div>
<div id="pt5" style="position:absolute;left:-20;top:-20;z-index:8"><font size="+3" color="#0000FF"><b>.</b></font></div>
<div id="pt6" style="position:absolute;left:-20;top:-20;z-index:7"><font size="+3" color="#00FFFF"><b>.</b></font></div>
<div id="pt7" style="position:absolute;left:-20;top:-20;z-index:7"><font size="+3" color="#00FFFF"><b>.</b></font></div>
<div id="pt8" style="position:absolute;left:-20;top:-20;z-index:7"><font size="+3" color="#00FFFF"><b>.</b></font></div>
<div id="pt9" style="position:absolute;left:-20;top:-20;z-index:7"><font size="+3" color="#00FFFF"><b>.</b></font></div>
<div id="pt10" style="position:absolute;left:-20;top:-20;z-index:6"><font size="+3" color="#F30000"><b>.</b></font>
</div>
<div id="pt11" style="position:absolute;left:-20;top:-20;z-index:6"><font size="+3" color="#F30000"><b>.</b></font>
</div>
<div id="pt12" style="position:absolute;left:-20;top:-20;z-index:6"><font size="+3" color="#F30000"><b>.</b></font>
</div>
</body>
</html>

转
[url]http://hi.baidu.com/lulufei/blog/item/40b4e7cebc78560092457eb5.html
[/url]
if(!document.layers&&!document.all) 意思是判断网页中的元素是否存在。
document.all表示在IE浏览器中document对象下所有的下级元素集合。
document.layers和document.all是一个意思，只是它是针对Nescape浏览器。

document.all是IE 4.0及以上版本的专有属性，是一个表示当前文档的所有对象的娄组，不仅包括页面上可见的实体对象，还包括一些不可见的对象，比如html注释等等。document.layers是Netscape 4.x专有的属性，是一个代表所有由储如<div><layer>等定位了的元素的数组。新的统一的标准用document.getElementById等系列方法来引用DOM对象，而且Netscape 6.0以后放弃了layers特征，虽然IE继续保留了document.all，但这最终没有成为DOM标准的一部分。

表针式时钟