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/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
  
<style>
@import url(https://fonts.googleapis.com/css?family=Rationale);
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #354530;
}

.box,
.progress,
.lid,
.pop-up {
  position: absolute;
  width: 380px;
  height: 380px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
}

.progress {
  box-shadow: inset 0 0 15px #7c9d71;
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
          transform: translate(-50%, -50%) rotate(-90deg);
}

.progress-bar {
  position: absolute;
  border-radius: 0;
  width: 380px;
  height: 380px;
}

#lid-work, #lid-rest {
  box-shadow: 0 7px 7px rgba(20, 20, 20, 0.7), inset 0 0 15px #121811;
}

#lid-work, #filler-l-work {
  height: 334.4px;
  width: 334.4px;
  background: shade(#354530, 25%);
}

#progress-rest, #filler-p-rest {
  width: 323px;
  height: 323px;
}

#lid-rest, #filler-l-rest {
  width: 266px;
  height: 266px;
  background: shade(#354530, 15%);
}

#filler-l-rest, #filler-l-work {
  cursor: default;
}

#filler-p-rest, #filler-p-work, #filler-t-base {
  cursor: pointer;
}

#box-tomato {
  box-shadow: inset 0 0 10px #b4c6ae;
  border: 1px solid #b4c6ae;
  box-sizing: border-box;
}

.tomato {
  position: absolute;
  height: 266px;
  width: auto;
  left: 10.25%;
  top: 14%;
}

#tomato-base, #filler-t-base {
  border-radius: 50%;
  background: green;
  width: 243.2px;
  height: 243.2px;
}

#tomato-base {
  background: #354530;
}

#tomato-button {
  position: absolute;
  left: 6.25%;
  top: 2%;
  background: red;
  width: 216.6px;
  height: 231.8px;
  border-radius: 50%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  cursor: pointer;
  z-index: 10000;
  opacity: 1;
  visibility: visible;
}

#box-buttons {
  z-index: 10;
  opacity: 0;
}

#pop-refresh {
  position: absolute;
  cursor: pointer;
  width: 100px;
  height: 100px;
  left: 99%;
  top: 98.5%;
}
#pop-refresh img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-transition: -webkit-transform 0.25s ease-in-out;
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
}
#pop-refresh:hover img {
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
}

#refresh {
  -webkit-transition: -webkit-transform 0.25s ease-in;
  transition: -webkit-transform 0.25s ease-in;
  transition: transform 0.25s ease-in;
  transition: transform 0.25s ease-in, -webkit-transform 0.25s ease-in;
}

.progress-bar-opaque {
  background-color: tint(#354530, 10%);
}

#box-pointers {
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
          transform: translate(-50%, -50%) rotate(-90deg);
}

.arrow-axis {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  position: fixed;
  width: 38px;
  height: 38px;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  z-index: 2;
}

#axis-work {
  -webkit-transform: translate(171px, 171px);
          transform: translate(171px, 171px);
}

#axis-rest {
  -webkit-transform: translate(167.2px, 167.2px);
          transform: translate(167.2px, 167.2px);
}

.arrow {
  width: 0;
  height: 0;
  border-top: 11.875px solid transparent;
  border-bottom: 11.875px solid transparent;
  border-left: 15.8333333333px solid #1e271b;
}

#arrow-work {
  -webkit-transform: translate(172.52px, 0);
          transform: translate(172.52px, 0);
}

#arrow-rest {
  -webkit-transform: translate(138.7px, 0);
          transform: translate(138.7px, 0);
}

.clock-axis {
  position: absolute;
  left: 22.5%;
  top: 5%;
  width: 3.8px;
  height: 190px;
  -webkit-transform: translateX(-1.9px);
          transform: translateX(-1.9px);
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
}

.pointer {
  position: absolute;
  left: 0;
  top: -15px;
  border-left: 7.037037037px solid transparent;
  border-right: 7.037037037px solid transparent;
  border-top: 23.75px solid #b4c6ae;
  border-radius: 50%;
  -webkit-transform: translate(-5.9375px, -214.7px);
          transform: translate(-5.9375px, -214.7px);
}

#pointer5 {
  -webkit-transform: translate(103.55px, 171px) rotate(30deg);
          transform: translate(103.55px, 171px) rotate(30deg);
}

#pointer10 {
  -webkit-transform: translate(103.55px, 171px) rotate(60deg);
          transform: translate(103.55px, 171px) rotate(60deg);
}

#pointer15 {
  -webkit-transform: translate(103.55px, 171px) rotate(90deg);
          transform: translate(103.55px, 171px) rotate(90deg);
}

#pointer20 {
  -webkit-transform: translate(103.55px, 171px) rotate(120deg);
          transform: translate(103.55px, 171px) rotate(120deg);
}

