输入分钟秒倒计时

Posted 2020-09-30 过一天日子修一天缘

 <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>