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

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

代码：

 <!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. Visual Studio 2015 移动跨平台开发初体验

    微软换了新 CEO 后变化很大,对我们团队最有利的消息就是 Visual Studio 2015 支持移动应用跨平台开发. 还记不记得很早之前,Xamarin 宣布与微软成为合作伙伴的消息.显然,Xa ...

  2. some OpenGL constants

    some OpenGL constants This is from (https://github.com/peterderivaz/pyopengles/blob/master/gl2.py) G ...

  3. C# - 缓存OutputCache（二）缓存详细介绍

    本文是通过网上&个人总结的 1.缓存介绍 缓存是为了提高访问速度,而做的技术. 缓存主要有以下几类:1)客户端缓存Client Caching 2)代理缓存Proxy Caching 3)方向 ...

  4. 今天有群友不是很清楚htm直接存数据库的危害，我简单举个例子

     通过这个案例就知道为什么不要把原生的html放数据库了  常见的几种转码  常用的几种显示方法 只有原生html和最下面一种弹框了,变成了持久xss 如果是Ajax的方式,请用@Ajax.JavaS ...

  5. EF Code First Migrations数据库迁移

    1.EF Code First创建数据库 新建控制台应用程序Portal,通过程序包管理器控制台添加EntityFramework. 在程序包管理器控制台中执行以下语句,安装EntityFramewo ...

  6. JavaScript与PHP中正则

    一.JavaScript 有个在线调试正则的工具,点击查看工具.下面的所有示例代码,都可以在codepen上查看到. 1.创建正则表达式 var re = /ab+c/; //方式一 正则表达式字面量 ...

  7. 从xfire谈WebService接口化编程

    前段时间有博友在看我的博文<WebService入门案例>后,发邮件问我关于WebService 接口在java中的开发,以及在实际生产环境中的应用.想想自己入职也有一段时间了,似乎也该总 ...

  8. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  9. xcode7.1新建项目等问题

    一.LaunchImage不显示 解决办法: 1.在Assets.xcassets新建LaunchImage并加入不同屏幕的launchImage 2.点击项目名,点击TARGETS,选择Genera ...

  10. Lua 安全调用 metatable 的简单应用

    事情的经过 我们的项目中存在好几个战斗界面,不过界面中的内容略有不同.跟同事出去吃饭的时候,他问我.我们现在的战斗界面.有很多是重复的,但是也有偶尔几个地方不太一样.我在战斗过程中驱动这些界面的时候. ...