HTML/CSS 倒数计时器
[英]HTML/CSS Countdown Timer
问题描述
I have a html page which takes hour and minute inputs for exams.
我有一个 html 页面，需要输入小时和分钟来进行考试。 - In another html or css document I would like to essentially run a countdown timer of HH:MM. - 在另一个 html 或 css 文档中，我想基本上运行一个 HH:MM 的倒数计时器。 ie if input was 1 hour and 10 min it would countdown from 01:10 to 00:00.即如果输入是 1 小时 10 分钟，它将从 01:10 倒计时到 00:00。 I am assuming there is some way of calling the input values from one module to another.我假设有某种方法可以将输入值从一个模块调用到另一个模块。 - I would also like to make this countdown start when a start button is pressed - The display module (Exam Display) is split into 4 quarters such that 4 exam timers can run concurrently. - 我还想在按下开始按钮时开始倒计时 - 显示模块（考试显示）分为 4 个部分，以便 4 个考试计时器可以同时运行。 (I am hoping that in the case that there is no input value, when the start button is pressed nothing will happen with that particular timer) （我希望在没有输入值的情况下，当按下开始按钮时，该特定计时器不会发生任何事情）
I am attaching both jsfiddle and the code.我同时附上了 jsfiddle 和代码。 For ExamSetup.html & ExamSetup.css - https://jsfiddle.net/vf113tux/1/ OR ExamSetup.html:对于 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:考试设置.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;
}
For ExamDisplay.html & ExamDisplay.css - https://jsfiddle.net/890e2dmq/ (Note for backgrounds are there simply to show the quarter partitions) OR ExamDisplay.html: Untitled Document对于 ExamDisplay.html 和 ExamDisplay.css - https://jsfiddle.net/890e2dmq/ （背景说明只是为了显示季度分区）或 ExamDisplay.html: Untitled Document
<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:考试显示.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; }
Thank you very much!非常感谢！ And I have checked through quite extensively for the last day but have found it rather difficult to find a proper simple countdown that I require.我在最后一天进行了相当广泛的检查，但发现很难找到我需要的适当的简单倒计时。 Many of the developed programs out are mainly for dates or they are for DD:HH:MM:SS and I was unable to edit the code to incorporate only HH:MM.许多开发的程序主要用于日期，或者它们用于 DD:HH:MM:SS，我无法编辑代码以仅包含 HH:MM。
1 个解决方案
解决方案1
0 已采纳 2015-05-18 10:39:48
Ok, now the improoved version with 4 timers (CSS is up to you).好的，现在是带有 4 个计时器的改进版本（CSS 由您决定）。 JSFIDDLE (full version) 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.