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>

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

相关文章

  • Javascript中匿名函数的调用与写法实例详解(多种)

    Javascript中匿名函数的调用与写法实例详解(多种)

    js中定义函数的方式有很多种,函数直接量就是其中一种,下面通过本文给大家介绍匿名函数是如何调用的及匿名函数的n中写法,对js匿名函数调用,js匿名函数写法相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • BootStrap selectpicker后台动态绑定数据

    BootStrap selectpicker后台动态绑定数据

    这篇文章主要介绍了BootStrap selectpicker后台动态绑定数据的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS实现数组去重的常用方法

    JS实现数组去重的常用方法

    在JavaScript开发中,数组操作是不可或缺的一部分,数组去重作为数据处理的一个常见需求,旨在从一个可能包含重复元素的数组中移除重复项,只保留唯一值,本文将详细介绍几种常见的数组去重方法,并结合实际应用场景进行探讨,需要的朋友可以参考下
    2024-12-12
  • 微信小程序实现美食展示与收藏功能

    微信小程序实现美食展示与收藏功能

    这篇文章主要介绍了如何在微信小程序中实现美食展示与收藏的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起动手尝试一下
    2022-03-03
  • js原型链原理看图说明

    js原型链原理看图说明

    任何一个对象都有一个prototype的属性,在js中可以把它记为:__proto__
    2012-07-07
  • 自定义百度分享的分享按钮

    自定义百度分享的分享按钮

    这篇文章主要介绍了自定义百度分享的分享按钮的相关资料,需要的朋友可以参考下
    2015-03-03
  • 详解JavaScript两个实用的图片懒加载优化方法

    详解JavaScript两个实用的图片懒加载优化方法

    本文主要介绍了JavaScript两个实用的图片懒加载优化方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】

    JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】

    这篇文章主要介绍了JS实现放大、缩小及拖拽图片的方法,可兼容IE及火狐等浏览器,通过javascript自定义函数实现针对图片的放大、缩小及拖拽等功能,涉及javascript动态操作页面元素的相关技巧,需要的朋友可以参考下
    2016-08-08
  • JsRender实用入门教程

    JsRender实用入门教程

    这篇文章主要介绍了JsRender实用入门实例,包含了tag else使用、循环嵌套访问父级数据等知识点,并提供了完整的实例下载,非常具有实用价值,需要的朋友可以参考下
    2014-10-10
  • 基于element UI input组件自行封装“数字区间”输入框组件的问题及解决

    基于element UI input组件自行封装“数字区间”输入框组件的问题及解决

    这篇文章主要介绍了基于element UI input组件自行封装“数字区间”输入框组件,实现代码可以分为两块一块为组件的封装代码,一块为文中实现效果的演示代码,对element UI数字区间输入组件相关知识感兴趣的朋友一起看看吧
    2022-05-05

最新评论