目 录CONTENT

文章目录

炫酷数字查找

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 10866 阅读 / 4694 字

炫酷数字查找

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

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


效果图

image.png

案例说明

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

第一步:实现布局效果

<!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);
    }
}

运用知识点

  1. css3的渐变
  2. 回调函数
  3. 定时器
  4. 随机数

0

评论区