<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

<p id="num"></p>

<a href="javascript:stop()">让时间停止吧</a>

<a href="javascript:goon()">让时间继续吧</a>

</body>

</html>

<script>

    //向段落里面写入数字1：

    var oP = document.getElementById("num");

    function changeTime(){

        var odate = new Date();        //说明：当前的日期对象，要想实时获得当前的时间，就需要实时的获得当前的日期对象

        var year = odate.getFullYear();

        var month = odate.getMonth()+1;

        month = month < 10 ? '0'+month:month;

        var day = odate.getDate();

        day = day < 10 ? '0'+day:day;

        var hour = odate.getHours();

        var minute = odate.getMinutes();

        var second = odate.getSeconds();

        oP.innerHTML = "当前时间："+year+'-'+month+'-'+day+'&nbsp;&nbsp;'+hour+':'+minute+':'+second;

    }

    //var timer = setInterval(changeTime(), 1000);    //先调用函数，每隔1秒执行返回的结果

    var timer = setInterval(changeTime, 1000);        //每隔1秒，通过changeTime变量找到function体并执行

    //让时间继续切换，每隔1秒执行一次

    function goon(){

        clearInterval(timer);

        //表示使用的就是全局的变量

        timer = setInterval(changeTime, 1000);

    }

    //清除定时器,参数就是设置定时器时返回的结果

    function stop()

    {

        clearInterval(timer);

    }

</script>

原生JS实现动态时钟（优化）的更多相关文章

  1. canvas ：原生javascript编写动态时钟

    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...

  2. 原生JS实现动态折线图

    原生JS实现动态折线图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  3. js+css3动态时钟-------Day66

    昨天,有一天招,宽带到底没装上.相当恼火,不过包了一天租新房,有很多想法下来,其中,率先实现了--动态时钟(它已上载的资源,一些粗略的全貌.汗...) 这里记录.这个看似简单的功能,以达到良好的,我在 ...

  4. 原生js实现中文时钟

    零.寒暄 终于一个月可以更新两篇博客了,开心.昨天花了大概一天的时间玩了下github,基本的clone和push都搞定了,如果有和我一样的新手没调通的,大家可以交流. 另外,说个题外话,大家发现我的 ...

  5. 【原生JS】动态分页样式效果

    效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...

  6. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  7. 用js写动态时钟 2017-03-23

    45每隔1秒变一次: 代码如下: <body onLoad="show()" >   ------------表示当页面载入时执行该事件,可以没有 <div id ...

  8. 原生JS制作验证码（优化）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

随机推荐

  1. Objective-C 中的 Meta-class 是什么？

    在这篇文章中,我关注的是 Objective-C 中的一个陌生的概念-- meta-class.在 Objective-C 中的每个类都有一个相关联的 meta-class,但是你很少会直接使用 me ...

  2. System.Web.Mvc.RouteAttribute.cs

    ylbtech-System.Web.Mvc.RouteAttribute.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, Pub ...

  3. 初识OpenCV-Python - 009: 图像梯度

    本节学习找到图像的梯度和边界.只要用到的函数为: cv2.Sobel(), cv2.Scharr(), cv2.Laplacian() 1. Laplacian 和 Sobel的对比 import c ...

  4. Sequence POJ - 3581 后缀数组

    题意: 将一个序列分成非空的三部分,将每部分翻转后组合成一个新的序列, 输出这样操作得到的序列中字典序最小的序列 (保证第一个数是数组中最大的元素) 题解: 把数组当作串串. 因为第一个数最大,所以我 ...

  5. 面试系列10 es生产集群的部署架构

    如果你确实干过es,那你肯定了解你们生产es集群的实际情况,部署了几台机器?有多少个索引?每个索引有多大数据量?每个索引给了多少个分片?你肯定知道! 但是如果你确实没干过,也别虚,我给你说一个基本的版 ...

  6. 转为win64后, MS的lib问题

         >   正在创建库 C:\Users\Administrator\Desktop\branch-Unicode-156\\Temp\Link\PointCloudMeasure\x64 ...

  7. day1-初识Python以及环境搭建

    ---恢复内容开始--- 为什么学习Python? 软件质量:python的可读性很强,易于理解,非常接近于人类的自然语言. 提高开发者效率:相当于C,C++和JAVA等编译/静态型语言,Python ...

  8. Nginx 和 Gunicorn 部署 Django项目

    目录 Nginx 和 Gunicorn 部署 Django项目 配置Nginx 安装配置Gunicorn 通过命令行直接启动 Gunicorn 与 uwsgi 的区别,用哪个好呢 Gunicorn u ...

  9. JAVA 垃圾回收读书笔记

    对象已死 在JAVA代码运行中,会不停的创建对象,因为内存空间不是无限的,Java虚拟机必须不停的回收无用的数据空间.那么虚拟机是怎么判断对象空间是需要被回收的呢,也就是怎么样的数据算是垃圾数据呢? ...

  10. springcluoud入门

    概念: Spring Cloud是一个分布式的整体解决方案. Spring Cloud 为开发者提供了在分布式系统(配置管理,服务发现,熔断,路由,微代理,控制总线,一次性token,全局琐,lead ...