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

代码语言:html

所属分类:其他

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

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

网友评论0