JS实现十分钟倒计时代码实例

 更新时间£º2018年10月18日 08:36:39   投稿£ºlaozhang   我要评论

在本篇文章里我们给大家分享了关于JS实现十分钟倒计时的相关实例代码£¬有需要的朋友们可以学习下¡£

编写JS倒计时代码需要用到很多JavaScript知识£¬比如£ºif函数£¬Math.floor£¬定时器setInterval等等£¬如有不清楚的小伙伴可以参考PHP中文网的相关文章£¬或者访问 JavaScript视频教程¡£

举例£º10分钟考试倒计时£¬当时间仅剩五分钟时£¬提醒考试仅剩5分钟£¬时间结束时£¬提示考试结束¡£具体代码如下£º

HTML部分£º

<body>
 <div id="timer"></div>
 <div id="warring"></div>
</body>

JavaScript部分£º

<script type="text/javascript">
 var maxtime = 10 * 60; // 
      function CountDown() {
        if (maxtime >= 0) {
          minutes = Math.floor(maxtime / 60);
          seconds = Math.floor(maxtime % 60);
          msg = "距离结束还有" + minutes + "分" + seconds + "秒";
          document.all["timer"].innerHTML = msg;
          if (maxtime == 5 * 60)alert("距离结束仅剩5分钟");
            --maxtime;
        } else{
          clearInterval(timer);
          alert("时间到£¬结束!");
        }
      }
      timer = setInterval("CountDown()", 1000);   
 </script>

JS十分钟倒计时代码的具体步骤£º

1¡¢设置考试时长maxtime = 10 * 60秒£¬即10分钟

2¡¢用if函数判断£¬当maxtime大于等于零时£¬判断剩余分和秒

3¡¢再用if函数判断£¬当时间仅剩5分钟时£¬弹出提示£º距离结束仅剩5分钟

4¡¢如果时间到£¬则清除定时器£¬提示?#33322;?#26463;

效果如图所示£º

相关文章

  • javascript下动态this与动态绑定实例代码

    javascript下动态this与动态绑定实例代码

    javascript是一门动态语言£¬最明显就是那个dynamic this¡£它一般都是作为函数调用者存在¡£在javascript£¬所有关系都可以作为对象的一个关联数组元素而存在¡£
    2010-01-01
  • JavaScript小技巧整理

    JavaScript小技巧整理

    这篇文章主要介绍了JavaScript小技巧,整理汇总了JavaScript常用的6个实用技巧,属于JavaScript边角技巧的总结,需要的朋友可以参考下
    2015-12-12
  • 微信小程序学习?#22987;?#20043;获取位置信息操作图文详解

    微信小程序学习?#22987;?#20043;获取位置信息操作图文详解

    这篇文章主要介绍了微信小程序学习?#22987;?#20043;获取位置信息操作,结合实例形式分析了微信小程序获取位置信息的原理¡¢步骤及相关操作注意事项,并结合图文形式予以说明,需要的朋友可以参考下
    2019-03-03
  • 深入理解JavaScript中为什么string可以拥有方法

    深入理解JavaScript中为什么string可以拥有方法

    下面小编就为大家带来一篇深入理解JavaScript中为什么string可以拥有方法¡£小编觉得挺不错的£¬现在就分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
    2016-05-05
  • indexOf 和 lastIndexOf 使用示例介绍

    indexOf 和 lastIndexOf 使用示例介绍

    indexOf是在一个字符串中寻找一个字的位置£¬lastIndexOf 也是找字 , 它们俩的区别是前者从字符串头开始找£¬后者是从字符串末端开始找
    2014-09-09
  • IE事件对象£¨The Internet Explorer Event Object£©

    IE事件对象£¨The Internet Explorer Event Object£©

    不同于DOM事件对象£¬基于Event Handler授权这种方式£¬IE事件对象可以用不同的方式进行访问¡£当一个事件Handler通过DOM 0 级的方式被授权£¬则这个事件对象将作为window对象的属性而存在
    2012-06-06
  • JS中去掉array中重复元素的方法

    JS中去掉array中重复元素的方法

    这篇文章主要介绍了JS中去掉array中重复元素的方法,需要的朋友可以参考下
    2017-05-05
  • ?#35745;¬onload事件触发问题解决方法

    ?#35745;¬onload事件触发问题解决方法

    当页面上存在一个?#35745;?#20803;素时如£º<img src='xxxx' alt="" />,页面加载中ie7¡¢8跟chrome下?#35745;?#30340;onload事件非常奇怪£¬有后完全不触发£¬有时候触发后进行改变某些元素的操作£¬操作结果无效¡£
    2011-07-07
  • JS打开?#35745;?#21478;存为对话框实现代码

    JS打开?#35745;?#21478;存为对话框实现代码

    使用JS打开?#35745;?#21478;存为对话框一直都是网页应用中不可缺少的一部分£¬本人有些好奇£¬于是搜集整理了一些实现代码£¬不知道符不符合大众的口味£¬在此班门弄斧了£¬需要的朋友可以了解下
    2012-12-12
  • javascript 运算数的求值顺序

    javascript 运算数的求值顺序

    请注意£¬这里说的是运算数的求值顺序¡£而非运算符£¬运算符的求值顺序我们比较熟悉¡£
    2011-08-08

最新评论

ÁÉÄþ35Ñ¡7¿ª½±½á¹û