自己写的一个苹果钟，有点小BUG，求大神来指教和帮忙，谢谢。

hopperhuang 2016-08-28 11:29:41

先说说BUG是怎样的。点击圆圈部分可以控制钟的运行和暂停。有时候会点击多了，秒表自己跳的很快，一秒跳好几下。
有时候会这样。这是为什么呢？
有大神帮我优化一下吗？
因为我对SETTIMEOUT 和CLEARTIMEOUT这个机制不太懂。
顺便解释解释SETINTERVAL和CLEARINTERVAL机制可以吗？
原本我是打算用SETINTERVAL去写的。
后来发现不行，从网上看到用SETTIMEOUT然后递归的写法可以解决。就借用了别人的思想，然后问题基本得到解决了。
先谢各位大神啦！！
项目的CODEPEN地址在这里
响应式布局没仔细做好，不好意思啦，请见谅。
https://codepen.io/hopperhuang/full/qNZxZK

源码在这里



<html lang="zh-CN">

  <head>

    <meta charset="gb2312">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

	<meta name="renderer" content="webkit">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>



    <!-- Bootstrap -->

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">



<!-- 可选的Bootstrap主题文件（一般不用引入） -->

<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap-theme.min.css">



<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>



<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<style>

body {

background-color: black;

font-family: "微软雅黑";

color:white;

}

#title {

width:40%;

margin-left:auto;

margin-right:auto;

color:white;

font-size:80px;

text-align:center;

margin-top:20px;

}

#l {

width:40%;

margin:auto;

text-align:center;

margin-top:30px;

}

#bl {

width:40%;

float:left;

}

#sl {

width:40%;

float:left;

margin-left:20%;

}

#blminus,#slminus {

width:20%;

float:left;

font-size:30px;

cursor:pointer;

}

#blnumber,#slnumber {

width:60%;

float:left;

font-size:40px;

}

#bladd,#sladd {

width:20%;

float:left;

font-size:30px;

cursor:pointer;

}

#outer {

width:300px;

height:300px;

position:absolute;

top:300px;

left:550px;

border:4px solid rgb(93,172,129);

}

#inner {

width:294px;

height:294px;

position:absolute;

border:4px solid black;

}

#outer,#inner {

border-radius:50%;

overflow:hidden;

}

#innner1 {

position:absolute;

background-color:black;

width:100%;

height:50%;

z-index:-1;

}

#innner2 {

position:absolute;

background-color:rgb(93,172,129);

width:100%;

height:50%;

z-index:-1;

top:50%;

}

#status {

position:absolute;

width:100%;

height:50%;

color:white;

font-size:30px;

text-align:center;

padding-top:30px;

}

#time {

position:absolute;

width:100%;

height:50%;

top:50%;

color:white;

font-size:30px;

text-align:center;

padding-top:30px;

}





</style>

<script>

