关于js 匀速运动
<!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>
<!-- <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
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 进去
kogawananari 发表于 2020-9-18 16:15
var odiv = document.getElementsByTagName("div")
odiv的类型是HTMLCollection类数组
那该怎么改呢？ 我要让currentleft = div的left值 良木 发表于 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 = isNaN(Number.parseFloat(eleStart)) ? 0 : Number.parseFloat(eleStart)
changeValue = Number.parseFloat(data) - startValue
}
run()
function run() {
var nowTime = new Date() - startTime
var t1 = nowTime / time
for (var key in changeValue) {
var val = t1 * changeValue + startValue
ele.style = 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> 原因是 getComputedStyle() 方法需要传入一个 DOM 元素作为参数,你传入的 odiv 是 DOM 元素集合,不是单个元素。
可以这样修改:
var odiv = document.getElementsByTagName("div");
// 传入具体的 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() 就可以了。
页:
[1]