demo1:番茄时钟

最新推荐文章于 2022-10-31 10:27:49 发布

chengpang2665

最新推荐文章于 2022-10-31 10:27:49 发布

阅读量563

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/4036426/blog/2961877

版权

项目描述（需求分析）：使用原生JS加JQery实现下面效果

1. 通过点击Break Length或者Session Length下面的- 、+按钮设置倒计时时间;

2. 点击改变时钟状态，点击Break显示为Break、点击Session显示为Session;

3. 设置时间后，进入倒计时状态，并且显示为00: 00：00 的显示模式；

4. Session状态结束后，倒计时转为Break，如此反复；

5. 时钟背景颜色在Session时设置为一种颜色，Break时设置为另一种颜色，并且高度随着时间变化。

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/index.css">
<title>tomato clock</title>
</head>
<body>
<div class="container">
 <div class="tomato">Tomato Clock</div>
 <div class="setNum">
   <div class="break">
     <div class="break-title">Break Length</div>
     <div class="break-minute">-</div>
     <div class="break-num"></div>
     <div class="break-add">+</div>
  </div>
  <div class="session">
     <div class="session-title">Session Length</div>
     <div class="session-minute">-</div>
     <div class="session-num"></div>
     <div class="session-add">+</div>
  </div>
 </div>
 <div class="circle">
    <div class="model">
      <div class="bg"></div>
      <div class="title"></div>
      <div class="time"></div>
    </div>
  </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

js:http://libs.baidu.com/jquery/2.0.0/jquery.min.js JQuery百度CDN；

js自撰部分

var breakTime = 5,
    sessionTime = 25,
    model = 'Session',
    current = sessionTime * 60,
    flag = false,
    timer;

function init(){
    $('.break-num').text(breakTime);
    $('.session-num').text(sessionTime);
    $('.title').text(model);
    $('.time').text(sessionTime);
    clickEvent();
}
init();

function clickEvent(){
    $('.break-minute').click(function(){
        changeNum('b',-1);
    })
    $('.break-add').click(function(){
        changeNum('b',1);
    })
    $('.session-minute').click(function(){
        changeNum('s',-1);
    })
    $('.session-add').click(function(){
        changeNum('s',1);
    })
    $('.model').click(function(){
        if(flag){
            clearInterval(timer);
        }else{
            timer = setInterval(function(){
                changeTime();
            },1000)
        }
        flag = !flag;
    })
}

function changeTime(){
    current --;
if( model == 'Session' ){
    if( current < 0 ){
        current = breakTime * 60;
        model = 'Break';
        $('.title').text(model);
    }
    $('.bg').css('background','orange');
    }
    else{
    if( current < 0 ){
        current = sessionTime * 60;
        model = 'Session';
        $('.title').text(model);
    }
    $('.bg').css('background','green');
    }
    if( model == 'Session' ){
        // 高度百分比换算公式：(1-current/(breakTime*60))*100 + '%'
        $('.bg').height((1-current/(sessionTime*60))*100 + '%')
    }else if( model == 'Break'){
        $('.bg').height((1-current/(breakTime*60))*100 + '%')
    }
    $('.time').text(seversion(current));
}
function seversion(time){
    current = parseInt(time);
    var h = parseInt(current/3600),
        m = parseInt(current%3600/60),
        s = parseInt(current%3600%60);
    return double(h) + ':' + double(m) + ':' + double(s);
}
function double(num){
    if( num < 10 ){
        return num = '0' + num;
    }else{
        return num = '' + num;
    }
}

function changeNum(str,num){
    if(!flag){
        if( str=='b' ){
            breakTime += num;
            if( breakTime < 1 ){
                breakTime = 1;
            }
            current = breakTime*60;
            model = 'Break';
            $('.title').text(model);
            $('.break-num').text(breakTime);
            $('.time').text(breakTime);
        }else{
            sessionTime += num;
            if( sessionTime < 1){
                sessionTime = 1;
            }
            current = sessionTime*60;
            model = 'Session';
            $('.title').text(model);
            $('.session-num').text(sessionTime);
            $('.time').text(sessionTime);
        }
    }
}

css部分：

body{
    margin: 0;
    padding: 0;
    user-select: none;
    background: #222;
}
.container{
    width: 800px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}
.tomato{
    font-size: 6em;
    margin: 80px 0;
    font-weight: bold;
}
.setNum{
    width: 100%;
    height: 120px;
}
.break{
    float: left;
}
.session{
    float: right;
}
.break-title,.session-title{
    font-size: 36px;
}
.break-minute,.break-num,.break-add,.session-minute,.session-num,.session-add{
    font-size: 24px;
    padding: 15px;
    display: inline-block;
}
.break-minute,.break-add,.session-minute,.session-add{
    cursor: pointer;
}
.circle{
    margin: 0 auto;
    height: 400px;
    width: 400px;
    border: 5px solid orange;
    border-radius: 50%;
}
.model{
    position: relative;
    margin: 8px;
    width: 384px;
    height: 384px;
    border-radius: 50%;
    overflow: hidden;
}
.bg{
    position: absolute;
    z-index: -1;
    bottom: 0;
    height: 0;
    width: 100%;
    background: orange;
}
.title{
    font-size: 72px;
    margin: 60px 0;
}
.time{
    font-size: 64px;
    margin-top: 40px;
}

JavaScript笔记：

1、换算时、分、秒：var h = parseInt(current/3600),

m = parseInt(current%3600/60),

s = parseInt(current%3600%60);

return h + ':' + m + ':' + s;

转载于:https://my.oschina.net/u/4036426/blog/2961877

chengpang2665

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
demo1:番茄时钟

项目描述（需求分析）：使用原生JS加JQery实现下面效果 1. 通过点击Break Length或者Session Length下面的- 、+按钮设置倒计时时间; 2. 点击改变时钟状态，点击Break显示为Break、点击Session显示为Sessio...
复制链接

扫一扫