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

js+css实现番茄时间管理计时器代码

代码语言：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: 2.........完整代码请登录后点击上方下载按钮下载查看