用js做一个方块 在网页窗口运动 遇到边角反弹
//css代码
| <style> | |
| div{ | |
| width: 100px; | |
| height: 100px; | |
| background-color: brown; | |
| position: absolute; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button>移动</button> | |
| <div style="top: 30px;left:8px"></div> | |
| <script> | |
| let btn = document.getElementsByTagName("button")[0];//获取按钮 | |
| let div = document.getElementsByTagName("div")[0];//获取移动的div | |
| let switchDirX = 'on', switchDirY = 'on';//设置两个标识来跟踪x，y轴的运动情况 | |
| let move = function(){ | |
| let divLeft = parseInt(div.style.left);//将获取到的left值取整。去除后面的px单位 | |
| let divTop = parseInt(div.style.top);//将获取到的top值取整，去除后面的px单位 | |
| //x轴运动 | |
| if(divLeft<innerWidth - 100 && switchDirX === 'on'){ | |
| div.style.left = divLeft + 1 + "px"; | |
| } | |
| else if(divLeft === innerWidth - 100 || switchDirX === 'off'){ | |
| switchDirX = 'off'; | |
| div.style.left = divLeft - 1 + "px"; | |
| if(divLeft === 0){ | |
| switchDirX = 'on'; | |
| } | |
| } | |
| //y轴运动 | |
| if(divTop<innerHeight - 100 && switchDirY === 'on'){ | |
| div.style.top = divTop + 1 + "px"; | |
| } | |
| else if(divTop === innerHeight - 100 || switchDirY === 'off'){ | |
| switchDirY = 'off'; | |
| div.style.top = divTop - 1 + "px"; | |
| if(divTop === 0){ | |
| switchDirY = 'on' | |
| } | |
| } | |
| } | |
| btn.onclick = function(){ | |
| if (btn.innerHTML === "移动"){ | |
| btn.innerHTML = "暂停"; | |
| stopTimer = setInterval(move,0.00000000001); | |
| } | |
| else{ | |
| btn.innerHTML = "移动"; | |
| clearInterval(stopTimer); | |
| } | |
| } | |
| </script> |
