首页 > 代码库 > js围绕屏幕转圈的方块
js围绕屏幕转圈的方块
点击运动按钮后，方块会挨着浏览器的边，从左到右，从上到下转一圈。
这个我居然写了几天，我也是不想说什么咯。
完成代码一：
<!--Author: XiaoWenCreate a file: 2016-12-11 15:49:21Last modified: 2016-12-11 22:07:09Start to work:Finish the work:Other information:--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js围绕屏幕转圈的方块</title> <style> body{ margin: 0; padding: 0; } input{ display: block; height:20px; } div{ width: 100px; height:100px; background:#000; } </style></head><body><input type="button" value="运动"><div></div><script> var ipt=document.getElementsByTagName("input")[0]; var div=document.getElementsByTagName("div")[0]; var scr_w=document.documentElement.clientWidth; var scr_h=document.documentElement.clientHeight; ipt.onclick=function(){ fn1("marginLeft",scr_w); }; function fn1(fx,size){ var i=0; var t1=setInterval(function(){ div.style[fx]=i+"px"; i++; if(i>size-100){ clearInterval(t1); fn2("marginTop",scr_h-20); } },10) } function fn2(fx,size){ var i=0; var t1=setInterval(function(){ div.style[fx]=i+"px"; i++; if(i>size-100){ clearInterval(t1); fn3("marginLeft",scr_w); } },10) } function fn3(fx,size){ var i=size-100; var t1=setInterval(function(){ div.style[fx]=i+"px"; i--; if(i<0){ clearInterval(t1); fn4("marginTop",scr_h); } },10) } function fn4(fx,size){ var i=size-100-20; var t1=setInterval(function(){ console.log(i,scr_h) div.style[fx]=i+"px"; i--; if(i<0){ clearInterval(t1); } },10) }</script></body></html>
完成代码二：
<!--Author: XiaoWenCreate a file: 2016-12-11 15:49:21Last modified: 2016-12-11 23:50:26Start to work:Finish the work:Other information:--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js围绕屏幕转圈的方块2</title> <style> body{ margin: 0; padding: 0; } input{ display: block; height:20px; } div{ width: 100px; height:100px; background:#000; } </style></head><body><input type="button" value="运动"><div></div><script> var ipt=document.getElementsByTagName("input")[0]; var div=document.getElementsByTagName("div")[0]; var scr_w=document.documentElement.clientWidth; var scr_h=document.documentElement.clientHeight; var map=0; var t1; ipt.onclick=function(){ clearInterval(t1) fn1(); }; function fn1(fx,size){ var i=0; t1=setInterval(function(){ if(map==0){ console.log(map) div.style.marginLeft=i+"px"; i++; if(i>scr_w-100){ map=1; i=0; }; }else if(map==1){ console.log(map) div.style.marginTop=i+"px"; i++; if(i>scr_h-100-20){ map=2; i=scr_w-100;; }; }else if(map==2){ console.log(map) div.style.marginLeft=i+"px"; i--; if(i<0){ map=3; i=scr_h-100-20; }; }else{ console.log(map) div.style.marginTop=i+"px"; i--; if(i<0){ map=0; i=0; }; } },10) }</script></body></html>
js围绕屏幕转圈的方块
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。