原生JS实现动态时钟(优化)

<!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>

原文地址:https://www.cnblogs.com/lsqbk/p/10258951.html

时间: 01-11

原生JS实现动态时钟(优化)的相关文章

原生js怎么为动态生成的标签添加各种事件

这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom对象是找不到的,jq通过事件委托解决了这个问题,但是原生js这个问题该怎么解决呢?我在网上查了很多资料,好像只有一种办法,那就是在生成标签并把标签添加到html结构中后再添加对于这个新标签的各种事件,如果有更好的方法,欢迎提出来. <!DOCTYPE html> <html lang=&qu

原生js实现三个div层动态交换位置

html代码部分 <!--触发变换按钮--> <input type="button" onclick="startMove()" value="点击"/> <!--主体部分--> <div class="localbox"> <div id="b1" class="block1"></div> <div id

原生js实现的3个小特效(时钟、轮播图、选项卡)

时钟: <p id="timeTxt"></p>  //将获取到的时间显示在timeTxt这里面        <button onclick="startTime()">关闭</button>        <!--时钟-->        function startTime(){  //创建startTime()函数            var today=new Date();  //定义一个对象

js+css3实现动态时钟-------Day66

昨天搬家一天,宽带到最后也没有安装上,颇为恼火,但是收拾了一天新租的房屋,倒有了颇多的想法,这里先来实现一个--动态时钟(已经上传到资源里了,图片整的有些粗糙了,汗...) 这里来记录下,这个看起来简单好实现的功能,我在实现的过程中碰到了哪些问题,因为这时还没查看网上的代码,只是根据自己现阶段的学习来做的,可能会有些麻烦,有些粗糙,但是终归是实现了这个效果,心里还是小开心了下. 先来张最终实现的效果图(静态图片); 首先准备素材,我从网上搜到了一个时钟的素材,谁让我的ps还菜的菜呢,然后我有了表

js 动态时钟

<!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-

原生JS讲解

大家好,我们又见面了.昨天我们简单的说了一下HTML基础和一些常用标签,这些东西有点太简单了,我自己都有点写不下去了,所以从今天开始,我们讲一下原生JS的一些应用. JS就是JavScript,是一种直译试脚本语音,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能.在1995年时,由Netscape公司的Brenda

AJAX请求和跨域请求详解(原生JS、Jquery)

一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 本博客实验环境: python:2.7.11 web框架:tonado jquery:2.1.1 二.“伪”AJAX 由于

原生JS封装Ajax插件(同域&amp;&amp;jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

原生js实现的创建和删除元素实例代码

原生js实现的创建和删除元素实例代码:在实际应用中,往往需要动态的创建和删除指定的元素,下面就通过代码实例介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

通过原生js的ajax或jquery的ajax获取服务器的时间

在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间.客户端时间通过 javascript中的Date对象可以获取,如 Java代码   var dt = new Date(); var tm = dt.getTime(); 那么tm就是客户端的时间,另外也可以通过对应的getFullYear(),getMonth(),getDate()取到对应的年月日等...但这个时间可靠吗?好吧,那取服务器时间吧经常用到的是后台写一个php,jsp,cgi,asp..