重新加载页面，如果有三个以上的分区

Question

我有一个页面，其中创建了圆圈并出现在随机位置。

当你点击圆圈时，它会隐藏起来。

我想这样做，当页面上同时有3个以上的圆圈时，就会出现警报，当你单击"确定"时，页面会重新加载。

我试着把这段添加到代码的末尾，但什么都不起作用：

if(i > 3) {
alert('Alert For your User!');
window.location.reload(); 
}

//create circle
var widthHeight = 35;
var margin = 25;
var delta = widthHeight + margin;
let clicks = 0;
function createDiv(id, color) {
let div = document.createElement('div');
var currentTop = 0;
var documentHeight = document.documentElement.clientHeight;
var documentWidth = document.documentElement.clientWidth;
div.setAttribute('class', id);
if (color === undefined) {
let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
}
else {
div.style.borderColor = color; 
}
div.classList.add("circle");
div.classList.add("animation");

currentTop = Math.floor(Math.random() * documentHeight) - delta;
currentLeft = Math.floor(Math.random() * documentWidth) - delta;

var limitedTop = Math.max(margin * -1, currentTop);
var limitedLeft = Math.max(margin * -1, currentLeft);
div.style.top = limitedTop + "px";
div.style.left = limitedLeft + "px";

const nodes = document.querySelectorAll('.animation');
for(let i = 0; i < nodes.length; i++) {
nodes[i].addEventListener('click', (event) => {
event.target.style.animation = 'Animation 200ms linear';
setTimeout(() => {
event.target.style.animation = '';
}, 220);  });
}

$(div).click(function() {
$('#clicks').text(++clicks);
$(this).fadeOut();
});

document.body.appendChild(div);
}

let i = 0;
const oneSecond = 600;
setInterval(() => {
i += 1;
createDiv(`circle${i}`);
}, oneSecond);

.circle {
width: 30px;
height: 30px;
border-radius: 30px;
background-color: #ffffff;
border: 3px solid #000;
margin: 20px;
position: absolute;
}
@keyframes Animation {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

创建一个新的变量circleCnt。创建新圆时，单击-1时指定+1。

然后，您可以使用该变量进行自己的验证。

//create circle
var widthHeight = 35;
var margin = 25;
var delta = widthHeight + margin;
let clicks = 0;
let circleCnt = 0;
function createDiv(id, color) {
let div = document.createElement('div');
var currentTop = 0;
var documentHeight = document.documentElement.clientHeight;
var documentWidth = document.documentElement.clientWidth;
div.setAttribute('class', id);
if (color === undefined) {
let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
}
else {
div.style.borderColor = color; 
}
div.classList.add("circle");
div.classList.add("animation");

currentTop = Math.floor(Math.random() * documentHeight) - delta;
currentLeft = Math.floor(Math.random() * documentWidth) - delta;

var limitedTop = Math.max(margin * -1, currentTop);
var limitedLeft = Math.max(margin * -1, currentLeft);
div.style.top = limitedTop + "px";
div.style.left = limitedLeft + "px";

const nodes = document.querySelectorAll('.animation');
for(let i = 0; i < nodes.length; i++) {
nodes[i].addEventListener('click', (event) => {
event.target.style.animation = 'Animation 200ms linear';
setTimeout(() => {
event.target.style.animation = '';
}, 220);  });
}

$(div).click(function() {
--circleCnt;
$('#clicks').text(++clicks);
$(this).fadeOut();
});

if(circleCnt > 3) {
alert('Alert For your User!');
window.location.reload(); 
}

document.body.appendChild(div);
}

let i = 0;
const oneSecond = 600;
setInterval(() => {
i += 1;
++circleCnt;
createDiv(`circle${i}`);
}, oneSecond);

.circle {
width: 30px;
height: 30px;
border-radius: 30px;
background-color: #ffffff;
border: 3px solid #000;
margin: 20px;
position: absolute;
}
@keyframes Animation {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>