js+css实现番茄时间管理计时器代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现番茄时间管理计时器代码，可新建重置、设置工作时长、休息时长等参数。

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

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

<head>
    <meta charset="UTF-8">

    <style>
        @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,300");
    
    body,
    div,
    span,
    p,
    a {
      margin: 0;
      padding: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      list-style: none;
      text-decoration: none;
    }
    
    body {
      color: #fff;
      font-family: "微软雅黑", "Droid Serif", serif;
      background: linear-gradient(
        90deg,
        rgba(239, 50, 82, 0.8) 10%,
        rgba(239, 159, 22, 0.8)
      );
    }
    
    .wrapper {
      position: relative;
      width: 350px;
      height: 400px;
      padding: 10px;
      margin: 100px auto 0;
      background: linear-gradient(
        180deg,
        rgba(239, 50, 82, 0.5) 20%,
        rgba(239, 159, 22, 0.8)
      );
      border-radius: 50%;
      box-shadow: -20px 10px 20px 0 rgba(0, 0, 0, 0.2),
        -10px 15px 30px 0 rgba(0, 0, 0, 0.6),
        inset 60px -30px 40px 0 rgba(0, 0, 0, 0.2),
        inset -10px -30px 50px 0 rgba(0, 0, 0, 0.2);
    }
    
    .tomato {
      position: relative;
      clear: both;
      width: 250px;
      height: 200px;
      margin: 0 auto;
      border-radius: 50%;
      background: #3e3e3e;
      box-shadow: inset 0 -10px 20px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 20px 0 rgba(0, 0, 0, 0.3);
      text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
      overflow: hidden; /*不显示超过对象尺寸的内容*/
      cursor: default;
    }
    
    .tomato .pomodoro {
      position: absolute;
      width: 100%;
      margin-top: 20px;
      font-weight: 600;
      font-size: 20px;
      text-align: center;
      z-index: 4;
    }
    
    .tomato .timeLeft {
      position: absolute;
      top: 60px;
      left: 50%;
      width: 250px;
      margin-left: -125px;
      font-size: 70px;
      text-align: center;
      z-index: 4;
    }
    
    .tomato .fill {
      position: absolute;
      width: 100%;
      height: 0%;
    }
    
    .tomato .session {
      bottom: 0;
      background: rgba(239, 50, 82, 0.6);
      z-index: 2;
    }
    
    .tomato .break {
      top: 0;
      background: rgba(239, 159, 22, 0.6);
      z-index: 3;
    }
    
    .settings {
      position: absolute;
      top: 210px;
      left: 50%;
      width: 320px;
      margin-left: -160px;
      text-align: center;
      -webkit-touch-callout: none; /*禁止或显示系统默认菜单*/
      -webkit-user-select: none; /*文字不可以被选中或复制*/
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    .settings .description {
      margin-top: 10px;
      font-size: 18px;
    }
    
    .settings .value {
      width: 100px;
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .settings .control {
      width: 20px;
      height: 20px;
      border: 2px solid #fff;
      border-radius: 50%;
      box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
      font-weight: bold;
      font-size: 16px;
      line-height: 13px;
      text-align: center;
      cursor: pointer;
    }
    
    .settings .break {
      float: left;
      width: 100px;
      margin-left: 30px;
      text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
    }
    
    .value .v {
      display: inline-block;
      width: 60px;
    }
    
    .settings .session {
      float: right;
      width: 100px;
      margin-right: 30px;
      text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
    }
    
    .status {
      position: absolute;
      top: 320px;
      left: 50%;
      width: 60px;
      height: 60px;
      padding: 0 5px;
      margin-left: -30px;
      border: 3px solid #fff;
      border-radius: 50%;
      box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
      font-size: 18px;
      line-height: 54px;
      text-align: center;
      z-index: 4;
    }
    
    .wrapper .newCreate,
    .wrapper .reset {
      position: absolute;
      top: 290px;
      width: 60px;
      height: 60px;
      padding: 0 5px;
      border: 3px solid #fff;
      border-radius: 50%;
      box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
      font-size: 18px;
      line-height: 54px;
      text-align: center;
      text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }
    
    .wrapper .newCreate {
      left: 70px;
    }
    
    .wrapper .reset {
      right: 70px;
    }
    
    .status:hover,
    .settings .control:hover,
    .newCreate:hover,
    .reset:hover {
      border-color: #6e6e6e;
      box-shadow: none;
      color: #6e6e6e;
      text-shadow: none;
    }
    
    .status:active,
    .settings .control:active,
    .newCreate:active,
    .reset:active {
      border-color: #ff94b1;
      box-shadow: none;
      color: #ff94b1;
      text-shadow: none;
    }
    </style>
</head>

<body>

    <div class="wrapper">
        <div class="tomato">
            <div class="fill session"></div>
            <div class="fill break"></div>
            <div class="pomodoro">番茄计时器</div>
            <div class="timeLeft">1:00</div>
        </div>
       .........完整代码请登录后点击上方下载按钮下载查看