HTML/CSS 倒数计时器

Question

我有一个 html 页面，它需要为考试输入时间和分钟。 - 在另一个 html 或 css 文档中，我想本质上运行一个 HH:MM 的倒数计时器。即，如果输入是 1 小时 10 分钟，它将从 01:10 倒计时到 00:00。我假设有某种方法可以将输入值从一个模块调用到另一个模块。 - 我还想在按下开始按钮时开始倒计时 - 显示模块（考试显示）分为 4 个部分，这样 4 个考试计时器可以同时运行。（我希望在没有输入值的情况下，当按下开始按钮时，那个特定的计时器不会发生任何事情）

我附上了 jsfiddle 和代码。对于 ExamSetup.html & ExamSetup.css -https://jsfiddle.net/vf113tux/1/ 或者 ExamSetup.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
    <link rel="stylesheet" type="text/css" href="ExamSetup.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>

<body>

<div id="Exam 1">
<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>Exam 1</legend>

        <label for="Exam Name">Name</label>
        <input id="Name1" type="text" placeholder="Name">

        <label for="Exam Writing Time">Writing Time</label>
        <input id="Writing1H" type="number" placeholder="Hours" min="0" max="12">
        <input id="Writing1M" type="number" placeholder="Minutes" min="0" max="60">
    </fieldset>
</form>
</div>

<div id="Exam 2">
<form class="pure-form pure-form-stacked">
    <fieldset>
         <legend>Exam 2</legend>

        <label for="Exam Name">Name</label>
        <input id="Name2" type="text" placeholder="Name"

        <label for="Exam Writing Time">Writing Time</label>
        <input id="Writing2H" type="number" placeholder="Hours" min="0" max="12">
        <input id="Writing2M" type="number" placeholder="Minutes" min="0" max="60">
    </fieldset>
</form>

</div>

<div id="Exam 3">
<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>Exam 3</legend>

        <label for="Exam Name">Name</label>
        <input id="Name3" type="text" placeholder="Name">

        <label for="Exam Writing Time">Writing Time</label>
        <input id="Writing3H" type="number" placeholder="Hours" min="0" max="12">
        <input id="Writing3M" type="number" placeholder="Minutes" min="0" max="60">
    </fieldset>
</form>
</div>

<div id="Exam 4">
<form class="pure-form pure-form-stacked">  
    <fieldset>
        <legend>Exam 4</legend>

        <label for="Exam Name">Name</label>
        <input id="Name4" type="text" placeholder="Name">

        <label for="Exam Writing Time">Writing Time</label>
        <input id="Writing4H" type="number" placeholder="Hours" min="0" max="12">
        <input id="Writing4M" type="number" placeholder="Minutes" min="0" max="60">
    </fieldset>
</form>
<div class ="span7 text-center">
<a href="Display.html"><button type="submit" button id="button" class="btn btn-lg btn-primary">Next</button>
</div>
</div>   
</body>
</html>

ExamSetup.css:

@charset "utf-8";
/* CSS Document */

html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }

button {
    text-align: center;
}

对于ExamDisplay.html & ExamDisplay.css - https://jsfiddle.net/890e2dmq/（注意背景只是为了显示四分之一分区）或者 ExamDisplay.html: 无标题文档

<body>

<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>

<button id="button" class="btn btn-lg btn-success">Start</button>
</body>
</html>

ExamDisplay.css:

@charset "utf-8";
/* CSS Document */

html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#div1 { background: #DDD; }
#div2 { background: #AAA; }
#div3 { background: #777; }
#div4 { background: #444; }

非常感谢！我在最后一天进行了相当广泛的检查，但发现很难找到我需要的合适的简单倒计时。许多开发的程序主要用于日期或用于 DD:HH:MM:SS，我无法编辑代码以仅包含 HH:MM.

Answer 1

好的，现在是带有 4 个计时器的改进版本（CSS 由您决定）。 JSFIDDLE（完整版）

$(document).ready(function(){
  function start1(){
        var h1 = $('input:text[name=h1]').val();
        var m1 = $('input:text[name=m1]').val();
        $('.counter1').html(h1+' : '+m1);
        var inter1 = setInterval(function(){
            m1--;
            if(m1 == 0 && h1 != 0){
                m1 = 59;
                h1--;
            }else{
                if(h1 == 0 && m1 == 0){
                    clearInterval(inter1);
                }
            }
            $('.counter1').html(h1+' : '+m1);
            
        },60000)
    }
  
  $('#sub1').click(function(){
    start1();
  })
});

body{
    position: relative;
}
.counter1{
    width: 50%;
    height: 50px;
    background-color: rgba(255,0,0,0.5);
    left: 0%;
    top: 0px;
}

<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src ="yourPathToYourJavascript.js"></script>

<div class="counter1"></div>

<input type="text" name="h1" value="Hours"></input><br>
<input type="text" name="m1" value="Minutes"></input><br>
<input type="submit" id="sub1" value="Couter #1"></input><br>

HTML/CSS 倒数计时器

HTML/CSS Countdown Timer

html

javascript

css

jquery

timer