原生JS实现桌面弹出数字，并在屏幕中央显示，并遇到偶数时从屏幕中央移出且消失

需要屏幕上输出一个范围的数字，并同时实现数字出现在屏幕中央的思路
首先在页面动态的创建一个标签用于输出数字，至于屏幕中央的数字在html中设一个div，使用定位居中

当遇到偶数时，需要将数字从屏幕中央移出且消失的思路
当遇到偶数时，我们动态创建一个div，使它的位置与原来在中央的div的位置与大小一样，然后将偶数值再赋值给div,同样的颜色必须保持与原来的屏幕中的颜色一致

关于移动时注意的问题
首先我们需要动态求出div移动的距离，然后在设置div移动的步长使其移动，当div超过所求的距离时，就停止移动，同时删除这个div，

在移动过程中需要注意的点
1 因为移动到消失这样子会很突然，所以设置一个透明度让其慢慢的变透明，直至消失，这样子才自然些
2 在移动的时候方向不同，所以我们需要分明讨论左上、左下、右上、右下这几个方向，但同时里面会有一些相同的操作，所以封装一个函数，否则代码会过于冗余，但是我封装函数之后还是有些冗余，所以以前在想办法变得简单些

最后当数字结束之后需要将中央的div隐藏

效果显示（视频加载有点慢哦）

数字飘移

代码区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态数字显示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: violet;
        }
        .box{
            width: 100%;
            height: 100%;
        }
        .center,.change{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            padding: 10px;
            min-width: 50px;
            min-height: 60px;
            text-align: center;
            line-height: 60px;
            font-weight: 700;
            background-color: rgba(0,0,0,.1);
            border-radius: 10px;
            font-size: 80px;
        }
       
        .text{
            display: inline-block;
            margin: 5px;
            padding: 0;
            min-width: 40px;
            min-height: 30px;
            text-align: center;
            line-height: 50px;
            font-size: 26px;
        }
    </style>
</head>
<body>
    <div class="center"></div>
    <script>
        var div = document.querySelectorAll('div')[0];
        var change = document.querySelector('.change');
        // 获取窗口的高度
        var docHeight = document.documentElement.clientHeight||document.body.clientHeight;
        console.log(docHeight)
        // 设置一个移动的距离
        var step = [-100,-110,-120,-130,-140,-150,160,-170,-180,100,110,120,130,140,150,160,170,180];

        // 设置一个变量，用来输出数字
        var index = 1;
        // color 用来获取颜色
        var color;
        // 动态的添加元素,
        // 需要封装一个函数，并设置一个形参，这时就可以输出形参以内的所有数
        function createDiv(num){
            var timer = setInterval(function(){
                // 创建div元素，设置其样式,
                var span = document.createElement('span');
                span.className = 'text';
                // 设置div的文本值
                span.innerText = index;
                // 数字改变颜色，
                color = getColor();
                span.style.color = color;
                // 同时将数字出添加到中间去
                div.innerText = index;
                div.style.color = color;
                
                // 当遇到偶数中，实现飘移
                if(index % 2 == 0){
                    var newDiv = document.createElement('div');
                    newDiv.className = 'change';
                     // 给change里面添加数字及颜色并将其添加到document中
                    newDiv.innerText = index;
                    newDiv.style.color = color;
                    document.body.appendChild(newDiv);
                    move(newDiv);
                }                    
                // 添加到屏幕中
                document.body.appendChild(span);
                index++;
              if(index > num){
                    clearInterval(timer);
                    div.style.display = 'none';
                };
                 
            },100);
        }
       createDiv(300);
       
        // 获取随机颜色
        function getColor(){
            var r = Math.floor(Math.random() *　(255));
            var g = Math.floor(Math.random() *　(255));
            var b = Math.floor(Math.random() *　(255));
            return 'rgba('+r+','+g+','+b+')';
        }

        // 当数字为偶数时，实现飘移
        // 设置一个div，其位置与原本在中央的div一样
        // 当飘移的时候。设置移动的步长，因为会向四个方向移动，所以需要分别判断，
        // 因为会一些操作重复，所以会封装一个函数
        function move(obj){
            // 设置移动的的距离
            var x = step[Math.floor(Math.random() *　step .length)];
            var y = step[Math.floor(Math.random() *　step .length)];

            // var y = step[Math.floor(Math.random() *　step .length)];
            // 获取盒子当前可以移动的最大距离，
            var width = obj.offsetLeft + x;
            var height = obj.offsetTop  + y;
            // 设置透明度
            obj.style.opacity = 1;
            // 判断右下方向
            if(x > 0 && y > 0){
                obj.timer = setInterval(function(){
                    var num = 1;
                    common(obj,width,height,num);
                },50);
            }
           
            // 判断右上方向
            if(x > 0 && y < 0){
                obj.timer = setInterval(function(){
                    var num = 2;
                    common(obj,width,height,num);
                },50);
            }
            // 判断左上
            if(x < 0 && y < 0){
                obj.timer = setInterval(function(){
                    var num = 3;
                    common(obj,width,height,num);
                },50);
            }
            // 判断左下
            if(x < 0 && y > 0){
                obj.timer = setInterval(function(){
                    var num = 4;
                    common(obj,width,height,num);
                },50);
            }
        }

        function common(obj,width,height,num){
            // x > 0 y > 0
            // newstep代表移动的步长
            var newstep = 3;
            if(num == 1){
                // 如果当前移动的距离超过了最大的移动范围，则停止移动，并将其元素从document文档中删除
                if(obj.offsetLeft >= width  && obj.offsetTop >=height)
                    remove(obj);  
                else{
                    obj.style.left = obj.offsetLeft + newstep + 'px';
                    obj.style.top = obj.offsetTop + newstep + 'px';
                    if(obj.offsetLeft % 20 == 0)
                        obj.style.opacity -= 0.1;
                }
            }
           
            // x > 0 y < 0
            if(num == 2){
                if(obj.offsetLeft >= width  && obj.offsetTop <= height)
                    remove(obj);  
                else{
                    obj.style.left = obj.offsetLeft + newstep + 'px';
                    obj.style.top = obj.offsetTop - newstep + 'px';
                    if(obj.offsetLeft % 20 == 0)
                        obj.style.opacity -= 0.1;
                }
            }

            // x < 0 && y < 0
             if(num == 3){
                if(obj.offsetLeft <= width  && obj.offsetTop <= height)
                    remove(obj);
                else{
                    obj.style.left = obj.offsetLeft - newstep + 'px';
                    obj.style.top = obj.offsetTop - newstep + 'px';
                    if(obj.offsetLeft % 20 == 0)
                        obj.style.opacity -= 0.1;       
                } 
            }

            // x<0 y>0
            if(num == 4){
                if(obj.offsetLeft <= width  && obj.offsetTop >=height)
                    remove(obj);
                else{
                    obj.style.left = obj.offsetLeft - newstep + 'px';
                    obj.style.top = obj.offsetTop + newstep + 'px';
                    if(obj.offsetLeft % 20 == 0)
                        obj.style.opacity -= 0.1;
                }  
            }
       }


        // 移除操作与透明度设置的函数封装
        function remove(obj){
            obj.style.opacity = 0;
            clearInterval(obj.timer);
            document.body.removeChild(obj);
        }

        
        
    </script>
</body>
</html>

杜沫

发布了12 篇原创文章 · 获赞 27 · 访问量 784

私信关注

原生JS实现桌面弹出数字，并在屏幕中央显示，并遇到偶数时从屏幕中央移出且消失

猜你喜欢