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. minSdkVersion与targetSdkVersion

    targetSdkVersion是Android提供向前兼容的主要依据,在应用的targetSdkVersion没有更新之前,系统不会应用最新的行为变化 比如设置了app的targetSdkVersi ...

  2. Elasticsearch 5.0 安装 Search Guard 5 插件 （五）

    一.Search Guard 简介 Search Guard  是 Elasticsearch 的安全插件.它为后端系统(如LDAP或Kerberos)提供身份验证和授权,并向Elasticsearc ...

  3. AC自动机(AC automation)

    字典树+KMP 参考自: http://www.cppblog.com/mythit/archive/2009/04/21/80633.html ; //字典大小 //定义结点 struct node ...

  4. JavaScript忍者秘籍——驯服线程和定时器

    1.定时器和线程 - 设置和清除定时器 JavaScript提供了两种方式,用于创建定时器以及两个相应的清除方法.这些方法都是window对象上的方法. 方法 格式 描述 setTimeout   i ...

  5. c# 操作xml之xmlReader

    xmlReader的名称空间using System.Xml; xmlReader是通过流的方式来读取xml文件的内容 <?xml version="1.0" encodin ...

  6. ssh配置导致Ansible并发失败

    Ansible并发失败原因,  fork=100. 执行playbook时候没有并发 vim /usr/lib/python2.7/site-packages/ansible/runner/conne ...

  7. kindeditor编辑器上传图片失败 错误 405.0解决办法（亲测）

    HTTP 错误 405.0 - Method Not Allowed(省略)editor/php/upload_json.php?dir=image物理路径 http://www.gdgoga.com ...

  8. nginx配置限制同一个ip的访问频率

    1.在nginx.conf里的http{}里加上如下代码: limit_conn_zone $binary_remote_addr zone=perip:10m; limit_conn_zone $s ...

  9. JavaFX基础学习之OkHttp/Gson

    导入jar包,使用OkHttp/Okio/Gson请求解析 package application; import java.io.IOException; import java.net.URL; ...

  10. 通过枚举enum实现单例

    通过enum关键字来实现枚举,在枚举中需要注意的有: 1. 枚举中的属性必须放在最前面,一般使用大写字母表示 2. 枚举中可以和java类一样定义方法 3. 枚举中的构造方法必须是私有的 enum S ...