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. java加解密

    换工作中,把以前学的知识,整理整理.能否得到一份好的薪资且满意的工作,然后赢取白富美,走向人生的巅峰,就靠它了.哈哈. 对称加密:DES, AES DES (数据加密算法) : 明文按64位进行分组, ...

  2. 【锋利的Jquery】读书笔记五

    jquery表单 表格操作 表单从基本的得到和失去焦点表单验证 <script type="text/javascript"> $(function(){ $(&quo ...

  3. Time.timeScale、游戏暂停

    原文链接 项目里面一直在用Time.timeScale来做游戏的 1倍 2倍整体加速,今天我仔细看了一下Time.timeScale才发现之前我理解错了一些东西. Time.timeScale可以控制 ...

  4. [转]RadStudio DELPHI/C++ BUILDER Berlin 10.1 Update2安装破解教程

    源链接:http://bbs.fishc.com/thread-76730-1-1.html 免责声明:本教程所有资源均为学习交流之用,软件和资料版权归原开发公司所有,请于下载后24小时内删除,禁止用 ...

  5. API HOOK和PE文件的关系

    api hook技术的难点,并不在于hook技术,而在于对PE结构的学习和理解.如何修改api函数的入口地址?这就需要学习pe可执行文件(.exe,.dll等)如何被系统映射到进程空间中,这需要学习p ...

  6. Everything(速度快的文件搜索软件) 1.4.1.801b 汉化绿色版

    软件名称: Everything(速度快的文件搜索软件) 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win7 / Vista / Win2003 / WinXP 软件大小: 2.0MB ...

  7. Java错误提示is not an enclosing class

    今天脑袋晕乎乎的,犯了个低级错误,好半天才反应过来 一直提示:is not an enclosing class 我居然把 RegisterActivity.class 写成了 RegisterAct ...

  8. 【hihoCoder 1466】后缀自动机六·重复旋律9

    http://hihocoder.com/problemset/problem/1466 建出A串和B串的两个后缀自动机 对后缀自动机的每个状态求出sg值. 求出B串的\(sum(x)\),表示B有多 ...

  9. 解决IE兼容总汇【转】

    转载声明: 藏羚羊 2014年04月16日 于 前端开拓者 发表 本文固定链接: http://www.frontopen.com/2552.html 1. <meta http-equiv=“ ...

  10. Python的加入！

    今天有幸领略了Python的风采. 真是好清新>_< 赶紧尝试一下. 好酷. 以后会在项目中使用