<head>

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

    <title>时钟</title>

    <meta name="keywords" content="关键字列表" />

    <meta name="description" content="网页描述" />

    <link rel="stylesheet" type="text/css" href="" />

    <style type="text/css">

        #li{

            width:120px;

            height:20px;

            border:1px red solid;

        }

    </style>

    <script>

    //定义加载事件

        window.onload=function(){

        //定义变量

        var time;

        var t;

        //实现开始显示事件功能的函数

        function display(){

        //实例化

        myDate=new Date();

        //获取时间戳

        time=myDate.getHours()+':'+myDate.getMinutes()+':'+myDate.getSeconds();

        //将获取的时间戳显示在要加载的内容上

        $('li').innerHTML=time;

        //利用定时器调用自己

        t=setTimeout(display,1000);

        }

        //实现停止时间的函数

        function display1(){

            //清楚定时器

            clearTimeout(t);

        }

            //获取DOM对象的函数

            function $(id){

            //返回对象

            return document.getElementById(id);

        }    //触发开始事件

            document.getElementById('star').onclick=function(){

                display();

            }

            //触发结束事件

            document.getElementById('end').onclick=function(){

                display1();

            }

        }

    </script>

</head>

<body>

    <div id='li'></div>

    <input id='star'type="button" name="button"value='开始'/>

    <input id='end'type='button' name='button'value="结束"/>

</body>

</html>

javascript--时钟的更多相关文章

  1. javascript时钟代码 DEMO-002

    转载自:http://www.cnblogs.com/Mygirl/archive/2012/03/30/2425832.html 正常时间显示 复制代码 <SCRIPT language=ja ...

  2. javascript时钟

    <script language="JavaScript" type="text/javascript">         function now ...

  3. JavaScript时钟效果

    在JavaScript中,有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新,通过代码来创造一个实实在在的时间表. 代码例子: <!DOCTYPE html> <htm ...

  4. JavaScript时钟实例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. Javascript练习

    1.时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  6. 【JavaScript】使用setInterval()函数作简单的轮询操作

    轮询(Polling)是一种CPU决策怎样提供周边设备服务的方式,又称"程控输出入"(Programmed I/O). 轮询法的概念是.由CPU定时发出询问.依序询问每个周边设备是 ...

  7. Javascript特效代码大全(420个)（转）

    转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习  ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...

  8. 【JavaScript】在同一个网页中实现多个JavaScript特效

    在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...

  9. 【iScroll源码学习01】准备阶段

    前言 我们昨天初步了解了为什么会出现iScroll:[SPA]移动站点APP化研究之上中下页面的iScroll化(上),然后简单的写了一个demo来模拟iScroll,其中了解到了以下知识点: ① v ...

  10. JS 代码编一个倒时器

    有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的 ...

随机推荐

  1. 在spring中进行基于Executor的任务调度

    Executor java.util.concurrent.Executor接口的主要目的是要将“任务提交”和“任务执行”两者分离解耦.该接口定义了任务提交的方法,实现者可以提供不同的任务运行机制,解 ...

  2. .net通用权限框架B/S (三)--MODEL层(2)

    接上篇 实体数据模型保存后生成上下文和实体 上下文和实体实际是由根据.tt模版生成的 当实体数据模型.edmx更新保存后,上下文和实体就会根据.tt模版自动更新 生成的上下文继承 DbContext ...

  3. Ubuntu Code::Blocks IDE 13.12 汉化

    Ubuntu Code::Blocks IDE 13.12 汉化: 安装很简单,不再赘述. 单说汉化: .下载中文简体汉化包(百度网盘):链接: http://pan.baidu.com/s/1kU3 ...

  4. dubbo+zookeeper+spring+springMVC+mybatis的使用

    读前声明:由于本人水平有限,有错误或者描述不恰当的地方请指出来,勿喷!第一次写博客. 源码下载链接:http://files.cnblogs.com/files/la-tiao-jun-blog/du ...

  5. [一个经典的多线程同步问题]解决方案二：Event事件

    使用关键段来解决经典的多线程同步互斥问题,由于关键段的“线程所有权”特性所以关键段只能用于线程的互斥而不能用于同步.本篇介绍用事件Event来尝试解决这个线程同步问题. 首先介绍下如何使用事件.事件E ...

  6. 关于html标签元素的data-*属性

    关于这个主题的文章和博客其实已经非常多了,这里并非要重复造轮子,只是看到一些例子稍微有点麻烦,其实也很简单,但是对于一个刚刚入门的人,w3c的例子甚至可能看不懂,这里列出一个最简单不过的小案例以供参考 ...

  7. mysql开启慢查询方法

    1,配置开启 Linux: 在mysql配置文件my.cnf中增加 log-slow-queries=/var/lib/mysql/slowquery.log (指定日志文件存放位置,可以为空,系统会 ...

  8. 关于scp 不需要密码

    运行 ssh-keygen -t rsa 会在用户目录~/.ssh/产生两个文件,id_rsa,id_rsa.pub   //      cat id_rsa.pub >~/.ssh/autho ...

  9. 新手笔记-linux一些命令

    vim ~/.vimrc  写入 set nu    以后使用vim就自动显示行号. shift + v 行选择 x 删除 u 撤销  ctrl + r 反撤销 file test.c  查看文件类型 ...

  10. 【Chromium中文文档】Chrom{e,ium}{,OS}中的硬件视频加速

    Chrom{e,ium}{,OS}中的硬件视频加速 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_ ...