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. Git(查看修改记录)

    我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...

  2. OPCServer：使用KEPServer

    实际OPCServer使用(450M,中文,破解时间限制):KEPServer V6,百度网盘 ,密码: ykj2 本文为Java实现OPC通信的一部分 KEPServer中文官网 KEPServer ...

  3. HDU 1025(最长上升子序列)

    题意是要在两条平行线间连点,要在线不交叉的前提下尽可能多的连线,问最多能连多少条线. 现假定题中所给的是 9 组点,分别是:1—3,2—8,3—5,4—9,5—2,6—4,7—6,8—7,9—1,如图 ...

  4. 10、 在QQ音乐中爬取某首歌曲的歌词

        需求就是把关卡内的代码稍作修改,将周杰伦前五页歌曲的歌词都爬取下来,结果就是全部展示打印出来.       URL  https://y.qq.com/portal/search.html#p ...

  5. Python Thrift 简单示例

    本文基于Thrift-0.10,使用Python实现服务器端,使用Java实现客户端,演示了Thrift RPC调用示例.Java客户端提供两个字符串参数,Python服务器端计算这两个字符串的相似度 ...

  6. Image转Base64

    今天和一个朋友联调图片转Base64时发现一个问题 public static string ImageToBase64(Image img) { BinaryFormatter binFormatt ...

  7. bzoj 3916 暴力哈希

    暴力的哈希,注意: 将一个串当作另一个串的前缀,需要乘上p[len],len=后面串的长度 这是自己的代码,拿数据在本地测A掉了,但是bz上wa了??bz换数据了难道?? #include<cs ...

  8. mysql单表删除记录DELETE

    DELETE FROM tbl_name  [WHERE where_condition] mysql> SELECT * FROM users;+----+----------+------- ...

  9. Docker 容器启动 查看容器状态 - 四

    1.容器两种方式进行启动 一种是基于创建一个容器并启动 docker create docker start 另一种 使用 run 创建自动启动:是状态下的停止 启动 docker start ngi ...

  10. Docker 容器的隔离性

    Docker 容器的隔离性 就是 使用Linux namespace 来隔离运行环境和成 cgroup 限制容器使用的资源.  namespace 可以顾名思义 命名空间:所以可以理解为每个独立的容器 ...