初试-js的触底反弹（练习）

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

body
调速：

js：
// 获取元素
var oBox = document.getElementById(“box”);
var oV=document.getElementById(“num”);
var x = 0,y = 0;
var on=true;
var on2=true;
var v1=0;
oV.οnchange=function(){
v1=Number(this.value)
}
setInterval(function () {
// 水平
if(on){
x+=v1;
if(x>=innerWidth-200){
on=!on;
}
}else{
x-=v1;
if(x<=0){
on=!on;
}
}
// 垂直
if(on2){
y++;
if(y>=innerHeight-200){
on2=!on2;
}
}else{
y–;
if(y<=0){
on2=!on2;
}
}
oBox.style.left = x + “px”;
oBox.style.top = y + “px”;
}, 1)