計算腳本創建的圓圈的點擊次數-有解無憂

我有一個用圓圈創建 div 的函式。現在它們都已創建并出現在頁面的開頭并按順序走得更遠。接下來，我需要每個圓圈出現在隨機位置。我這樣做了。現在我想添加這些圈子的點擊次數

為此，我添加了代碼

let clicks = 0;

而在點擊功能本身

clicks  = 1;
document.getElementById("clicks").innerHTML = clicks;

但是最后點擊后，數值不超過1，怎么解決呢？

//create circle
var widthHeight = 45;
var margin = 25;
var delta = widthHeight   margin;

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");
  `enter code here`
  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);
    });
  }

  let clicks = 0;

  $("div").click(function() {
    clicks  = 1;
    document.getElementById("clicks").innerHTML = clicks;
    $(this).fadeOut("slow");
  });

  document.body.appendChild(div);
}

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

.circle {
  width: 35px;
  height: 35px;
  border-radius: 35px;
  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>
<p><a id="clicks">0</a></p>

uj5u.com熱心網友回復：

問題來自let clicks = 0;每次呼叫方法 createDiv 時，它會將 click 的值重新初始化為 0

一種方法是獲取 #clicks 的內容并將其決議為 int，然后再遞增一

另一個人認為在這種情況下您已經使用 jquery 來更新您只需要使用的#clicks 的文本$('#clicks').text('your wanted text')

      $(div).click(function() {
        $('#clicks').text(parseInt($('#clicks').text())   1);            
        $(this).fadeOut("slclicksow");
      });

//create circle
var widthHeight = 45;
var margin = 25;
var delta = widthHeight   margin;

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);
    });
  }

  let clicks = 0;

  $(div).click(function() {
    $('#clicks').text(parseInt($('#clicks').text())   1);            
    $(this).fadeOut("slclicksow");
  });

  document.body.appendChild(div);
}

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

.circle {
  width: 35px;
  height: 35px;
  border-radius: 35px;
  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>
<p><a id="clicks">0</a></p>

uj5u.com熱心網友回復：

發生這種情況是因為您let clicks = 0在創建 div 的函式內部。所以當一個新的 div 出現時，它會重置為 0；

要修復它，只需將變數移到函式之外：

//create circle
var widthHeight = 45;
var margin = 25;
var delta = widthHeight   margin;

// Move here
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");
  `enter code here`
  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  = 1;
    document.getElementById("clicks").innerHTML = clicks;
    $(this).fadeOut("slow");
  });

  document.body.appendChild(div);
}

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

.circle {
  width: 35px;
  height: 35px;
  border-radius: 35px;
  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>
<p><a id="clicks">0</a></p>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/441173.html

標籤：javascript html jQuery css

上一篇：如何在JQuery中使用hasClass并將類添加到找到的值？

下一篇：2秒后jQuery淡出訊息