记录一下学习 web 前端写的一些练习

tips

• 获取输入框指值，使用value而不是innerHTML

• 获取表单元素：

      <form action="" name="form01">
      name:
      <input type="text" name="username" id="username" />
      <input type="submit" onclick="isempty()" />
      </form>

      let isempty = () => {
  
          let input = document.forms['form01']['username'].value
          if (input == '') {
          alert('姓名不能为空')
          }
      }

problem and solution

• 需求，按下按钮后，小方块移动，直到大方块右下角停止

  let move = () => {
      let pos = 0
      let x = document.getElementById('small')
      let y = document.getElementById('small')
      let step = () => {
        pos = pos + 50
        x.style.left = pos + 'px'
        y.style.top = pos + 'px'
        console.log(`pos=${pos},id=${id}`)
      }
      let id = setInterval(step, 1000)
      let ans = 0
      if (pos === 350) {
        ans++
        clearInterval(id)
      }
      console.log('ans=' + ans)
    }

  问题： 小方块能移动，但是没有在大方块的右下角停止
  原因：

  • 异步函数setInterval异步执行函数step，在move函数主线程执行完同步任务之后执行
  • 对pos的if判断在move中同步执行。即，在setInterval执行之前执行
  • 在后续执行step时，对pos的if判断不会再执行。即，对pos的if判断只在最开始执行了一次

  解决： 将对pos的if判断放在step中

      let move = () => {
      let pos = 0
      let x = document.getElementById('small')
  
      let step = () => {
        if (pos === 350) {
          clearInterval(id)
        } else {
          pos++
          x.style.left = pos + 'px'
          x.style.top = pos + 'px'
        }
      }
  
      let id = setInterval(step, 5)
    }

• 问题： 点击按钮时，没有输出对应的value值

  <button name="course" value="2" onclick="showCourse(this)">第2门课</button>
  
  let showCourse = (input) => {
    console.log(input.value)
    console.log('进入了')
  }

  原因： 不是没输出，而是输出了但页面被刷新，导致我没看见输出。
  HTML 中button默认情况下会提交表单，导致页面刷新 解决： 显式声明button类型：type='button'

• 回调不等于异步(暂时还没搞清楚，之后再说)

• ...args和...arguments，在js-practice10.html中（之后再说）