感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<div class="item">
<p>
BREAK LENGTH
</p>
<button value="-1">
-
</button>
<input type="text" value = "5" id="break" readonly/>
<button value="+1">
+
</div>
SESSION LENGTH
<input type="text" value = "25" id="session" readonly/>
<div class="clock">
<div class="mask">
<div class="content">
SESSION
<input type="text" value="25:00" readonly/>
xxxxxxxxxx
//detct
var time =null;
$("button").click(function(){
var input = $(this).siblings("input");
var value = parseInt(input.val())+parseInt($(this).val());
input.val(value);
clearInterval(time);
})
$(".clock").click(function(){
if ($(".content").children("p").text()=="BREAK")
var clock = parseInt($("#break").val());
else
var clock = parseInt($("#session").val());
start(clock);
function start(clock){
$(".mask").height("0%");
var mintue = clock;
var second = 0;
time = setInterval(function(){
if (second||mintue){
if (second==0)
{
second = 60;
mintue--;
}
second--;
if (mintue==0)
$(".mask").height("+=1.6%");
var value = mintue+":"+tik(second);
$(".content").children("input").val(value);
if (clock==$("#session").val())
$(".content").children("p").text("BREAK");
start(parseInt($("#break").val()));
$(".content").children("p").text("SESSION");
start(parseInt($("#session").val())); }
},1000)
function tik(i){
if (i<10)
i = "0"+i;
return i;
*{
border:none;
text-align:center;
background-color:#333333;
color:#FFFFFF;
font-family: Open Sans,Arial;
font-size:20px;
.item{
display:inline-block;
margin-top:20px;
.clock{
width:300px;
height:300px;
border:2px solid #99CC00;
border-radius:50%;
cursor:pointer;
position:relative;
overflow:hidden;
margin:20px auto;
.mask{
height:0%;
position:absolute;
background:green;
bottom:0;
.content p,.content input{
bottom:260px;
background:transparent;
.content input{
margin:30px;
font-size:1.2em;