[已解决]关于js 匀速运动

良木 · 发表于 2020-9-18 15:20:53

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
   * {
      margin: 0;
      padding: 0;
   }
   div {
      width: 100px;
      height: 100px;
      background: black;
      position: absolute;
   }
   /* div:nth-of-type(2) {
      width: 150px;
      height: 150px;
      background: black;
      position: absolute;
      right: 0;
   } */
</style>
<script type="text/javascript">
   // 匀速运动
   window.onload = function () {
      var odiv = document.getElementsByTagName("div");
      var speedX = 3;
      var speedY = 3;
      function move() {
      var currentleft = parseInt(window.getComputedStyle(odiv).left);
      var currenttop = parseInt(window.getComputedStyle(odiv).top);
      odiv.style.left = currentleft + speedX + "px";
      }
      setInterval(function () {
      move();
      }, 20);
   };
</script>
  </head>
  <body>
<div></div>

  </body>
</html>
代码如上为什么用谷歌浏览器function move() {
      var currentleft = parseInt(window.getComputedStyle(odiv).left);
      var currenttop = parseInt(window.getComputedStyle(odiv).top);
      odiv.style.left = currentleft + speedX + "px";
      }会报错
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at move (匀速加碰撞检测.html:41)
at 匀速加碰撞检测.html:46

最佳答案

月排行榜 / 总排行榜

不二如是

2023-7-21 08:33:29

原因是 getComputedStyle() 方法需要传入一个 DOM 元素作为参数,你传入的 odiv 是 DOM 元素集合,不是单个元素。

可以这样修改:

var odiv = document.getElementsByTagName("div")[0];
// 传入具体的 DIV 元素
function move() {
var currentleft = parseInt(window.getComputedStyle(odiv).left);
var currenttop = parseInt(window.getComputedStyle(odiv).top);
odiv.style.left = currentleft + speedX + "px";
}

复制代码

getComputedStyle() 需要一个具体的 DOM 元素作为参数,你传入的 odiv 通过 getElementsByTagName 获取的是一组 DOM 元素,不是单个元素,所以会报错。

指定获取第一个 DIV 元素传递给 getComputedStyle() 就可以了。

跳转到最佳答案楼层

kogawananari · 发表于 2020-9-18 16:15:48

var odiv = document.getElementsByTagName("div")
odiv的类型是HTMLCollection类数组

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

说的是参数1必须是一个Element类型

所以你应该传如 odiv[0] 进去

良木 · 发表于 2020-9-18 17:03:53

kogawananari 发表于 2020-9-18 16:15
var odiv = document.getElementsByTagName("div")
odiv的类型是HTMLCollection类数组

那该怎么改呢？我要让currentleft = div的left值

kogawananari · 发表于 2020-9-18 17:50:04

良木发表于 2020-9-18 17:03
那该怎么改呢？我要让currentleft = div的left值

emmm 这个写起来蛮费脑子的我复制一段我以前写过的吧

<style>
.box {
width: 100px;
height: 200px;
background-color: red;
position: absolute;
}
</style>
<script>
function getStyle(ele) {
return ele.currentStyle || getComputedStyle(ele)
}
//简单的解决兼容问题
window.requestAnimationFrame = window.requestAnimationFrame || function (cb) { return setTimeout(cb, 1000 / 60) }
window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout
function animation(ele, data = {}, time = 500, cb) {
/*
* ele => 已获取的HTML标签对象
* data => 需要改变的样式:目标数值可以带单位
* time => 改变样式所需要的总时间单位是毫秒
* 例如 : animation(box,{width:'1000px',height:'1000px'},5000)
*/
var startValue = {}
var changeValue = {}
var startTime = new Date()
var eleStart = getStyle(ele)
for (var key in data) {
startValue[key] = isNaN(Number.parseFloat(eleStart[key])) ? 0 : Number.parseFloat(eleStart[key])
changeValue[key] = Number.parseFloat(data[key]) - startValue[key]
}
run()
function run() {
var nowTime = new Date() - startTime
var t1 = nowTime / time
for (var key in changeValue) {
var val = t1 * changeValue[key] + startValue[key]
ele.style[key] = val + 'px'
}
if (t1 >= 1) {
cancelAnimationFrame(run)
cb && cb()
} else {
requestAnimationFrame(run)
}
}
}
</script>
<div id="box1" class="box"></div>
<script>
function run1() {
animation(box1, { marginLeft: '300px' }, 2000, run2)
}
function run2() {
animation(box1, { marginLeft: '0px' }, 2000, run1)
}
run1()
</script>

复制代码

不二如是 · 发表于 2023-7-21 08:33:29

原因是 getComputedStyle() 方法需要传入一个 DOM 元素作为参数,你传入的 odiv 是 DOM 元素集合,不是单个元素。

可以这样修改:

var odiv = document.getElementsByTagName("div")[0];
// 传入具体的 DIV 元素
function move() {
var currentleft = parseInt(window.getComputedStyle(odiv).left);
var currenttop = parseInt(window.getComputedStyle(odiv).top);
odiv.style.left = currentleft + speedX + "px";
}

复制代码

getComputedStyle() 需要一个具体的 DOM 元素作为参数,你传入的 odiv 通过 getElementsByTagName 获取的是一组 DOM 元素,不是单个元素,所以会报错。

指定获取第一个 DIV 元素传递给 getComputedStyle() 就可以了。

账号		自动登录	找回密码
密码			立即注册

[已解决]关于js 匀速运动

马上注册，结交更多好友，享用更多功能^_^

回帖奖励 +1 鱼币