• 关于Javascript中页面动态钟表的简单实现


    1、问题并不繁琐,在于HTML中 DOM(文档对象模型)方法的掌握,我的钟表实现重点用到了三个函数和一个事件

       A)setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

         简而言之,这个方法有两个参数,第一个参数是指定需要被调用的函数,第二个参数是指定时间,即以多少毫秒为周期(1000毫秒=1秒)去重复调用指定的方法。结束标志看上述W3c的标准解释。

     

      B)new Date(); 在JavaScript中,所有的变量在该语言中是当做对象来看待的,在使用封装好的方法时需要使用new开辟出来,具体不在详细介绍,有高手比我讲述的会更详细。

     

      C)需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。所以,在div中加一个Id用此方法调用,就实现了连接。

     

    事件: window.onload  window.onload是一个事件,当文档加载完成之后就会触发该事件,可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况。

     

    以下是程序实现 

     

    注意<body>标签中 写的<div  id ="timeshow"></div>

    此处之所以给div写id就是为了script标签中document.getElementById方法的调用。


    注释1:window.onload=function(){   整个script标签内的所有语句   }  之所以加这个方法,在一定程度上讲是为了安全性,保证这些代码在文本代码运行之后一定运行,等于加个安全措施,至于安全措施有没有必要加,看官试试就好。

    注释2:setInterval(function() {   },要求周期时间),之所以将整个代码全部框起来是为了更加显而易见,使看官明白处理的是哪些代码,更加直观

    注释3:从var dt =new Date(); 至   if(s<10){s="0"+s;}  这一段代码要明白,是在表示时期格式,将Date拆分之后 对每个属性进行一个修饰,if语句段属于对数据进行修饰。

    注释4:innerHTML的作用是将调用方法的产物输出在页面上,也就是每次接收每次返回html中的内容。

    以上就是html中实现时钟的步骤,有问题请留言,有时间我会尽可能的解答,也非常乐意指正不足之处。

     

     

     

  • 相关阅读:
    Java并发编程 LockSupport源码分析
    [No000010F]Git8/9-使用GitHub
    [No000010E]Git7/9-标签管理
    [No000010D]Git6/9-分支管理
    [No000010C]Git5/9-远程仓库
    [No000010B]Git4/9-时光机穿梭
    [No000010A]Git3/9-创建版本库
    [No0000109]Git2/9-安装Git
    [No0000108]Git1/9-Git简介与入门
    [No000011D].NETCORE1/19-.NET Core 指南
  • 原文地址:https://www.cnblogs.com/XH09/p/8029992.html
Copyright © 2020-2023  润新知