炫酷数字查找-杨标的博客

炫酷数字查找

时间：2019年8月31日
类型：js练习
人员：魏欣怡

本案例素材联系“魏欣怡”或下载

效果图

案例说明

查找出为质数的数字，并且这个质数会产生随机的颜色，点击页面时会暂停查找，再次点击会开始查找

第一步：实现布局效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            background: #172f38;
            color: #d7dbdd;
            padding: 20px;
            font-size: 12px;
            cursor: pointer;
            
        }

        .container span {
            float: left;
            min-width: 2em;
            margin-right: .5em;
        }

        .center {
            position: fixed;
            left: 50%;
            color: rgba(255, 255, 255, .65);
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 8em;
            font-weight: bold;
            transition: all 1s ease-in, opacity 0.7s ease-in 0.3s;
        }
    </style>
</head>

<body>
    <div class="container">

    </div>
    <div class="center" id="centerNum">

    </div>
    <script src="script/index.js"></script>
    <script>
        //查找质数
        beginFind(function(n) {
            if (n < 2) {
                return false;
            }
            for (var i = 2; i < n - 1; i++) {
                if (n % i === 0) {
                    return false;
                }
            }
            return true;
        })
    </script>
</body>

</html>

第二步:完成js效果

/**
 * 开始查找
 * @param {Function} findSpector 是否满足条件的回调函数
 */
function beginFind(findSpector) {
    var num = 1;
    //把颜色放到一个数组里，根据索引方便产生随机颜色
    var colors = ["#f26395", "#62efab", "#ef7658", "#ffe868", "#80e3f7", "#d781f9"];
    var container = document.querySelector(".container");
    var centerNum = document.getElementById("centerNum");
    var duration = 50;
    var timer = setInterval(handleOne, duration);
     //点击页面达到暂停或开始的效果
    document.documentElement.onclick = function(){
        //判断当我点击时这个timer有没有运行，如果有就将它暂停,反之继续
        if(timer){
            clearInterval(timer);
            timer = null;
        }
        else{
            timer = setInterval(handleOne, duration);
        }
    }
/**
 * @name handleOne
 * @description 创建产生出来的数字，并添加到container里面
 */
    function handleOne() {
        var span = document.createElement("span");
        span.innerHTML = num;
        centerNum.innerHTML = num;
        container.appendChild(span);
        //判断这个数是不是符合要求，如果符合就行进一下操作
        if (findSpector(num)) {
            var color = colors[getRandom(0, colors.length)];
            span.style.color = color;
             //模板字符串比普通字符串的拼接更加方便,注意是tab键上面的(`)
            span.style.textShadow = `0 0 3px ${color}`;
            //产生逐渐消失的div
            createValishDiv(color);
        }
        num++;
    }
    /**
     * 
     * @param {string} color
     * @name createValishDiv
     * @description 将产生出来的div remove 
     */
    function createValishDiv(color) {
        var div = document.createElement("div");
        div.style.color = color;
        div.className = "center";
        div.innerHTML = num;
        document.body.appendChild(div);
        //可以看出它消失的坐标是随机的，并且还逐渐逐渐隐藏
        setTimeout(function(){
            div.style.opacity = 0;
            var x = getRandom(-300, 300);
            var y = getRandom(-300, 300);
            //模板字符串比普通字符串的拼接更加方便注意是tab键上面的(`)
            div.style.transform = `translate(${x}px, ${y}px)`;
        }, 30);
        //监听事件结束transitioned，结束就remove
        div.addEventListener("transitionend", function(){
            this.remove();
        })
    }
     /**
      * @description 产生随机数的方法
      */
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }
}

运用知识点

css3的渐变
回调函数
定时器
随机数

目录CONTENT

炫酷数字查找

炫酷数字查找

效果图

案例说明

运用知识点

评论区