`
wzg489326
  • 浏览: 48073 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

表针式时钟

阅读更多
在电脑上看到前辈留下的资料。保存下看看,稍作了调整。
<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标准的一部分。
分享到:
评论

相关推荐

    表针式时钟的C程序

    ### 表针式时钟的C程序解析 #### 一、概述 本篇文章将深入解析一个基于C语言的表针式时钟程序。该程序利用了EasyX图形库来实现时钟界面的绘制,适用于初学者学习图形界面编程的基础概念和技术。 #### 二、EasyX...

    JavaScript时间日期操作实例小结【5个示例】

    2. 表针式时钟 这个实例展示了如何创建一个模拟表针的时钟。同样使用`Date`对象获取当前时间,然后通过计算角度和CSS转换(transform)来显示时针、分针和秒针。由于原始代码过于陈旧,这里没有提供完整的代码,但...

    OpenGL编程实现时钟运动

    指针式时钟是指具有小时、分钟和秒针的模拟时钟。在OpenGL中实现,需要计算每根指针相对于中心点的位置和角度,然后用直线或三角形来表示。时钟的更新通常通过定时器来实现,每隔一定时间(如一秒)就更新一次表针的...

    html5路径封闭多边形旋转表针

    这在制作模拟时钟、仪表盘或其他需要动态指示器的交互式网页应用中非常有用。通过调整路径形状和动画参数,可以实现各种复杂的视觉效果,同时保持高质量的矢量图形渲染,无论屏幕大小如何都能保持清晰。

    简约,漂亮的C#数字时钟,带指针走动

     得到当前系统时间,并将其拼接成一个字符串,数字时钟要显示的字符串,将时,分,秒连成一个字符串,在窗体上画表盘时钟的图形,计算出秒针,时针,分针的另外一个商点,以不同颜色和宽度绘制表针,定时刷新显示...

    可实现改变背景色、表针颜色的控件

    在IT行业中,开发一款能够实现改变背景色和表针颜色的控件,通常是为用户提供更加个性化和交互式的体验。这个控件,正如标题所描述的,是一个“可实现时钟的显示,及改变时钟的背景、时钟等多种颜色”的功能组件。...

    用WPS 2021做个会动的电子时钟.docx

    在本文档中,我们将学习如何使用WPS Office 2021来制作一个动态的电子时钟。WPS Office 2021提供了强大的自定义动画功能,使得用户可以创建出与...通过熟练掌握这些技巧,你可以创作出更多富有创意的互动式演示文稿。

    滑动开关,棒图,表针,流动块,时间元件的设计.rar

    表针,尤其是指针式仪表,是传统仪表的一种形式,通过表盘上的指针旋转来指示测量值。在电子工程中,如电压表、电流表、频率计等,表针能够提供即时读数,特别适用于需要快速响应和精确测量的场合。现代电子设计中,...

    authorware7程序设计制作一个时钟.doc

    在Authorware7中,通过巧妙地组合系统函数和变量,我们可以创建出交互式的多媒体应用程序,比如这个实时时钟,展示了Authorware的强大功能和灵活性。这样的实践有助于提升编程技能,理解图形用户界面的构建原理。

    贵族风格的时钟钟表Flash源码版

    Flash是一种广泛用于创建互动式矢量图形、动画、游戏和应用程序的平台。它基于ActionScript编程语言,可以为网页添加动态内容,提升用户体验。在这个“贵族风格的时钟”中,开发者可能使用了ActionScript 2或3来编写...

    python交互式图形编程实例(三)

    本实例主要展示了如何使用Python的turtle模块创建一个交互式的时钟程序。 首先,我们导入了turtle模块和datetime模块。turtle模块是Python标准库中的一个图形库,它提供了一个简单的API来绘制图形,非常适合初学者...

    基于单片机的双色无表针钟表的设计方案

    本文提出了一种基于单片机的创新性双色无表针钟表设计方案,该方案将传统的指针式钟表转化为由LED灯显示的时间指示器,不仅具有独特的视觉效果,还兼顾了节能和易读性的特点。设计的核心是采用AT89S51单片机作为控制...

    HTML实现AppleWatch界面

    这个项目可能涉及到了对Apple Watch表盘的精确复刻,包括表针的动态效果,以达到与真实设备相似的用户体验。 首先,我们需要理解HTML的基本结构。HTML由一系列的元素(elements)组成,这些元素通过标签(tags)...

    判断数字电路中晶振和复位电压的经验

    这种特性使得晶振成为时钟信号生成、频率合成等应用中的核心组件。 根据文章描述,在测试晶振是否正常工作时,可以通过测量晶振两端的电压来进行初步判断。具体步骤如下: 1. **测量晶振两端电压**: - 使用数字...

    数字电子技术课设(数字钟).doc

    数字钟是一种用数字电路技术实现时、分、秒计时的装置,与机械式时钟相比具有更高的准确性和直观性,且无机械装置,具有更长的使用寿命。数字钟从原理上讲是一种典型的数字电路,其中包括了组合逻辑电路和时序电路。...

    数字电路中晶振和复位电压检测方法

    接着进行开机通电操作,此时若表针有轻微摆动,则说明复位电路工作正常。摆动幅度将根据设定的复位时间不同而有所差异。 检测复位电压时,需要注意复位电路类型。对于低电平复位电路,按照上述方法进行。而对于高电...

    Flash.CS3网站商业设计从入门到精通-教学PPT10

    这需要精心设计ActionScript代码以实现准确的计时控制,并且需要制作相应的UI元素,如表针、按钮和动态文本框来显示计时。 通过以上内容的学习,你可以掌握在Flash CS3中创建动态时间日期显示、模拟时钟以及构建计...

    芯创电子手把手教你学习FPGA—LED篇

    - **直插式LED**: 新的直插式LED通常可以通过引脚的长度来判断正负极,较长的引脚为正极,较短的为负极。 - **贴片式LED**: 从上方看,带有彩色线条的那一边为负极,另一侧则为正极。 **万用表测量法** 使用数字...

Global site tag (gtag.js) - Google Analytics