以自定义方式单击计数器

Question

<script type="text/javascript">
    var clicks = 0;
    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    </script>
<td><button type="button" onclick="onClick()" >0.1</td>
 <p>Ball Count: <a id="clicks">0.0</a></p>

您好我正在尝试创建自定义点击计数器，当每第6次点击它应该转到下一个整数（例如：0.1,0.2,0.3,0.4,0.5,1.0（第6次点击），1.1,1.2,1.3， 1.4,1.5,2.0（第12次点击）就像明智一样）以及如何减少同样的方式...请帮助我......

Answer 1

可能你正在寻找这样的东西：

bar.py

请注意，我已使用全局变量，不建议这样做。

代码段，没有全局值。

var a = 0;
function increase() {
  if (a % 10 == 5)
    a += 5;
  else
    a++;
  return a / 10;
}
function decrease() {
  if (a % 10 == 0)
    a -= 5;
  else
    a--;
  return a / 10;
}

var counter = {
  currentValue: 0
};
function increase() {
  var a = counter.currentValue;
  if (a % 10 == 5)
    a += 5;
  else
    a++;
  counter.currentValue = a;
  return a / 10;
}
function decrease() {
  var a = counter.currentValue;
  if (a % 10 == 0)
    a -= 5;
  else
    a--;
  counter.currentValue = a;
  return a / 10;
}

input {border: 1px solid #999; padding: 5px; width: 15px; height: 15px; text-align: center; font-family: 'Segoe UI'; line-height: 1; width: 50px;}
input[type=button] {padding: 0; vertical-align: top; width: 35px; height: 27px;}

Answer 2

您的要求与时间计算有一些相似之处。您可以使用以下内容。

jQuery版

var clicks = 0;
$('#plusClick, #minusClick').on('click', function () {
    if( this.id == 'plusClick' )
        clicks += 10;
    else if( clicks > 0 )
        clicks -= 10;
    var first = Math.floor((clicks) / 60);
    var second = clicks - (first * 60);
    if (first < 10) {first = "0" + first;}
    if (second < 10) {second = "0" + second;}
    var value    = first + '.' + second;
    document.getElementById("clicks").innerHTML = parseFloat(value).toFixed(1);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="clicks">0.0</div>
<button id="minusClick">-</button>
<button id="plusClick">+</button>

JS版

var clicks = 0;
function onClick(operation) {
    if( operation ){
        clicks += 10;
    } else if(clicks > 0){
        clicks -= 10;
    }
    var first = Math.floor((clicks) / 60);
    var second = clicks - (first * 60);
    if (first < 10) {first = "0" + first;}
    if (second < 10) {second = "0" + second;}
    var value    = first + '.' + second;
    document.getElementById("clicks").innerHTML = parseFloat(value).toFixed(1);
}

<div id="clicks">0.0</div>
<button id="minusClick" onclick="onClick(false)">-</button>
<button id="plusClick" onclick="onClick(true)">+</button>

Answer 3

只需使用

更改onclick（）

function onClick(){
    clicks += 1;
    var a = Math.floor(clicks/6);
    var b = (clicks%6);
    document.getElementById("clicks").innerHTML = a + '.' + b;
}

Answer 4

尝试利用数学而不是学校男生的逻辑，

function increment(val) {
    ++val;
    $("button").data("count", val);
    return (val + (Math.floor((val / 6)) * 4)) / 10;
}

$("button").click(function () {
    $('input').val(increment(parseFloat($(this).data("count"))));
});

DEMO