Demo截图:

Demo:Demo

上代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>

     </title>

     <style>

         *{ margin:0;padding:0; }

         .timer{

             width: 200px;

             margin:0 auto;

             font-family: 'Microsoft Yahei';

             font-size: 18px;

             line-height: 30px;

         }

         .timer span{

             color: #ff556b;

         }

         .timer strong{

         }

     </style>

     <script>

     window.onload = function(){

         var oTimer = document.getElementById('timer'),

               oBtn = document.getElementById('btn'),

               oSpan = oTimer.getElementsByTagName('span')[0];

           var timers = setCountdown(oSpan,10,callFn);    

           oBtn.onclick = function(){

             clearInterval( timers );

           };

           function callFn(){

             alert( '倒计时结束了~~' );

           }

           function setCountdown( obj,num,callBack ){

             var timer = null;      //定时器;

             var nums = num * 1000; //时间转化成毫秒;

             obj.innerHTML = num;  //对象赋值;

             timer = setInterval(function(){

               nums = nums - 100; //每次减100毫秒;

               if( nums <= 0 ){

                 callBack();

                 clearInterval( timer );

               }

               obj.innerHTML = parseFloat(nums/1000).toFixed(1);

             },100);

             return timer;

           }

     }

     </script>

 </head>

 <body>

     <div id="timer" class="timer" >

         <div>

             <span>

             </span>

             <strong>

                  秒

             </strong>

         </div>

         <input type="button" id="btn" value="点我">

     </div>

 </body>

 </html>

后记：

1秒1000毫秒；

所以定时器100毫秒为间隔10次1000(1秒)，每次减也是100；

毫秒倒计时小Demo的更多相关文章

  1. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

  2. Nancy之基于Nancy.Hosting.Self的小Demo

    继昨天的Nancy之基于Nancy.Hosting.Aspnet的小Demo后, 今天来做个基于Nancy.Hosting.Self的小Demo. 关于Self Hosting Nancy,官方文档的 ...

  3. Nancy之基于Nancy.Owin的小Demo

    前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...

  4. Nancy之基于Self Hosting的补充小Demo

    前面把Hosting Nancy with ASP.NET.Self Hosting Nancy和Hosting Nancy with OWIN 以demo的形式简单描述了一下. 这篇是为Self H ...

  5. [Unity3D]做个小Demo学习Input.touches

    [Unity3D]做个小Demo学习Input.touches 学不如做,下面用一个简单的Demo展示的Input.touches各项字段,有图有真相. 本项目已发布到Github,地址在(https ...

  6. Android -- 自定义View小Demo，动态画圆（一）

    1,转载:(http://blog.csdn.NET/lmj623565791/article/details/24500107),现在如下图的效果: 由上面的效果图可以看到其实是一个在一个圆上换不同 ...

  7. Win10 FaceAPI小demo开发问题汇总

    Win10 FaceAPI小demo开发问题汇总 最近使用微软牛津计划做一个小demo,使用FaceAPI做一个小应用,实现刷脸的功能.开发的过程中用到几个问题,具体如下: Stream 与IRand ...

  8. 模仿京东顶部搜索条效果制作的一个小demo

    最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...

  9. Android学习小Demo一个显示行线的自定义EditText

    今天在处理一个EditText的时候,想着把EditText做成像一本作业本上的纸一样,每一行都可以由线条隔开,具体效果如下: 1)最开始的思路 一开始的想法是很简单的,找出每一行的高度,然后一行一行 ...

随机推荐

  1. jQuery使用（二）：DOM样式操作和属性操作

    DOM取值与赋值 .html() .text() .size() 1.html()方法类似原生DOM的属性innerHTML,不传入参数的时候默认为取指定元素内的HTML内容,包含前后空白文本结构,以 ...

  2. hdu 2815 Mod Tree (exBSGS)

    http://acm.hdu.edu.cn/showproblem.php?pid=2815 //解 K^D ≡ N mod P #include<map> #include<cma ...

  3. 二十五、Linux 进程与信号---exec函数

    25.1 介绍 在用 fork 函数创建子进程后,子进程往往要调用一种 exec 函数以执行另一个程序 当进程调用一种 exec 函数时,该进程完全由新程序代换,替换原有进程的正文,而新程序则从其 m ...

  4. gcd 二进制/循环

    #include<bits/stdc++.h> #define LL long long using namespace std; inline aabs(LL x){ ?x:-x;} i ...

  5. 【noip 2016】提高组

    D1T1.玩具谜题 题目链接 直接模拟就好了……water. #include<cstdio> int n,m,a,s,ans; ];]; int main() { scanf(" ...

  6. 20155324 2016-2017-2 《Java程序设计》第9周学习总结

    20155324 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 学习目标 了解JDBC架构 掌握JDBC架构 掌握反射与ClassLoader 了解自定义泛 ...

  7. 使用PHP连接数据库实现留言板功能

    PHP实现留言板功能: 1 首先是登录页面: <!DOCTYPE html><html>    <head>        <meta charset=&qu ...

  8. PHP获取表单并使用数组存储 疯狂提示 Notice: Undefined offset

    $answer=array(); $answer[0]='0'; for($i=1;$i<=$QUESTION_COUNT;$i++){ $answer[$i]=$_POST[(string)$ ...

  9. [C++]Linux之文件拷贝在系统调用和C库函数下的效率比较

    声明:如需引用或者摘抄本博文源码或者其文章的,请在显著处注明,来源于本博文/作者,以示尊重劳动成果,助力开源精神.也欢迎大家一起探讨,交流,以共同进步- 0.0 题目: 1. 分别利用文件的系统调用r ...

  10. cocos2dx 3.3 笔记

    ccs3 加入了 rapidjson ->一个JSON解析库https://github.com/miloyip/rapidjson