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. Jmeter测试报告生成

    Jmeter测试报告生成 本文使用的 Jmeter 版本为 apache-jmeter-3.2 1. 命令行模式将 jtl 文件转成测试图表 注意: 这种方式只适用于jmeter3.0以后的版本 1. ...

  2. thymeleaf 基础

    (一)Thymeleaf 是个什么?      简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下 ...

  3. 未启用当前数据库的 SQL Server Service Broker，因此查询通知不受支持。如果希望使用通知，请为此数据库启用 Service Broker

    昨晚遇到的这个问题,也知道Notifications service依赖底层的Service broker的.本以为只需要执行以下脚本对数据库启用Service broker即可. alter dat ...

  4. 十一、移植优化---CONFIG 优化进 menuconfig（2）

    11.3 jz2440.h 中的剩余宏移植 11.3.1 CONFIG_SYS_TEXT_BASE CONFIG_SYS_TEXT_BASE:设置系统代码段的基地址,设为 0x0:menuconfig ...

  5. Linux/Windows双系统引导修复

    安装双系统建议先安装windows,然后在安装Linux,使用Linux(grub2)引导双系统 如果重新安装了windows,则无法引导进入linux,需要修复引导 在windows下安装easyB ...

  6. kvm 搭建

    一,准备环境   物理机 虚拟机 操作系统 CentOS 6.8 x64 CentOS 6.8 x64 CPU/内存 10核超线程x2/64G 2核/4G 外网IP -- 内网IP eth1_192. ...

  7. MacOS下IntelliJ IDEA关联JDK1.8源码

    1 打开jdk设置,找到具体添加的地方 2 找到自己jdk的源码位置替换掉 3 如果没有源码或者源码没有下载解压,自己下载解压,Mac下安装的自带src.zip和javax-src.zip解压好后,再 ...

  8. 博客里的第一篇随笔!QWQ

    这里是一个信息蒟蒻,开始自己的博客之旅!!QWQQQQ

  9. C++ 类使用多线程技术

    参考文章 : http://blog.csdn.net/jmh1996/article/details/72235232 成员函数作为线程函数,  要将成员函数定义为静态的 C++ 静态成员函数调用非 ...

  10. ASCII字符集。扩展ASCII字符集。Unicode字符集分别支持多少个字符？

    ASCII字符集.扩展ASCII字符集.Unicode字符集分别支持多少个字符? 256个字符和 65536个字符