码迷,mamicode.com
首页 > Web开发 > 详细

用js做一个方块 在网页窗口运动 遇到边角反弹

时间:2019-08-29 09:52:12      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:attribute   ble   value   ||   attr   htm   number   get   ===   

//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做一个方块 在网页窗口运动 遇到边角反弹

标签:attribute   ble   value   ||   attr   htm   number   get   ===   

原文地址:https://www.cnblogs.com/gao2/p/11427629.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!