jquery实现一个led时间倒计时效果代码
代码语言:html
所属分类:其他
代码描述:jquery实现一个led时间倒计时效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <style> html, body { margin: 0; padding: 0; background: #000; width: 100%; height: 100%; position: absolute; min-width: 900px; } .time { height: 200px; position: absolute; top: 40%; left: 50%; width: 900px; margin-left: -450px; margin-top: -100px; text-align: center; } .time .digit { width: 120px; height: 200px; margin: 0 5px; position: relative; display: inline-block; } .digit .segment { /*background:#00FF00;*/ border-radius: 5px; position: absolute; opacity: 0.1; transition: opacity 0.2s; -webkit-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; } .digit .segment.on, .separator { opacity: 1; box-shadow: 0 0 30px rgba(0,255,0,0.1); transition: opacity 0s; -webkit-transition: opacity 0s; -ms-transition: opacity 0s; -moz-transition: opacity 0s; -o-transition: opacity 0s; } .time .separator { width: 20px; height: 20px; /*background:#00FF00;*/ border-radius: 50%; display: inline-block; position: relative; top: -90px; } .digit .segment:nth-child(1) { top: 10px; left: 20px; right: 20px; height: 10px; } .digit .segment:nth-child(2) { top: 20px; right: 10px; width: 10px; height: 75px; height: calc(50% - 25px); } .digit .segment:nth-child(3) { bottom: 20px; right: 10px; width: 10px; height: 75px; height: calc(50% - 25px); } .digit .segment:nth-child(4) { bottom: 10px; right: 20px; height: 10px; left: 20px; } .digit .segment:nth-child(5) { bottom: 20px; left: 10px; width: 10px; height: 75px; height: calc(50% - 25px); } .digit .segment:nth-child(6) { top: 20px; left: 10px; width: 10px; height: 75px; height: calc(50% - 25px); } .digit .segment:nth-child(7) { bottom: 95px; bottom: calc(50% - 5px); right: 20px; left: 20px; height: 10px; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var date_str = ""; for (var i = 0; i <= 23; 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> <span style="color:white">分</span> <div style="display: inline-block;"> <select class="form-control" id="_second" style="width:100px"> </select> </div> <span style="color:white">秒</span> </div> <div style="display: inline-block;"> <button class="btn b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0