标签：doc block javascrip ring width computed pre clear pad
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); }
标签：doc block javascrip ring width computed pre clear pad
原文地址：https://www.cnblogs.com/hjysunshine/p/12335388.html
