jquery+knob实现番茄时间管理器代码-html代码-BFW代码库

jquery+knob实现番茄时间管理器代码

代码语言：html

所属分类：其他

代码描述：jquery+knob实现番茄时间管理器代码

下面为部分代码预览，完整代码请点击下载或在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 rel='stylesheet' href='https://fonts.googleapis.com/css?family=Play'>

    <style>
        body{
          background:#f75647;/*#ff6347;*/
          font-family: 'Play', sans-serif;
          color:#fff;
        }
        
        h1 {
          margin: 2% 0 2% 0;
          text-align: center;
          color: #fff;
        }
        #timer{
          text-align: center;
          font-size:1.3em;
        }
        #timer input {
          height: 30px;
          font-size: 1.1em;
          text-align: center;
          width: 65px;
          outline: none;
          background:none;
          border:none;
          color:#fff;
          font-family:inherit;
          border-bottom: 1px solid #991700;
        }
        #timer input:focus{
          border-bottom: 1px solid #000;
        }
        
        
        .timer-container{
          display: inline-block;
          margin:0 100px 0 100px;
          color:#545454;
        }
        
        
        .set{
          display:inline-block;
        }
        
        /* button styles */
        
        .buttons {
          text-align: center;
          
        }
        .btn {
          display: inline-block;
          width: 80px;
          margin: 4px;
          padding: 6px;
          text-decoration: none;
          cursor: pointer;
        }
        .btn-reset, .btn-pause, .btn-start {
          color: #fff;
          border: 2px solid #fff;
        }
        
        .btn-reset:hover,.btn-pause:hover, .btn-start:hover {
          background-color: #545454;
        }
        
        /* circle */
        #circle{
          margin:auto;
        }
        
        .time{
          margin:1em 0 2em 0;
          text-align: center;
          font-weight:bold;
         }
        .time input {
          text-align: center;
          outline: none;
          background:none;
          border:none;
          color:#fff;
          font-family:inherit;
        }
        
        .current_status{
          text-align: center;
          font-size:1.2em;
          margin-bottom:2em;
        }
        
        /* global override styles */
        
        .hidden {
          display: none;
        }
        
        .current_status:after {
          overflow: hidden;
          display: inline-block;
          vertical-align: bottom;
          -webkit-animation: ellipsis steps(5,end) 1500ms infinite;      
          animation: ellipsis steps(5,end) 1500ms infinite;
          content: "\2026"; /* ascii code for the ellipsis character */
          width: 0px;
        }
        
        /*current_status Animation*/
        @keyframes ellipsis {
          to {
            width: 1.5em;    
          }
        }
        
        @-webkit-keyframes ellipsis {
          to {
            width: 1.5em;    
          }
        }
    </style>


</head>

<body>
    <div class="container">
        <div class="header">
            <h1>Pomodoro Timer</h1>
        </div>

        <!---TIMER--->
        <div class="row">
            <div id="timer">
                <div class="timer-container">
                    <h4>Session Length</h4>
                    <input type="number" min="1" max="60" value="25" maxlength='2' size="2" id="session" class="set" />
                </div>
                <div class="timer-container">
                    <h4>Break Length</h4>
                    <input type="number" min="1" max="20" value="05" maxlength='2' size="2" id="break" class="set" />
                </div>
            </div>
        </div>
        <!---END--TIMER--->

        <div id="circle">
            <!--TIME DISPLAY-->
            <div class="time">
                <input type="text" value="1500" maxlength='4' size="5" id="timer_display" />
            </div>
            <!--END-TIME DISPLAY-->

            <!--WORKING STATUS-->
            <div class="current_status">
                <a id="working">Working</a>
                <a id="rest">Rest</a>
                <a id="lets_start">Let's start</a>
            </div>
            <!--END-WORKING STATUS-->

            <!---RESET & START--->
            <div class="buttons">
                <a id="cmd-reset" class="btn btn-reset"><i class="fa fa-undo"></i> Reset</a>
                <a id="cmd-pause" class="btn btn-pause hidden"><i class="fa fa-pause"></i> Pause</a>
                <a id="cmd-go" class="btn btn-start"><i class="fa fa-play"></i> Start</a>
            </div>
            <!---END--RESET & S.........完整代码请登录后点击上方下载按钮下载查看