Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML倒计时器
Blogger Information
Blog 22
fans 0
comment 7
visits 32031
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML倒计时器
阿杰网络科技博客资源站
Original
2141 people have browsed it


QQ浏览器截图20190312210015.png

<!DQQ浏览器截图20190312210015.pngOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>倒计时器</title>

<link rel="stylesheet" href="css/bootstrap.min.css">


<link rel="stylesheet" type="text/css" href="css/style.css">


<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

var date_str = "";

for (var i = 0; i <= 24; i++) {

var d_;

i < 10 ? d_ = "0" + i : d_ = i;

date_str = date_str + "<option>" + d_ + "</option><br/>"

}

$("#_minute").append(date_str);

var time_str = "";

for (var i = 0; i <= 59; i++) {

var t_;

i < 10 ? t_ = "0" + i : t_ = i;

time_str = time_str + "<option>" + t_ + "</option><br/>"

}

$("#_second").append(time_str);

});

$(document).ready(function() {

$("#start_").click(function() {

var m_ = $("#_minute").val();

var s_ = $("#_second").val();

seconds_ = m_ * 60 + s_ * 1;

});

$("#reset_").click(function() {

$("#_minute").val("00");

$("#_second").val("00");

seconds_ = 0;

clearInterval(timer);

});

});

</script>


</head>


<body>

<form role="form">

<div class="form-group">

<div style="display: inline-block;margin-top: 50px;margin-left: 500px;">

<div style="display: inline-block;">

<select class="form-control" id="_minute" style="width:100px">

</select>

</div>

&nbsp;<span style="color:white">分</span>

<div style="display: inline-block;">

<select class="form-control" id="_second" style="width:100px">

</select>

</div>

&nbsp;<span style="color:white">秒</span> </div>

<div style="display: inline-block;">

<button class="btn btn-success" type="button" id="start_">开始</button>

<button class="btn btn-danger" type="button" id="reset_">停止</button>

</div>

</div>

<div class="time">

<div class="digit minutes">

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

</div>

<div class="digit minutes">

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

</div>

<div class="separator"></div>

<div class="digit seconds">

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

</div>

<div class="digit seconds">

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

<div class="segment"></div>

</div>

</div>

</form>


<script src="js/countdown.js" type="text/javascript"></script>

<div style="text-align:center;">

</div>

</body>

</html

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post