Javascript HTML/CSS倒计时程序_Javascript_Jquery_Html_Css_Timer

Javascript HTML/CSS倒计时程序

javascript jquery html css timer

Javascript HTML/CSS倒计时程序,javascript,jquery,html,css,timer,Javascript,Jquery,Html,Css,Timer,我有一个html页面，它需要为考试输入小时和分钟。 -在另一个html或css文档中，我希望基本上运行HH:MM的倒计时。i、 e.如果输入为1小时10分钟，则从01:10倒计时到00:00。我假设有某种方法可以将输入值从一个模块调用到另一个模块。 -我还想在按下开始按钮时开始倒计时 -显示模块（检查显示器）分为4个四分之一，这样4个检查计时器可以同时运行。（我希望在没有输入值的情况下，当按下启动按钮时，特定计时器不会发生任何事情） <body> <div id="div1"

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

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

我附加了JSFIDLE和代码。对于ExamSetup.html和ExamSetup.css - 或 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>

<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.html和ExamDisplay.css -（注：背景仅用于显示四分之一分区）或 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>

多谢各位！我在最后一天做了大量的检查，但发现很难找到我需要的一个简单的倒计时。许多已开发的程序主要用于日期或DD:HH:MM:SS，我无法编辑代码以仅包含HH:MM。

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

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

（完整版）

$（文档）.ready（函数（）{
函数start1（）{
var h1=$（'input:text[name=h1]'）。val（）；
var m1=$（'input:text[name=m1]'）。val（）；
$（'.counter1'）.html（h1+'：'+m1）；
var inter1=setInterval（函数（）{
m1--；
如果（m1==0&&h1！=0）{
m1=59；
h1-；
}否则{
如果（h1==0&&m1==0）{
清除间隔（inter1）；
}
}
$（'.counter1'）.html（h1+'：'+m1）；
},60000)
}
$（'#sub1'）。单击（函数（）{
start1（）；
})
});
正文{
位置：相对位置；
}
.柜台1{
宽度：50%；
高度：50px；
背景色：rgba（255,0,0,0.5）；
左：0%；
顶部：0px；
}






您是否自己尝试过此版本的JavaScript？让我们看看你尝试了什么@codyogden，我已尝试使用此：。但是我无法根据我的要求编辑代码。据我所知，你不能用HTML和CSS创建计时器等，因为它们都不是实际的编程/脚本语言。这个项目需要使用javascript。如果你选择使用JS，我会帮你编写代码（如果你选择使用）@ThermalCube，那太棒了！我该怎么写一些JS呢？哇！谢谢只有几个问题1。如何调用来自不同模块的输入？2.从我上传的ExamDisplay.html/css中可以看到，屏幕分为四个部分。我如何将您给我的代码放入每个分区？i、 e.有4个并发计时器running@ThermalCube当然，不用担心，我还有一个问题。假设我想加上：SS。i、 .e它现在显示HH:MM:SS，但只接受HH:MM输入。我该怎么做？@Vish您需要添加一个新的输入，编辑if（）部分并缩短间隔（从60000ms到1000ms）。除此之外，您还必须将秒数添加到$（'.counter'）.html（）@Vish，这样每个计数器大约多10行