用js做一个方块 在网页窗口运动 遇到边角反弹
Posted gao2
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用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> |
以上是关于用js做一个方块 在网页窗口运动 遇到边角反弹的主要内容，如果未能解决你的问题，请参考以下文章