一个js清楚定时器的问题求大神解答

qingwadaxia_1 2017-12-06 04:55:59

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>

<meta content="yes" name="apple-mobile-web-app-capable">

</head>
<style type="text/css">
*{padding:0;margin:0;}
#cc{
background:#ccc;
width:200px;
height:260px;
position:absolute;
bottom:0;
right:0;
white-space:nowrap;
overflow:hidden;

}
</style>
<body style="height:2000px;">

<div id="cc">111</div>

<script type="text/javascript">
var cc = document.getElementById("cc");
var hqys = window.getComputedStyle ? window.getComputedStyle(cc,"") : cc.currentStyle;
var hqchang = parseInt(hqys.width);
var hqgao = parseInt(hqys.height);
var pmc = document.documentElement.clientWidth;
var pmg = document.documentElement.clientHeight;
var jzr = (pmc - hqchang) / 2;
var jzb = (pmg - hqgao) / 2;
var ydr = 6;
var ydd = ydr * jzb / jzr;
var bottom = null;
var right = null;
var time = null;

setTimeout(function zz(){

time = setInterval(function ccc(){

right += ydr;
bottom += ydd;
cc.style.bottom = bottom + "px";
cc.style.right = right +"px";
if(right >= jzr || bottom >= jzb){

clearInterval(time);
cc.onclick = function(){
clearInterval(time);

ydr = -ydr;
ydd = -ydd;
setTimeout(function(){
time = setInterval(ccc,30);
},30)

}

}

if(right<=0 || bottom <= 0){
clearInterval(time);
cc.style.opacity = 1;
setInterval(function bn(){

cc.style.opacity -= 0.1;

if(cc.style.opacity<=0){
cc.style.opacity = 0;
clearInterval(bn);
}

},80)
}
},30);

},30);

</script>

</body>
</html>

上面是一个div斜向移入和移出的效果，当div移入到正中间位置的时候，点击一下div 会斜向移出，但是如果在移出的过程中，再次点击div 又会移入不停的点击就会不停的反复拉扯，如何让div不受点击的影响，移出的时候，无论怎么点击都不会影响移出的过程

...全文

191 10 点赞打赏收藏举报

写回复

10 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

s1os5210 2017-12-07

大神能把代码发出来吗

打赏
举报

回复赞

zk_Kang 2017-12-07

引用 4 楼 qingwadaxia_1 的回复:

引用 3 楼 zhang_kang_user 的回复:
[quote=引用 2 楼 qingwadaxia_1 的回复:] [quote=引用 1 楼 qq_29594393 的回复:] 获取div 当前所在位置,根据div 相对于父元素的偏移量,看是移入还是移出, 如果是移出的话,点击就直接返回(不做任何操作)
s啥意思。。

就是加一个判断，判断当前div是不是在动画效果，，如果是那么就return；不是，就继续；[/quote]我感觉你没理解我的意思。[/quote] 想让人直接告诉你怎么判断？？还是什么？？

打赏
举报

回复赞

qingwadaxia_1 2017-12-07

引用 3 楼 zhang_kang_user 的回复:

引用 2 楼 qingwadaxia_1 的回复:
[quote=引用 1 楼 qq_29594393 的回复:] 获取div 当前所在位置,根据div 相对于父元素的偏移量,看是移入还是移出, 如果是移出的话,点击就直接返回(不做任何操作)
s啥意思。。

就是加一个判断，判断当前div是不是在动画效果，，如果是那么就return；不是，就继续；[/quote]我感觉你没理解我的意思。

打赏
举报

回复赞

zk_Kang 2017-12-07

引用 2 楼 qingwadaxia_1 的回复:

引用 1 楼 qq_29594393 的回复:
获取div 当前所在位置,根据div 相对于父元素的偏移量,看是移入还是移出, 如果是移出的话,点击就直接返回(不做任何操作)
s啥意思。。

就是加一个判断，判断当前div是不是在动画效果，，如果是那么就return；不是，就继续；

打赏
举报

回复赞

qingwadaxia_1 2017-12-07

错了不是清除浮动是清除定时器

打赏
举报

回复赞

qingwadaxia_1 2017-12-07

引用 8 楼 zhang_kang_user 的回复:

引用 7 楼 qingwadaxia_1 的回复:
[quote=引用 5 楼 zhang_kang_user 的回复:] [quote=引用 4 楼 qingwadaxia_1 的回复:] [quote=引用 3 楼 zhang_kang_user 的回复:] [quote=引用 2 楼 qingwadaxia_1 的回复:] [quote=引用 1 楼 qq_29594393 的回复:] 获取div 当前所在位置,根据div 相对于父元素的偏移量,看是移入还是移出, 如果是移出的话,点击就直接返回(不做任何操作)
s啥意思。。

就是加一个判断，判断当前div是不是在动画效果，，如果是那么就return；不是，就继续；[/quote]我感觉你没理解我的意思。[/quote] 想让人直接告诉你怎么判断？？还是什么？？[/quote]是div在中间之后，点击div 会斜向移动回去，在移动回去的过程中，再点div 它又会移到中间去，我希望在移动回去的过程中，无论怎么点div 都不会对它造成影响[/quote] 对啊，就这意思啊，就是再次点击的时候会判断div是否在动画效果啊，跟你说话好累，。。

[/quote]怎么改啊？不是清楚浮动吗。

打赏
举报

回复赞

zk_Kang 2017-12-07

引用 7 楼 qingwadaxia_1 的回复:

引用 5 楼 zhang_kang_user 的回复:
[quote=引用 4 楼 qingwadaxia_1 的回复:] [quote=引用 3 楼 zhang_kang_user 的回复:] [quote=引用 2 楼 qingwadaxia_1 的回复:] [quote=引用 1 楼 qq_29594393 的回复:] 获取div 当前所在位置,根据div 相对于父元素的偏移量,看是移入还是移出, 如果是移出的话,点击就直接返回(不做任何操作)
s啥意思。。

打赏
举报

回复赞

qingwadaxia_1 2017-12-07

引用 5 楼 zhang_kang_user 的回复:

引用 4 楼 qingwadaxia_1 的回复:
[quote=引用 3 楼 zhang_kang_user 的回复:] [quote=引用 2 楼 qingwadaxia_1 的回复:] [quote=引用 1 楼 qq_29594393 的回复:] 获取div 当前所在位置,根据div 相对于父元素的偏移量,看是移入还是移出, 如果是移出的话,点击就直接返回(不做任何操作)
s啥意思。。