查找素数特效

html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="./index.css"/>
    </head>
    <body>
        <div id="litterNum" class="littleNum"></div>
        <div class="bigNum">
            <div id="number" class="number"></div>
        </div>
        <script src="./index.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

CSS代码：

* {
    margin: 0;
    padding: 0;
}
body {
    color: #fff;
    background-color: black;
}
.littleNum {
    padding: 20px;
    font-size: 22px;
    font-weight: 550;
    
}
.littleNum span {
    padding-left: 10px;
    display: inline-block;
}

.bigNum {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 150px;
    font-weight: 600;
}

.overlap {
    position: absolute;
    top: 0;
    transition: 1s ease-in;
}

JAVASCRIPT代码：

var num = 1;
var littleNum = document.getElementById('litterNum');
var number = document.getElementById('number')
var bignum = document.getElementsByClassName('bigNum')[0];
var timer = null;

// 生成一个数字
function createNum() {
    var span = document.createElement('span');
    span.innerText = num;
    //判断是否是素数
    if(isPrime(num)){
        //获取一个随机颜色
        var rancolor = randomColor();
        span.style.color = rancolor;
        var prime = document.createElement('div');
        prime.className = 'overlap';
        prime.innerText = num;
        prime.style.color = rancolor;
        bignum.appendChild(prime);
        getComputedStyle(prime).top;
        prime.style.transform = 'translate('+getRandom(-300, 300)+'px, '+getRandom(-300, 300)+'px)';
        prime.style.opacity = 0;
        prime.addEventListener('transitionend', function() {
            prime.remove();
        })
    }
    littleNum.appendChild(span);
    span.scrollIntoView();
    number.innerText = num;
    
    num ++;
}

//开始
start();
function start() {
    timer = setInterval(function() {
        createNum();
    }, 100)
}

//停止
function stop() {
    clearInterval(timer);
    timer = null;
}

//点击事件
window.onclick = function() {
    if(timer) {
        stop();
    }else {
        start();
    }
}

//生成一个 num1 到 num2 的随机数
function getRandom(num1, num2) {
    return Math.ceil(Math.random()* (num2 - num1) + num1);
}

//判断是否是素数
function isPrime(num) {
    if(num <= 1) {
        return false;
    }
    for(var i = 2; i < num; i ++ ) {
        if( num % i === 0 ) {
            return false;
        } 
    }
    return true;
}

//随机生成一种颜色
function randomColor() {
    return  '#'+Math.floor(Math.random()*0xffffff).toString(16);
}

 

posted @ 2020-02-20 13:39  shumeihh  阅读(153)  评论(0)  编辑  收藏  举报