登录  /  注册
博主信息
博文 22
粉丝 0
评论 7
访问量 31246
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML倒计时器
阿杰网络科技博客资源站
原创
2086人浏览过


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

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学