Question

我现在正在用javascript编写一个小点击游戏，我目前正面临一些挑战。我需要它，以便每当我点击一个按钮10次。我的第二个值应该增加一个。也许有点难以理解，我会尝试用代码解释它。

// Let's just say I have this variable.
var timesThatTheButtonHasBeenClickedTenTimes = 0;
// So let's say I have an amount of times clicked. 
Amount = 0;

// Whenever I click the button..The Amount increases like this.
Amount++;

// so after one click the amount should be..
Amount = 1;
// I need it so that when the button has been clicked 10 times I want to display //that. Something like this.

timesThatTheButtonHasBeenClickedTenTimes = 1;

我应该使用while循环还是什么。

Answer 1

＆＃13;

// Let's just say I have this variable.
var timesThatTheButtonHasBeenClickedTenTimes = 0;
// So let's say I have an amount of times clicked. 
var amount = 0;

var counter = function () {
    amount++;

    if (amount === 10) {
        amount = 0;
        timesThatTheButtonHasBeenClickedTenTimes++;
    }

    document.getElementById('clicks').innerHTML = amount;
    document.getElementById('hits').innerHTML = timesThatTheButtonHasBeenClickedTenTimes;
};

document.getElementById("mybutton").addEventListener("click", counter);

＆＃13;

<button id='mybutton'>
Click me!
</button>
<p>
  Clicks = <span id='clicks'>0</span>
</p>

<p>
  10 times hits = <span id='hits'>0</span>
</p>

＆＃13;

希望有所帮助！

Answer 2

您可以执行以下操作：

var timesButtonClicked = 0;
var secondValue = 0;

if (timesButtonClicked === 10) {
    secondValue++;
    timesButtonClicked = 0;
} else {
    timesButtonClicked++;
}

Answer 3

我建议的一种方法是：

＆＃13;

function increment() {

  // find the current number of times the <button> has been clicked,
  // if the <button> has a data-current attribute we retrieve that
  // attribute-value and parse it as a number in decimal format;
  // if it does not have that custom data-* attribute we set the
  // variable to 0:
  let currentValue = this.dataset.current ? parseInt(this.dataset.current, 10) : 0;

  // here we update the data-current attribute to the incremented value
  // of the currentValue:
  this.dataset.current = ++currentValue;

  // we retrieve the element with the id of 'clicks', and set
  // its textContent to the value held by the currentValue:
  document.getElementById('clicks').textContent = currentValue;

  // here we retrieve the element with an id of 'numberOfTens',
  // and set its textContent to the floored value of the currentValue
  // divided by 10:
  document.getElementById('numberOfTens').textContent = Math.floor(currentValue / 10);
}

// here we retrieve the element with the id of 'clicker':
document.getElementById('clicker')
  // and bind the increment() function (note the deliberate lack of
  // parentheses) as the event-handler for the 'click' event:
  .addEventListener('click', increment);

＆＃13;

div:empty::before {
  content: '0';
}

#clicks::after {
  content: ' clicks.';
}

#numberOfTens::after {
  content: ' tens of clicks.';
}

＆＃13;

<button id="clicker">Click</button>
<div id="clicks"></div>
<div id="numberOfTens"></div>

＆＃13;

参考文献：

CSS：
JavaScript的：
- document.getElementById()。
- EventTarget.addEventListener()。
- HTMLElement.dataset。
- parseInt。
- Pre-increment variable ++variableName。

Answer 4

这是解决问题的简单方法：

var clicks = 0;
Clicker = function() {
        clicks++;
        console.log('You clicked '+clicks+' times already.');
        if(clicks == 10){
          alert('Something what you want to alert.')
          clicks = 0;
        }
    }

<button onclick="Clicker()">
  Click me 10x times pls
</button>

点击2次显示文字javascript

4 个答案: