/**
* 產生一個隨機整數，範圍是min~max之間
* @param {*} min 最小值
* @param {*} max 最大值，取不到最大值
*/
function getRandom(min, max) {
// Math.random() 0~1 包含小數
// Math.random() * (max - min) 0 ~ (max-min) 包含小數
// Math.random() * (max - min) + min min ~ max 包含小數
// Math.floor(Math.random() * (max - min) + min) min~max 只有整數
return Math.floor(Math.random() * (max - min) + min);
}
/**
* 得到一個隨機的顏色
*/
function getRandomColor() {
// 顏色數組
var colors = [
"#f26395",
"#62efab",
"#ef7658",
"#ffe868",
"#80e3f7",
"#d781f9"
];
//產生一個隨機的下標
var index = getRandom(0, colors.length);
return colors[index];
}
/**
* 得到一個隨機字符串
* @param {*} n
*/
function getRandomString(){
var strContent = ["love","u"];
//產生一個隨機小標
var index = getRandom(0,strContent.length);
return strContent[index];
}
/**
* 判斷一個數n，是不是一個素數（質數）
* 素數：大於1的數字，只能被1和自身整除
* @param {*} n
*/
function isPrime(n) {
if (n <= 1) {
return false;
}
// 2~n-1
for (var i = 2; i < n; i++) {
if (n % i === 0) {
// i能整除n
return false;
}
}
// 找不到
return true;
}
var number = 1; //下一個要添加的數字
var divNumbers = document.getElementById("divNumbers"); //小數字的容器
var divNum = document.getElementById("num"); //中間的數字的div
var divCenter = document.getElementById("divCenter");
/**
* 添加一個數字
*/
function addNumber() {
//添加小數字
var span = document.createElement("span");
// span.innerText = number;
span.innerText = '寧老師';
divNumbers.appendChild(span);
//設置中間的數字
// divNum.innerText = number;
divNum.innerText = "love";
if (isPrime(number)) {
//產生一個隨機顏色
var color = getRandomColor();
var strContent = getRandomString();
//變化顏色
span.style.color = color;
//中間有東西飄出去了
var div = document.createElement("div");
div.className = "overlap"; //重疊的div
div.innerText = strContent;
div.style.color = color;
//設置過渡
div.style.transition = "1s ease-in";
divCenter.appendChild(div); //此時，該元素根本就不在頁面上（瀏覽器還沒有對頁面進行繪製）
//必須在這個位置，強行的讓瀏覽器繪製一遍（reflow）
getComputedStyle(div).top; //該代碼沒有實際意義，只是強行讀取該元素最終的某個位置，逼迫瀏覽器繪製該元素
//讓它飄
div.style.transform =
"translate(" +
getRandom(-300, 300) +
"px, " +
getRandom(-300, 300) +
"px)";
//讓它透明
div.style.opacity = 0;
//過渡完成後，需要刪除該元素
div.addEventListener(
"transitionend",
function() {
//過渡完成後觸發的事件
div.remove(); //自殺
},
{
once: true //該事件只觸發一次
}
);
}
//讓滾動條滾動到span元素的位置
span.scrollIntoView();
number++;
}
var timer = null; //用於保存計時器的id
/**
* 開始不斷的產生數字
*/
function start() {
if (timer) {
//正在產生數字
return;
}
// 每N毫秒運行一次addNumber函數
timer = setInterval(addNumber, 100);
}
/**
* 停止產生數字
*/
function stop() {
clearInterval(timer);
timer = null;
}
window.onclick = function() {
if (timer) {
//正在產生數字
stop();
} else {
start();
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html {
background: #172f38;
color: #d7dbdd;
padding: 20px;
cursor: pointer;
}
.numbers span {
margin-right: 10px;
/* 浮動之後變成塊盒 */
float: left;
min-width: 2em;
}
.center {
position: fixed;
font-size: 8em;
color: rgba(255, 255, 255, 0.7);
/* 實現自動寬高的絕對定位居中 */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.center .overlap {
/* 目的是讓這些div重疊 */
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<!-- 裝小的數字 -->
<div id="divNumbers" class="numbers"></div>
<div id="divCenter" class="center">
<div id="num"></div>
</div>
<script src="./index.js"></script>
</body>
</html>
["#f26395", "#62efab", "#ef7658", "#ffe868", "#80e3f7", "#d781f9"]
