重新加載頁面，如果超過三個div

我有一個頁面，其中創建了圓圈并出現在隨機位置。

當您單擊圓圈時，它會隱藏。

我想這樣當頁面上同時有 3 個以上的圓圈時，就會出現警報，當你點擊確定時，頁面會重新加載。

我添加了一個新變數，當我們創建一個圓圈時，我們得到 1，當我們點擊圓圈 -1 時。然后我添加了一個條件

let circleCount = 0;

  circleCount;
--circleCount;

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

一切正常，只有當我們在警報中點擊確定時，重新加載頁面無法正常作業，有時您需要點擊幾次才能重新加載。可能是什么問題呢？

//create circle

var widthHeight = 35;
var margin = 25;
var delta = widthHeight   margin;

let clicks = 0;
let circleCount = 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);
    --circleCount;
    $(this).fadeOut();
  });
  
  if (circleCount > 3) {
      alert('Alert For your User!');
      window.location.reload(); 
    }
  
  document.body.appendChild(div);
}
    
let i = 0;

const oneSecond = 600;

setInterval(() => {
  i  = 1;
    circleCount;
  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>

uj5u.com熱心網友回復：

我認為只有你需要在重新加載結束時進行其他部分，看看

   if (circleCount > 3) {
      alert('Alert For your User!');
      window.location.reload(); 
    }
 else
        document.body.appendChild(div);

所以運行下面的代碼并檢查它是否固定

let circleCount = 0;

  circleCount;
--circleCount;

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

一切正常，只有當我們在警報中點擊確定時，重新加載頁面無法正常作業，有時您需要點擊幾次才能重新加載。可能是什么問題呢？

//create circle

var widthHeight = 35;
var margin = 25;
var delta = widthHeight   margin;

let clicks = 0;
let circleCount = 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);
    --circleCount;
    $(this).fadeOut();
  });
  
  if (circleCount > 3) {
      console.log(circleCount);//alert('Alert For your User!');
      window.location.reload(); 
    }
  else
    document.body.appendChild(div);
}
    
let i = 0;

const oneSecond = 600;

setInterval(() => {
  i  = 1;
    circleCount;
  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>

標籤：javascript jQuery

上一篇：我如何使html代碼出現在影片的頂部而不是在它的后面

下一篇：如何更改資料表顯示條目位置