bootstrap+jquery打造装水番茄管理时间闹钟工具效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：bootstrap+jquery打造装水番茄管理时间闹钟工具效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.css">
  
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300);

body {
  background-color: none;
  color: #999;
  font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 300;
  padding: 60px 0;
  text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  font-weight: 300;
}

.main-title{
  margin-top: 40px;
  font-size: 55px;
}

p{
  font-size: 28px;
}

button{
  font-size: 25px;
  color: #999;
  background:none;
  border:none;
}

button:focus{
  color: #666;
  outline: none;
}

.break-set,
.work-set{
  margin-top: 10px;
  margin-bottom: 10px;
  
}

.break-set p,
.work-set p {
  display: inline;
  margin-left: 14px;
  margin-right: 14px
}

#session {
  padding-top: 50px;
  font-size: 60px;
}

#stopwatch{
  background-color: none;
  z-index: -7;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 20;
  overflow: hidden;
  height: 400px;
  width: 400px;
  border-radius: 50%;
}

#inner-stopwatch{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
  z-index: 2;
  border: 4px solid #999;
}

#progress {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
}

.intial, .work, .break{
  border: 5px solid;
}

.initial {
  border-color: #F2F2F2;
}

.break {
  border-color: #cc0000;
}

.work {
  border-color: #29a329;
}

.countdown{
  padding-top: 80px;
}

#count{
  font-size: 70px;
  margin-bottom: -10px;
}

.start, 
.pause,
.reset,
.restart{
  display: inline;
  padding: 10px 20px;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 12px;
}

.colorbreak {
  background-color: #cc0000;
}

.colorwork {
  background-color: #29a329;
}
</style>



</head>

<body>
  <section>
  
  <div class="row main">
    <div class="col-lg-6 col-lg-offset-3 text-center">
      <div id="stopwatch" class="intial colorfil">
        <span id="progress"></span>
        <div id="inner-stopwatch">
        <div id="session">work</div>
          <div>
          <div class="col-lg-6 text-center break-set">
      <h6>Set Break length</h6>
        <button class="toggle" id="down-break">-</button>
        <p class="break-time">5</p>
        <button class="toggle" id="up-break">+</button>
    </div>
    <div class="col-lg-6 text-center work-set">
      <h6>Set Work length</h6>
      <button class="toggle" id="down-work">-</button>
      <p class="work-time">25</p>
      <button class="toggle" id="up-work">+</button>
    </div>
          </div>
        <div id="countdown" class="countdown">
          <p id="count"></p>
        </div>
        <div class="operations">
          <button id="timerbtn" class="start">start</button>
          <button class="reset">reset</button>
      </div>
    </div>
      </div>
    </div>
  </div>
</section>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>

$(document).ready(function(){


var breaktime = 300;
var worktime = 1500;
//var timeLeft = worktime;
var seconds = worktime;
var currentLength = worktime;
displayTime(worktime);
var timerRun = false; 
var sessionName = "work";
 
// functionality to adjust worktime and break time
function adjustTime(button){
  //reset();
  var x = button.id;
  switch(x){
   case "down-break":   
     if(breaktime > 0) {breaktime -= 60};
     reset("break");
     break;
   case "up-break":     
     breaktime += 60;
     reset("break");
     break;
   case "down-work":    
     if(worktime > 0) {worktime -= 60};
     reset("work");
     break;
   case "up-work":      
     worktime += 60;
     reset("work");
     break;
   default: 
     if(sessionName == "work"){
        displayTime(worktime);   
     }else{
        displayTime(breaktime);
        return breaktime;
.........完整代码请登录后点击上方下载按钮下载查看