求大神帮忙改下js 弄成循环效果

qingwadaxia_1 2017-11-28 05:09:19
<!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:200px;
position:absolute;
bottom:0;
right:0;
white-space:nowrap;
overflow:hidden;
display:none;
}
</style>
<body style="height:2000px;">

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


<script type="text/javascript">
var cc = document.getElementById("cc");
var ys = window.getComputedStyle?window.getComputedStyle(cc,""):cc.currentStyle;
var hqc = parseInt(ys.width);　　
var hqg = parseInt(ys.height);
var sc = document.documentElement.clientWidth;
var sg = document.documentElement.clientHeight;
var jsr = Math.ceil((sc - hqc)/2);
var jsx = Math.ceil((sg - hqg)/2);
var ys = 5;
var yd = ys * jsx / jsr ;
var time = null;
var bottom = 0;
var right = 0;

setTimeout(function(){
cc.style.display = "block";
time = setInterval(function zzz(){
right += ys;
bottom += yd;
cc.style.right = right + "px";
cc.style.bottom = bottom + "px";
if(right>=jsr){
clearInterval(time);
cc.onclick=function(){
ys = -ys;
yd = -yd;
setTimeout(function(){
time = setInterval(zzz,10);
},0)
}
}
if(right == 0 || bottom == 0){
clearInterval(time);
cc.style.right = 0;
cc.style.bottom = 0;
cc.style.display = "none";
}
},10);
},3000);
</script>



</body>
</html>

这个js 是一个3秒后， div斜向移动到网页正中间的效果， 点击div的时候， 再斜向退回去，然后消失， 我现在的需求是两种：

一种是：想把它改成斜向消失6秒之后 ，又会再次斜向出现在正中间，点击div之后，又会斜向消失，然后6秒又出现，一直循环

第二种是： 斜向出现在正中间之后，不需要点击， 等2秒， 又斜向消失， 然后6秒之后 又斜向出现，2秒后又斜向消失，一直自动循环
...全文
155 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
qingwadaxia_1 2017-11-28
  • 打赏
  • 举报
 回复
引用 2 楼 jslang 的回复:
第二种 

<!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:200px;
		 position:absolute;
		 bottom:0;
		 right:0;
		 white-space:nowrap;
		 overflow:hidden;
		 display:none;
     }
 </style>
 <body style="height:2000px;">

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


<script type="text/javascript">
	var cc = document.getElementById("cc");
	var ys = window.getComputedStyle?window.getComputedStyle(cc,""):cc.currentStyle;
	var hqc = parseInt(ys.width);　　
	var hqg = parseInt(ys.height);
	var sc = document.documentElement.clientWidth;
	var sg = document.documentElement.clientHeight;
	var jsr = Math.ceil((sc - hqc)/2);
	var jsx = Math.ceil((sg - hqg)/2);
	var ys = 5;
	var yd = ys * jsx / jsr ;
	var time = null;
	var bottom = 0;
	var right = 0;

		setTimeout(function aaa(){
			cc.style.display = "block";
			time = setInterval(function zzz(){
				right += ys;
				bottom += yd;
				cc.style.right = right + "px";
				cc.style.bottom = bottom + "px";
				if(right>=jsr){
					clearInterval(time);
					setTimeout(function(){
						ys = -ys;
						yd = -yd;
						time = setInterval(zzz,10);
					},2000)
				}
				if(right == 0 || bottom == 0){
					clearInterval(time);
					cc.style.right = 0;
					cc.style.bottom = 0;
					cc.style.display = "none";
					ys = -ys;
					yd = -yd;
					setTimeout(aaa, 6000);
				}
			},10);
		},3000);
</script>



 </body>
</html>
真大神，谢谢您了!!
天际的海浪 2017-11-28
  • 打赏
  • 举报
 回复
第二种 

<!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:200px;
		 position:absolute;
		 bottom:0;
		 right:0;
		 white-space:nowrap;
		 overflow:hidden;
		 display:none;
     }
 </style>
 <body style="height:2000px;">

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


<script type="text/javascript">
	var cc = document.getElementById("cc");
	var ys = window.getComputedStyle?window.getComputedStyle(cc,""):cc.currentStyle;
	var hqc = parseInt(ys.width);　　
	var hqg = parseInt(ys.height);
	var sc = document.documentElement.clientWidth;
	var sg = document.documentElement.clientHeight;
	var jsr = Math.ceil((sc - hqc)/2);
	var jsx = Math.ceil((sg - hqg)/2);
	var ys = 5;
	var yd = ys * jsx / jsr ;
	var time = null;
	var bottom = 0;
	var right = 0;

		setTimeout(function aaa(){
			cc.style.display = "block";
			time = setInterval(function zzz(){
				right += ys;
				bottom += yd;
				cc.style.right = right + "px";
				cc.style.bottom = bottom + "px";
				if(right>=jsr){
					clearInterval(time);
					setTimeout(function(){
						ys = -ys;
						yd = -yd;
						time = setInterval(zzz,10);
					},2000)
				}
				if(right == 0 || bottom == 0){
					clearInterval(time);
					cc.style.right = 0;
					cc.style.bottom = 0;
					cc.style.display = "none";
					ys = -ys;
					yd = -yd;
					setTimeout(aaa, 6000);
				}
			},10);
		},3000);
