JavaScript输入分钟、秒倒计时技巧总结(附代码)

 更新时间:2017年08月17日 15:16:35   作者:小倔驴  
这篇文章主要介绍了JavaScript输入分钟、秒倒计时的代码实现,通过css和js代码展示了逻辑过程,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。

代码如下:

<div class="container-fluid"> 
 <div class="main-content-inner"> 
 <div class="page-content">
  <div class="page-header"> 
  <form class="form-inline" id="searchform"> 
  <div class="form-group" style="margin-left: 10px;">
   <label>分</label> 
  <input type="text" class="form-control" name="Minute" id="Minute">
   </div> 
  <div class="form-group" style="margin-left: 10px;"> 
  <label>秒</label> 
  <input type="text" class="form-control" name="Second" id="Second">
   </div>
  <button type="button" class="btn btn-purple btn-sm" onclick="ok()"> 开始 </button> 
  </form>
  </div>
  <div class="row" style="height:500px;line-height:500px;vertical-align:middle;font-size:200px;color:red;text-align:center;margin-top:100px"> <p id="listview"></p> 
  </div> 
 </div>
  </div> 
 </div>
 <script>
  var t;
  var Minute;
  var Second; 
  var d;
  function ok() {
   if ($("#Minute").val() == "0" || $("#Minute").val() == "") {
   Minute = 0;
   } else {
   Minute = $("#Minute").val();
   }
   if ($("#Second").val() == "0" || $("#Second").val() == "") {
   Second = 0;
   } else {
   Second = $("#Second").val();
   }
  var min = "";
  if (Minute < 10) {
   min = "0" + Minute;
  } else {
   min = Minute + "";
  }
  var sec = "";
  if (Second < 10) {
   sec = "0" + Second;
  } else {
   sec = Second + "";
  }
  $("#listview").text(min + ":" + sec);
  $(".page-header").hide();
  $("#listview").show();
  setTimeout(function () {
   begin()
  }, 1000);  
  }
  function begin() {  
  if (Second != 0) {
   Second--;
   min = "";
   if (Minute < 10) {
   min = "0" + Minute;
   } else {
   min = Minute + "";
   }
   sec = "";
   if (Second < 10) {
   sec = "0" + Second;
   } else {
   sec = Second + "";
   }
   $("#listview").text(min + ":" + sec);
  } else {
   if (Minute > 0) {
   Minute--;
   Second = 59;
   min = "";
   if (Minute < 10) {
    min = "0" + Minute;
   } else {
    min = Minute + "";
   }
   sec = "";
   if (Second < 10) {
    sec = "0" + Second;
   } else {
    sec = Second + "";
   }
   $("#listview").text(min + ":" + sec);
   } else {
   clearTimeout(t);
   }
  }
  t = setTimeout(function () {
   begin()
  }, 1000)
  }
 </script>

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持!

相关文章

  • TypeScript中Class类的基本使用方法

    TypeScript中Class类的基本使用方法

    在TypeScript中,我们可以使用Class来定义类,这使得我们能够更加结构化地组织代码并使用面向对象的思想进行开发,本文小编将给大家详细的总结一下TypeScript中Class类的基本语法,需要的朋友可以参考下
    2023-09-09
  • JavaScript链式调用原理与实现方法详解

    JavaScript链式调用原理与实现方法详解

    这篇文章主要介绍了JavaScript链式调用,结合实例形式详细分析了JavaScript链式调用基本原理、实现方法与相关操作注意事项,需要的朋友可以参考下
    2020-05-05
  • javascript url几种编码方式详解

    javascript url几种编码方式详解

    下面小编就为大家带来一篇javascript url几种编码方式详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JS中判断某个字符串是否包含另一个字符串的五种方法

    JS中判断某个字符串是否包含另一个字符串的五种方法

    本文给大家带来JS中判断某个字符串是否包含另一个字符串的五种方法,有string对象的方法,match() 方法,RegExp对象的方法,test() 方法,exec() 方法,具体内容详情大家参考下本文
    2018-05-05
  • javascript元素动态创建实现方法

    javascript元素动态创建实现方法

    这篇文章主要介绍了javascript元素动态创建实现方法,涉及javascript操作元素的相关技巧,需要的朋友可以参考下
    2015-05-05
  • 一文快速弄懂webpack动态import原理

    一文快速弄懂webpack动态import原理

    无论你开发使用的是CommonJS规范还是ES6模块规范,打包后的文件都统一使用webpack自定义的模块规范来管理、加载模块,下面这篇文章主要给大家介绍了关于webpack动态import原理的相关资料,需要的朋友可以参考下
    2022-04-04
  • element-ui 对话框dialog使用echarts报错'dom没有获取到'的问题

    element-ui 对话框dialog使用echarts报错'dom没有获取到'的问题

    这篇文章主要介绍了element-ui 对话框dialog里使用echarts,报错'dom没有获取到'的问题,在这个事件里边进行echarts的初始化,执行数据,本文结合实例代码给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • JS中的Replace()传入函数时的用法详解

    JS中的Replace()传入函数时的用法详解

    这篇文章主要介绍了JS中的Replace()传入函数时的用法详解,replace方法的语法是:stringObj.replace(rgExp, replaceText)关于js replace 传入函数的用法,大家通过本文学习吧
    2017-09-09
  • js实现手机发送验证码功能

    js实现手机发送验证码功能

    本文主要介绍了js实现手机发送验证码功能的示例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript中的标签语句用法分析

    JavaScript中的标签语句用法分析

    这篇文章主要介绍了JavaScript中的标签语句用法,实例分析了标签语句的功能、定义及相关使用技巧,需要的朋友可以参考下
    2015-02-02

最新评论