一个简单实现倒计时的小栗子~

效果图：简陋的不能再简陋了，捂脸

代码：

 <!DOCTYPE HTML>

 <html>

 <head>

     <title> 倒计时 </title>

     <meta  charset="utf-8">

     <script type="text/javascript">

         window.onload = function(){

             var m = 9;  //分

             var s = 59;  //秒

             var countdown = document.getElementById("title");

             getCountdown();

             setInterval(function(){ getCountdown() },1000);

             function getCountdown (){

                 countdown.innerHTML = "<span>"+m+"</span> ：<span>"+s+"</span>";

                 if( m == 0 && s == 0 ){

                     alert("倒计时结束");

                     m = 9;

                     s = 59;

                 }else if( m >= 0 ){

                     if( s > 0 ){

                         s--;

                     }else if( s == 0 ){

                         m--;

                         s = 59;

                     }

                 }

             }

         }

     </script>

 </head>

 <body>

     <h1>倒计时</h1>

     <div id="title"></div>

 </body>

 </html>

纯js实现10分钟倒计时的更多相关文章

  1. 纯js倒计时效果（交流加群：452892873）（本群每天都更新学习资料）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. JavaScript 10分钟入门

    JavaScript 10分钟入门 随着公司内部技术分享(JS进阶)投票的失利,先译一篇不错的JS入门博文,方便不太了解JS的童鞋快速学习和掌握这门神奇的语言. 以下为译文,原文地址:http://w ...

  3. [入门到吐槽系列] Webix 10分钟入门 一 管理后台制作

    前言 本人是服务端程序员,同时需要兼职前端开发.常用的就是原生态的HTML.Javascript,也用过ExtJS.Layui.可是ExtJS变公司后非常难用.Layui上手还行,用过一段时间,会觉得 ...

  4. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  5. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  6. 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  7. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  8. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

  9. 纯js实现分页

    原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...

随机推荐

  1. Go语言实战 - 使用SendCloud群发邮件

    山坡网需要能够每周给注册用户发送一封名为"本周最热书籍"的邮件,而之前一直使用的腾讯企业邮箱罢工了,提示说发送请求太多太密集. 一番寻找之后发现了大家口碑不错的搜狐SendClou ...

  2. 使用packer制作vagrant centos box

    使用packer制作vagrant box:centos 制作vagrant box,网上有教程,可以自己step by step的操作.不过直接使用虚拟在VirtualBox中制作vagrant b ...

  3. Java-jdbc操作数据库

    如果需要访问数据库,首先要加载数据库驱动,数据库驱动只需在第一次访问数据库时加载一次.然后在每次访问数据库时创建一个Connection实例,获取数据连接,这样就可以执行操作数据库的SQL语句.最后在 ...

  4. construction const parameter问题 构造函数const引用参数问题

    工程在window下编译没有任何问题, 但是在linux(CentOS6)下编译就老是报错 C++ 编译器已升级到最新版 6.1.0 错误如下: In file included /bits/stl_ ...

  5. JavaScript随笔6

    Ajax:(1) 阻止缓存?+t = new data(); eval可以把string变为数组(2) get:放入URL username = &password = ; 容量有小 安全性差 ...

  6. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  7. Android线程管理之ExecutorService线程池

    前言: 上篇学习了线程Thread的使用,今天来学习一下线程池ExecutorService. 线程管理相关文章地址: Android线程管理之Thread使用总结 Android线程管理之Execu ...

  8. 匹夫细说C#：从园友留言到动手实现C#虚函数机制

    前言 上一篇文章匹夫通过CIL代码简析了一下C#函数调用的话题.虽然点击进来的童鞋并不如匹夫预料的那么多,但也还是有一些挺有质量的来自园友的回复.这不,就有一个园友提出了这样一个代码,这段代码如果被编 ...

  9. ASP.NET Core 中文文档 第三章 原理（12）托管

    原文:Hosting 作者:Steve Smith 翻译:娄宇(Lyrics) 校对:何镇汐.许登洋(Seay) 为了运行 ASP.NET Core 应用程序,你需要使用 WebHostBuilder ...

  10. .net程序部署（setupFactory进阶）

    接上一篇 继续使用上一篇的project .将archive里无用的文件删除 添加我们需要的文件进来. config是一个文本文件. 注意所有文件的 destination都是 %appfolder% ...