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. Heap Sort

    #include<iostream> using namespace std; const int MAX = 1001; int l[MAX]; //Heap Sort void Hea ...

  2. 【原生js】原生js的省市区三级联动

    html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  3. Cracking the Coding Interview 第二章

    2.2 链表中倒数第k个结点 输入一个链表,输出该链表中倒数第k个结点. 思路:快慢指针(error: 判断是否有可行解,否则返回null, while, if 后加空格) /* public cla ...

  4. c++ 随手记

    强类型的理解 先定义一些基础概念 Program Errors trapped errors.导致程序终止执行,如除0,Java中数组越界访问 untrapped errors. 出错后继续执行,但可 ...

  5. CSS 待解决问题

    记录一些待解决的问题 1. 关于 table 边框参差不齐问题 乍一看表头的边框有 间隙, 下边框也有点没有对其的问题. 解决方案:  给 table 添加: border-collapse: col ...

  6. Spring Security（16）——基于表达式的权限控制

    目录 1.1      通过表达式控制URL权限 1.2      通过表达式控制方法权限 1.2.1     使用@PreAuthorize和@PostAuthorize进行访问控制 1.2.2   ...

  7. R安装

    linux: 在编译R之前,需要通过yum安装以下几个程序: #yum install gcc-gfortran              #否则报”configure: error: No F77 ...

  8. Linux下服务器环境的搭建和配置之一——Apache篇

    最近一个多月(2016-06-20开始至今),一直在忙海外广告平台FAQ系统的开发,既要负责服务器环境的搭建,又要写前端,还要写后台和数据库,甚至还要考虑产品需求和设计.所以是一个很大的挑战,对自身也 ...

  9. B/S和C/S【转载Jane的博客 http://blog.sina.com.cn/liaojane】

    什么是C/S和B/S结构?         C/S又称Client/Server或客户/服务器模式.服务器通常采用高性能的PC.工作站或小型机,并采用大型数据库系统,如Oracle.Sybase.In ...

  10. 七天学会ASP.NET MVC (四)——Layout页面使用和用户角色管理 （代码下载）

    中文翻译链接: http://www.cnblogs.com/powertoolsteam/p/MVC_four.html 360云盘: https://yunpan.cn/cYuEeLtXUvrgC ...