<!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. 20175323《Java程序设计》第五周学习总结

    教材学习内容总结 第五章的知识框架总结 代码托管:https://gitee.com/ruirui_yummy/java-besti-20175323 代码提交过程截图 代码量截图 学习进度条 代码行 ...

  2. 2017/8/4 SCJP学习

    2 Object Orientation . . . . . . . . . . . . . . . . . . . . . . . . . 85 Encapsulation (Exam Object ...

  3. KVM热添加技术

    1.KVM热添加的种类 硬盘.网卡.内存.cpu 2.KVM热添加硬盘 1.在宿主机上创建硬盘 qemu-img create -f qcow2 /opt/web02_add01.qcow2 10G ...

  4. php中heredoc使用方法

    Heredoc技术,在正规的PHP文档中和技术书籍中一般没有详细讲述,只是提到了这是一种Perl风格的字符串输出技术.但是现在的一些论坛程序,和部分文章系统,都巧妙的使用heredoc技术,来部分的实 ...

  5. h5页面在不同ios设备上的问题总结

    1.日期问题 对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别 时间格式化的时候,在浏览器端处理好好的,到了手机端,就变成NAN,或者null,这种情况,是ios系统不能转化这种 ...

  6. 以太坊geth客户端下的一些常用命令

    这是一个交互式的 JavaScript 执行环境,在这里面可以执行 JavaScript 代码,其中 > 是命令提示符.在这个环境里也内置了一些用来操作以太坊的 JavaScript 对象,可以 ...

  7. thinkphp 自动验证

    自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证. 大理石平台价格表 验证规则 数据验证可以进行数据类型.业务规则.安全判断等方面的验证 ...

  8. token方法可用于临时关闭令牌验证,

    token方法可用于临时关闭令牌验证,例如: $model->token(false)->create(); 即可在提交表单的时候临时关闭令牌验证(即使开启了TOKEN_ON参数). 大理 ...

  9. 几何+map套set——cf1163C

    能灵活用map+set的组合就能过这题了 /* 分成三个步骤来做: 1.通过点两两构造线 by=ax+c,先求a,b,再求c,用gcd(d,b)简化 2.线去重:用map+pair 3.统计交点 */ ...

  10. poj 3660 Cow Contest (bitset+floyd传递闭包)

    传送门 解题思路 考试题,想到传递闭包了,写了个O(n^3)的,T了7个点...后来看题解是tm的bitset优化???以前好像没听过诶(我太菜了),其实也不难,时间复杂度O(n^3/32) #inc ...