最简单的利用原生js模拟电视机屏保效果

调速：<inputtype="number"name=""id="num"><divid="box"></div>

* {
        margin: 0;
        padding: 0;
    }
    #box {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        top: 0;
        left: 0;
    }

// 获取元素
    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.onchange=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;}}//if(x>=innerWidth-200) {
        //     // 超出水平方向范围
        //     x--;
        // }else{
        //      x++;
        // }
        // if(y>=innerHeight-200){
        //     //超出垂直方向范围
        //     y--;
        // }else{
        //     y++;
        // }
        oBox.style.left = x + "px";
        oBox.style.top = y + "px";
    }, 1)