$().ready(function(){

//创建一个钟



function clock_maker(b_length,s_length){



this.break = {

"length":b_length,

"time":function(){ return this.length*60 },

"go":0

};

this.breakup = function(){

this.break.length++;

};

this.breakdown = function(){

if(this.break.length > 1  ){

this.break.length--;

}

};

this.session = {

"length":s_length,

"time":function(){ return this.length*60 },

"go":0

};

this.sessionup = function(){

this.session.length++;

};

this.sessiondown =  function(){

if(this.session.length > 1  ){

this.session.length--;

}

};

this.status = "session";

this.running = "no";



}





var clock = new clock_maker(5,25);







//显示出来

//显示BREAK

function show_break(){

$("#blnumber").html( clock.break.length );

}

show_break();

//显示状态SESSION

function show_session(){

$("#slnumber").html( clock.session.length );

}

show_session();

//显示状态

function show_status(){

$("#status").html( clock.status );

}

show_status();

//显示时间

function show_time(){

var sta = clock.status;

var t= clock[sta].time();

var go = clock[sta].go;

var rest = t - go;

var show_t = rest%60 > 9 ? Math.floor(rest/60) + ":" + rest%60 : Math.floor(rest/60) + ":0" + rest%60;

$("#time").html( show_t );

}

show_time();

//显示百分比

function show_percentage(){

var sta = clock.status;

var t= clock[sta].time();

var g =  clock[sta].go 

var rest = t - g;

p1 = Math.floor((g/t)*100) + "%";

p2 = Math.floor((rest/t)*100) + "%" ;

$("#innner1").css("height",p2);

$("#innner2").css("height",p1);

$("#innner2").css("top",p2);

}

show_percentage();







//设置增减

$("#blminus").click(function(){

if( clock.running == "no" ){

var sta = clock.status;

var g =  clock[sta].go 

if( g > 0 ){

clock[sta].go = 0;

}

clock.breakdown();

show_break();

show_time();

}

} );

$("#bladd").click(function(){

if( clock.running == "no" ){

var sta = clock.status;

var g =  clock[sta].go 

if( g > 0 ){

clock[sta].go = 0;

}

clock.breakup();

show_break();

show_time();

}

} );

$("#slminus").click(function(){

if( clock.running == "no" ){

var sta = clock.status;

var g =  clock[sta].go 

if( g > 0 ){

clock[sta].go = 0;

}

clock.sessiondown();

show_session();

show_time();

}

} );

$("#sladd").click(function(){

if( clock.running == "no" ){

var sta = clock.status;

var g =  clock[sta].go 

if( g > 0 ){

clock[sta].go = 0;

}

clock.sessionup();

show_session();

show_time();

}

} )

//开关时钟

$("#outer").click(function(event){

var s_i;

if( clock.running == "no" ){

//设定时钟状态

clock.running = "yes";

console.log(clock.running);

//定义倒计时函数

function daojishi(){

if( clock.running == "yes" ){

var sta = clock.status;

var t= clock[sta].time();

var g =  clock[sta].go 

var rest = t - g;

if(rest == 0 && sta == "session" ){

clock[sta].go = 0;

clock.status = "break";

clock[sta].go++;

show_status();

show_time();

show_percentage();

}

else if ( rest == 0 && sta == "break" ){

clock[sta].go = 0;

clock.status = "session";

clock[sta].go++;

show_status();

show_time();

show_percentage();

}



else {

//go增加

clock[sta].go++;

show_status();

show_time();

show_percentage();

}

s_i = setTimeout( function(){daojishi(); } ,1000);





}}

daojishi();

}

else if(clock.running == "yes" ){

clock.running = "no";

console.log(clock.running);

clearTimeout(s_i);

s_i = 0;

}

console.log(s_i);





} );





} );









</script>

   

  </head>

  <body>

   <div id = "title">

   Freecodecamp

	</div>

	<div id = "l">

	<div id  = "bl">

	<div>BREAK LENGTH</div>

	<div id = "blminus" >-</div>

	<div id = "blnumber"  >5</div>

	<div id = "bladd" >+</div>

    </div>

	<div id = "sl">

	<div>SESSION LENGTH</div>

	<div id = "slminus">-</div>

	<div id = "slnumber">5</div>

	<div id = "sladd">+</div>

	</div>

	</div>

	<div id = "outer" >

	<div id = "inner">

	<div id = "innner1">

	</div>

	<div id = "innner2">

	</div>

	<div id = "status">

	test

	</div>

	<div id = "time">

	test

	</div>

	</div>

	</div>

  </body>

</html>

...全文

159 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

MMMMMMaki 2016-08-29

打赏
举报

你要把s_i定义在外面，不能定义在click函数里。 settimeout是隔多少时间执行函数，setinterval是每隔多少时间执行函数，循环执行的，建议使用setinterval $("#outer").click(function(event) { if (clock.running == "no") { //设定时钟状态 clock.running = "yes"; console.log(clock.running); s_i = setInterval(function() { if (clock.running == "yes") { var sta = clock.status; var t = clock[sta].time(); var g = clock[sta].go var rest = t - g; if (rest == 0 && sta == "session") { clock[sta].go = 0; clock.status = "break"; clock[sta].go++; show_status(); show_time(); show_percentage(); } else if (rest == 0 && sta == "break") { clock[sta].go = 0; clock.status = "session"; clock[sta].go++; show_status(); show_time(); show_percentage(); } else { //go增加 clock[sta].go++; show_status(); show_time(); show_percentage(); } } }, 1000); } else if (clock.running == "yes") { clock.running = "no"; console.log(clock.running); clearInterval(s_i); } console.log(s_i); }); 可以这样写，s_i也是定义在外面

全球第二大软件公司Oracle日前发布了最新标准的Java版本，命名为Java Standard Edition 8，也就是所谓的 java8，今天给广大程序猿们推荐原汁原味的配套帮助文档，纯英文版，避免翻译过程中一些语义的变更，希望有用。