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

朴灿烈づ我的快乐病毒、 2023-02-14 01:17 1阅读 0赞

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

小的时候记得家里刚用彩色电视机时，看电视还要用天线，当天线信号不好时，电视屏幕就会进入到屏保状态，有一串文字在屏幕内“撞来撞去”。下面我们来讲一下如何实现下图这个效果：

![在这里插入图片描述][20200530014415138.gif_pic_center]

**HTML代码：**

调速：<input type="number" name="" id="num">
        <div id="box"></div>

**CSS代码：**

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

**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.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)

**注意：** 其实实现屏保效果很简单，需要注意的是怎样编辑临界条件，怎样确定当前的方块应该向哪个方向移动。

\*\*视频讲解链接：  
https://www.bilibili.com/video/BV195411s7aT/  
\*\*

[20200530014415138.gif_pic_center]: https://img-blog.csdnimg.cn/20200530014415138.gif#pic_center