</script>



 </body>
</html>
天际的海浪 2017-11-28
  • 打赏
  • 举报
 回复
第一种 

<!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:200px;
		 position:absolute;
		 bottom:0;
		 right:0;
		 white-space:nowrap;
		 overflow:hidden;
		 display:none;
     }
 </style>
 <body style="height:2000px;">

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


<script type="text/javascript">
	var cc = document.getElementById("cc");
	var ys = window.getComputedStyle?window.getComputedStyle(cc,""):cc.currentStyle;
	var hqc = parseInt(ys.width);　　
	var hqg = parseInt(ys.height);
	var sc = document.documentElement.clientWidth;
	var sg = document.documentElement.clientHeight;
	var jsr = Math.ceil((sc - hqc)/2);
	var jsx = Math.ceil((sg - hqg)/2);
	var ys = 5;
	var yd = ys * jsx / jsr ;
	var time = null;
	var bottom = 0;
	var right = 0;

		setTimeout(function aaa(){
			cc.style.display = "block";
			time = setInterval(function zzz(){
				right += ys;
				bottom += yd;
				cc.style.right = right + "px";
				cc.style.bottom = bottom + "px";
				if(right>=jsr){
					clearInterval(time);
					cc.onclick=function(){
						ys = -ys;
						yd = -yd;
						setTimeout(function(){
							time = setInterval(zzz,10);
						},0)
					}
				}
				if(right == 0 || bottom == 0){
					clearInterval(time);
					cc.style.right = 0;
					cc.style.bottom = 0;
					cc.style.display = "none";
					ys = -ys;
					yd = -yd;
					setTimeout(aaa, 6000);
				}
			},10);
		},3000);
</script>



 </body>
</html>
js中的for循环如何跳出,js中for循环的两种语法
具体来说，i=0：j依次遍历0,1,2,3,4,5,6,7，程序比较num[0]和num[0-7]，只要发现num[0]比某一个数大，就把num[0]和此数交换这样一来当i=0的时候，j走了一圈后的结果就是把数组的第一个数，也就是num[0]弄成了整个数组中最小的数（也就是3）接下来i=1;所不同的是，它不是退出一个循环，而是开始循环的一次新迭代。return语句只能出现在函数体内，出现在代码中的其他任何地方都会造成语法错误，当执行return语句时，即使函数主体中还有其他语句，函数执行也会停止。
html js设置颜色渐变效果,Javascript 颜色渐变效果的实现代码
下面就是博主的一些思路和解决办法，如果对此没兴趣，想直接使用jquery插件的同学，可以点这里思路每一种颜色由RGB组成，每两位为一个16进制数当前颜色代码和目标颜色代码，转换成10进制数后，是有差值的，利用差值，设定总执行次数的步长，计算每一步变更颜色的10进制数利用定时器执行简单的讲，就是将6位颜色代码以每两位转换为10进制数，然后计算两对RGB值的差，根据设定的步长(执行次数)，计算每一步需...
JS 循环给li绑定参数不同的点击事
以下内容纯属个人理解，不正确的地方还请大神留言，不胜感激！ 源代码：（按个人方式选用一种即可） <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script...
彻底搞懂JavaScript单线程异步执行机制
带你彻底搞懂JavaScript单线程异步执行机制关于JavaScriptajax 关于JavaScript JavaScript是一门单线程语言 一切JavaScript中说的多线程都是纸老虎 本质都是用单线程模拟出来的 本文的目的就是彻底弄懂JavaScript的事件循环的执行机制。 首先，不论你是面试求职，还是日常的开发工作，给定的几行代码，我们需要准确的知道代码执行输出的结果，也就是代码执行的顺序。因为JavaScript是单线程语言，所以它的语句都是顺序执行的，也就是同步任务。但是，如果加载一个包
python死循环会报错吗_python怎么死循环
虽然我不是Python高手，但我是零基础，之前会的都是软件PS，PPT之类。点击链接加入群【我爱python大神】：https://jq.qq.com/?_wv=1027&k=47zuLPd如果目的是想成为程序员，参考教学大纲。如果只是学程序，理解科技，解决工作问题，我的方式可以参考使用：1，找到合适的入门书籍，大致读一次，循环啊判断啊，常用类啊，搞懂（太难的跳过）2，做些简单习题，字符串比较，读...
JavaScript

87,994

社区成员

224,689

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章