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. HDU - 4027 Can you answer these queries?（线段树区间修改）

    https://cn.vjudge.net/problem/HDU-4027 题意 给一个有初始值的数组,存在两种操作,T=0时将[L,R]的值求平方根,T=1时查询[L,R]的和. 分析 显然不符合 ...

  2. elementUi模态框使用baiduMap错误记录

    报错如下,可能是因为目标div还没生成 elementUi文档说明 在dom生成后再调用,正常 buildMap(){ let map = new BMap.Map("allmap" ...

  3. string.GetHashCode获取值不一样

    今天在使用程序时发现两个String.GetHashCode值不一样,通过测试 (1)程序在两台不同的计算机上运行,没有变化. (2)修改32位,64位,值有变化,说明GetHashCode和.net ...

  4. T-SQL常见基础疑点问答总结

    --建立测试环境 IF object_id('tb') IS NOT NULL     DROP TABLE tb GO   ,),v )) GO INSERT tb SELECT 'a' UNION ...

  5. c2d遮罩

    ClippingNode 节点 ClippingNode setStencil 设置模版  只有模版的区域显示此节点内容 使用了Opengl的 模板测试  http://www.cnblogs.com ...

  6. CentOS7查询最近修改的文件

    当需要排查问题的时候,经常需要找到最近修改和产生的文件 下面的命令是查询当前目录下以log结尾的日志,并且在30分钟内修改过,这个可以根据情况修改时间为1分钟,查找最新产生的日志 突然想到这个问题,是 ...

  7. 【Vue】中 $attrs 中的使用方法

    vue官网是这样介绍的: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 ( ...

  8. intellij idea无效的发型版本1.8解决方案

    描述:intellj中启动项目报错无效的发行版本:8 解决方案一: file -> settings -> build,exception,deployment -> compile ...

  9. 【译】第二篇 SQL Server安全验证

    本篇文章是SQL Server安全系列的第二篇,详细内容请参考原文. 验证是检验主体的过程.主体需要唯一标识,那样SQL Server可以确定主体有哪些权限.正确的验证是提供安全访问数据库对象的必要的 ...

  10. app-web 开发 追溯debug

    1.iphone5 运行vue项目时,方法格式:fun(){}这种格式容易不显示页面 2.vue未绑定上数据有可能是js文本过大,手机内存不足引起的 3.根据方法走向追溯debug 4.一定要用try ...