zoukankan      html  css  js  c++  java
  • 用js做一个方块 在网页窗口运动 遇到边角反弹

    //css代码

    <style>
      div{
      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>
  • 相关阅读:
    spring中的Filter使用
    跨站脚本(XSS)攻击
    RepeatSubmitInterceptor extends HandlerInterceptorAdapter
    理解TCP
    Github(第一次尝试)
    MVC(实战二:网址映射)
    MVC(实战一)
    MVC(基础二)
    WinFrom和WebFrom的区别
    MVC(基础一)
  • 原文地址:https://www.cnblogs.com/gao2/p/11427629.html
Copyright © 2011-2022 走看看