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

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

代码：

 <!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. 《AngularJS深度剖析与最佳实践》简介

    由于年末将至,前阵子一直忙于工作的事务,不得已暂停了微信订阅号的更新,我将会在后续的时间里尽快的继续为大家推送更多的博文.毕竟一个人的力量微薄,精力有限,希望大家能理解,仍然能一如既往的关注和支持sh ...

  2. Nginx学习笔记（二） Nginx--connection&request

    Nginx--connection&request 在Nginx中,主要包括了连接与处理两部分. connection 在src/core文件夹下包含有connection的源文件,Ngx_c ...

  3. WEB 基础知识（一）

    1. 系统架构 1.1 B/S系统架构 1.2 C/S系统架构 1.3 对比与区别 1.3.1 概述 C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过 ...

  4. C#经典笔试题-获取字符串中相同的字符以及其个数

    public Dictionary<char,int> GetStrSameAs(string str){ //将字符串转换成一个字符数组. char[] charArray=str.To ...

  5. 苹果手机Safari无痕浏览模式下系统登录成功但是页面不跳转

    昨天下午,测试提了一个bug,问题是:在苹果手机Safari无痕浏览模式下系统登录成功但是页面不跳转. 思前想后找了半天没思路,后来经过同事的点拨,说可能是禁用了cookie之类的,反正我也没思路就顺 ...

  6. 【Win 10 应用开发】多媒体转码

    上次本来说好,今天咱们来讨论 socket 相关的话题,但,对于 socket ,老周还有一些问题没弄清楚,等弄清楚了,再和大伙伴们一起探讨.故,今天咱们扯一扯多媒体转码的事. 听起来挺复杂的,不过, ...

  7. Hadoop的学习--安装配置与使用

    安装配置 系统:Ubuntu14.04 java:1.7.0_75 相关资料 官网 下载地址 官网文档 安装 我们需要关闭掉防火墙,命令如下: sudo ufw disable 下载2.6.5的版本, ...

  8. Linux上oracle精简版客户端快速部署

    RHEL6 + Oracle 11g客户端快速部署 需求:只是用到客户端的sqlplus, sqlldr功能. 方案:用精简版实现客户端的快速部署 1.上传oracle精简版客户端到服务器/tmp目录 ...

  9. SolrNet高级用法（分页、Facet查询、任意分组）

    前言 如果你在系统中用到了Solr的话,那么肯定会碰到从Solr中反推数据的需求,基于数据库数据生产索引后,那么Solr索引的数据相对准确,在电商需求中经常会碰到菜单.导航分类(比如电脑.PC的话会有 ...

  10. 密码学应用（DES，AES， MD5， SHA1， RSA， Salt， Pkcs8）

    目录 一.数据加密标准 - Data Encryption Standard(DES) 二.高级加密标准 - Advanced Encryption Standard(AES) 三.消息摘要算法第五版 ...