#pointer25 {
  -webkit-transform: translate(103.55px, 171px) rotate(150deg);
          transform: translate(103.55px, 171px) rotate(150deg);
}

#pointer30 {
  -webkit-transform: translate(103.55px, 171px) rotate(180deg);
          transform: translate(103.55px, 171px) rotate(180deg);
}

#pointer35 {
  -webkit-transform: translate(103.55px, 171px) rotate(-150deg);
          transform: translate(103.55px, 171px) rotate(-150deg);
}

#pointer40 {
  -webkit-transform: translate(103.55px, 171px) rotate(-120deg);
          transform: translate(103.55px, 171px) rotate(-120deg);
}

#pointer45 {
  -webkit-transform: translate(103.55px, 171px) rotate(-90deg);
          transform: translate(103.55px, 171px) rotate(-90deg);
}

#pointer50 {
  -webkit-transform: translate(103.55px, 171px) rotate(-60deg);
          transform: translate(103.55px, 171px) rotate(-60deg);
}

#pointer55 {
  -webkit-transform: translate(103.55px, 171px) rotate(-30deg);
          transform: translate(103.55px, 171px) rotate(-30deg);
}

#pointer60 {
  -webkit-transform: translate(103.55px, 171px);
          transform: translate(103.55px, 171px);
}

.watch {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  height: 60px;
  width: 68.4px;
  background: #1e271b;
  border-radius: 10%;
  color: #fff;
  overflow: hidden;
  padding: 0;
  cursor: default;
  z-index: 5;
  text-align: center;
  -webkit-transform: translate(167.2px, 68.4px);
          transform: translate(167.2px, 68.4px);
}

#position-rest-watch {
  text-align: center;
  left: 0;
  top: 0;
}

#rest-watch {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

#time-label {
  border-bottom: 1px solid white;
  width: 100%;
  font-size: 16px;
  -webkit-transition: background 0.25s ease-in-out;
  transition: background 0.25s ease-in-out;
}

.danger {
  background: #D9534F;
}

.success {
  background: #5CB85C;
}

.opaque {
  background: tint(#354530, 10%);
}

.tooltip-inner {
  opacity: 1;
  background-color: shade(#354530, 50%);
  box-shadow: 0 4px 5px shade(#354530, 60%);
  letter-spacing: 0.15em;
  font-size: 1.5em;
  font-family: "Rationale", sans-serif;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: shade(#354530, 50%);
}

#timer {
  text-align: left;
  padding-left: 11.4px;
  margin-top: -10px;
  color: white;
  font-family: "Rationale", sans-serif;
  font-size: 24px;
}
</style>



</head>

<body>
  <div class="container">
  <div class="box" id="box-progress-bars">
    <div class="clock-axis" id="pointer5">
      <div class="pointer"></div>
    </div>
    <div class="clock-axis" id="pointer10">
      <div class="pointer"></div>
    </div>
    <div class="clock-axis" id="pointer15">
      <div class="pointer"></div>
    </div>
    <div class="clock-axis" id="pointer20">
      <div class="pointer"></div>
    </div>
    <div class="clock-axis" id="pointer25">
      <div class="pointer"></div>
    </div>
    <div class="clock-axis" id="pointer30">
      <div class="pointer"></div>
    </div>
    <div class="clock-axis" id="pointer35">
      <div class="pointer"></div>
    </div>
    <div class="clock-axis" id="pointer40">
      <div class="pointer"></div>
    </div>
    <div class="clock-axis" id="pointer45">
      <div class="pointer"></div>
    </div>
    <div class="clock-axis" id="pointer50">
      <div class="pointer"></div>
    </div>
    <div class="clock-axis" id="pointer55">
      <div class="pointer"></div>
    </div>
    <div class="clock-axis" id="pointer60">
      <div class="pointer"></div>
    </div>
    <div class="progress" id="progress-work">
      <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%" id="bar-work"><span class="sr-only"> work</span></div>
    </div>
    <div class="lid" id="lid-work"></div>
    <div class="progress" id="progress-rest">
      <div class="progress-bar progress-bar-opaque progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="bar-rest"><span class="sr-only">rest</span></div>
    </div>
    <div class="lid" id="lid-rest"></div>
    <div class="lid" id="tomato-base"></div>
  </div>
  <div class="box" id="box-pointers">
    <div class="arrow-axis" id="axis-work">
      <div class="arrow" id="arrow-work"></div>
    </div>
    <div class="arrow-axis" id="axis-rest">
      <div class="arrow" id="arrow-rest"></div>
    </div>
  </div>
  <div class="box" id="box-tomato"><img class="tomato" src="//repo.bfw.wiki/bfwrepo/image/5fc72b1099bb1.png?x-oss-process=i.........完整代码请登录后点击上方下载按钮下载查看