1、创建part1.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>Date对象的使用-时钟特效</title>

 <script type="text/javascript">

 window.onload=function(){

   //获取第一个input标签

    var inputone=document.getElementsByTagName("input")[0];

    //给input标签添加点击事件

    inputone.onclick=function(){

      setTimeout("timeFun()",2000);

    }

    //获取第2个input标签

    var inputtwo=document.getElementsByTagName("input")[1];

    //给input标签添加点击事件

   var timestr;

    inputtwo.onclick=function(){

      timestr=setInterval("timeFun()",1000);

    }

     //获取第2个input标签

    var inputthree=document.getElementsByTagName("input")[2];

    //给input标签添加点击事件

    inputthree.onclick=function(){

       clearInterval(timestr);

    }

 }

 function timeFun(){

    var date=new Date();

    var year=date.getFullYear(); //获取四位年份

    var month=date.getMonth()+1; //月份

    var day =date.getDate(); //一个月中某一天,范围1-31

    var week=date.getDay(); //星期

    var hour=date.getHours(); //小时数,24进制

    var minutes=date.getMinutes(); //分钟

    var second=date.getSeconds();  //秒

    var time=year+"年"

            +month+"月"

            +day+"日  星期"+week+"  "

            +hour+"时"+minutes+"分"+second+"秒";

         console.log(time);

    document.getElementsByTagName("div")[0].innerHTML=time;

 }

 </script>

 </head>

 <body>

 <input type="button" value="3秒后出现"/>

 <input type="button" value="动态时钟"/>

 <input type="button" value="停止时钟"/>

 <div id="time">

 </div>

 </body>

 </html>

date对象实现时钟特效

2、效果图

3、点击“三秒后出现”

4、点击动态时钟

5、点击停止时钟，时间将停止各秒刷新

3、Data对象的更多相关文章

  1. vue data对象添加新属性触发视图

    <template> <div class="wrap open"> <a>{{test01.name}}</a> <a> ...

  2. Web 前沿——HTML5 Form Data 对象的使用

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...

  3. Vue实例的的data对象

    介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定数据到HTML标签的数据源泉,另外Vue框架会自动监视data里面的数 ...

  4. HTML5 Form Data 对象的使用

    HTML5 Form Data 对象的使用  MDN: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Object ...

  5. vue 深度响应初步了解（检测data对象数据变化）

    当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为 getter/se ...

  6. java 常用类库：格式化NumberFormat；SimpleDataFormat类(转换Data()对象)；DateTimeFormatter 转换LocalDateTime时间对象

    NumberFormat类 该类是一个做数字格式化的类,它是一个抽象类,无法实例化.它提供了parse()和format()方法,其中format用于将数值,格式转化成字符串,parse()用于把字符 ...

  7. vuejsLearn--- -- 怎么查看、修改、追加数据---->data对象

    实例观察的数据对象.可以用一个新的对象替换.实例代理了它的数据对象的属 我们现在对data2添加几项 使用数组push()追加 但是直接这样不能进行数组操作 var data2 = { city: ' ...

  8. Web 前沿——HTML5 Form Data 对象的使用（转）

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...

  9. Web 前沿——HTML5 Form Data 对象的使用

    原文地址:http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html XMLHttpRequest Level 2 添加了一个新的接口-- ...

  10. 【转】Web 前沿——HTML5 Form Data 对象的使用

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...

随机推荐

  1. Amdahl's Law

    Amdahl's Law 程序可能的加速比取决于可以被并行化的部分. 如果没有可以被并行化的部分,则P=0,speedup=1,no speedup. 如果全部可以被并行化,P=1,speedup i ...

  2. Tiny6410之重定位代码到SRAM+4096

    重定位代码 两个不同的地址概念: 对于程序而言,需要理解两个地址,一个是程序当前所处的地址,即程序运行时所处的当前地址.二是程序应该位于的运行地址,即编译程序时所指定的程序的链接地址.在Tiny641 ...

  3. (转载)html中div使用自动高度

    为什么要使用div标签 1.更多的配置项,那就意味着更灵活,当然,难度也更高: 2.可以方便的容纳其他html标签:     static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你 ...

  4. 今天学习的裸板驱动之存储控制器心得（初始化SDRAM）

    CPU只管操作地址,而有些地址代表的是某些存储设备. 但是操作这些存储设备需要很多东西,比如需要制定bank,行/列地址等.所以就有了存储管理器,用来处理这种CPU操作的地址和存储设备间的转换. (1 ...

  5. 【 Note 】GDB调试

    GDB是在linux下的调试功能 命令: 启动文件: 普通调试 gdb 可执行文件 分屏调试 gdb -tui 可执行文件 ->调试: 运行 r 设置断点 b 删除断点 delete 断点编号 ...

  6. swift3.0 原生GET请求 POST同理

    swift3.0 原生GET请求  POST同理 func getrequest(){ let url = URL(string: "http://117.135.196.139:" ...

  7. LCT

    一个LCT看了一天了,但是很多地方还是理解的很模糊,简单谈一下理解. LCT支持的是对于森林的分裂.合并,以及查询节点的连通性等操作. 对于这片森林来说,它是由一坨树组成的,对于每一棵树,我们采用类似 ...

  8. 更改pip源

    ~/.pip/下新建pip.conf文件:(Windows下载Users/xxx/pip/pip.ini) [global] trusted-host = pypi.douban.com index- ...

  9. docker容器安全

    title: docker容器安全 tags: Docker,容器,安全策略 grammar_cjkRuby: true --- Docker容器的安全性 1.安全策略-Cgroup 1.限制Cpu ...

  10. 通过字典给类的实体属性赋值生成url字符串

    private static Dictionary<string, string> SortedToDictionary(SortedDictionary<string, strin ...