javascript - 如何获得Clickcount函数以0以外的数字开头

我有一幅可旋转并同时计算点击次数的图片。用户必须将图像旋转到正确的位置，然后提交此答案以转到下一页。根据第一张图片的总点击次数（通过clickedcount功能检查），点击第二个按钮将导航至两个网址之一。

我已经使用CSS转换使图像在点击时旋转。我还具有一个clickedcount函数，该函数可以计算点击次数，然后第二个按钮会根据总数量正确响应导航到其中一个网址。但是，我需要从2开始计数，而不是从0开始计数，因为那是第一个正确的图像位置。然后，此后的每个完整旋转（4的倍数）也将被视为正确。因此，点击计数总计为2，然后是6、10、14、18、22，依此类推。

在第一个功能中更改起始clickedcount值确实会导致接受上述正确的总数。但是，它还会在第一次单击时将图像额外旋转2次（不应旋转）。我猜想我需要修改'if（clickedCount％4 === 0）'位，以将2有效地添加到起始总数中，但是到目前为止，我尝试过的所有变体都没有奏效。

到目前为止，我最接近的是：

'如果（clickedCount = 2 || 2 +（％4 === 0））'


  如果clickedcount等于2或2 + 4的倍数


但它根本不接受（完全停止旋转）。我不确定这里哪里出问题了！我是javascript新手，所以可能缺少一些非常非常明显的东西：（

JS：

<script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>
<script>
// Rotate cog when clicked
var directions = ["north", "west", "south", "east"],
    clickedCount = 0;
$(function() { // on page load
    $('#innercog').click(function() { //* When user clicks on first image //
    $(this).removeClass(directions[clickedCount % 4]);
    clickedCount++; // do not reset, just keep adding
    $(this).addClass(directions[clickedCount % 4]);
    console.log(clickedCount,directions[clickedCount % 4]);
});

// When tryunlock button is clicked, checks if stored clicks value is a multiple of 4 and navigates to one of the two urls depending if correct
$("#tryunlock").on("click", function() {
    if (clickedCount % 4 === 0) {
    console.log(clickedCount,"Entranceroom");
    window.location.href = "entranceroom.html";
    } else {
    console.log(clickedCount,"maindoor");
    window.location.href = "maindoor.html"; /* go to next page */
    }
});
});
</script>

CSS：

.north {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); /* Safari / Chrome */
}
.west {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
}
.south {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg); /* Safari and Chrome */
}
.east {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg); /* Safari and Chrome */
}

最佳答案

只需更改代码行

 clickedCount = 0;

至

  clickedCount  = 2;

新代码：

<script>
// Rotate cog when clicked
   var directions = ["north", "west", "south", "east"],
    clickedCount = 2;
     ....

至于OP中提到的比较表

这将是

if ((clickedCount == 2) || (((clickedCount + 2) % 4) == 0))

一种不同的处理方式：

使用javascript的style属性，您可以直接修改任何对象的transform元素。

结合一些自定义属性，您可以设置一系列锁，而无需编写大量重复代码。

function rotateLock(image) {

  // create the rotation and clicks properties attached to the div
  var cl = document.createAttribute("clicks");

  var clrot = document.createAttribute("rotation");


  // increase 'clicks' by 1
  cl.value += 1;
  image.attributes.setNamedItem(cl);


  // increase rotation by 90
  clrot.value = Number(image.attributes.getNamedItem("rotation").value) + 90;
  while (clrot.value > 360) { clrot.value -= 360; }
  image.attributes.setNamedItem(clrot);


  // set transform
  image.style.transform = "rotate(" + image.attributes.getNamedItem("rotation").value + "deg)";


  // check if rotation matches  the 'endRotation' value annd 'clicks' is > 0
  if ((cl.value > 0) && (clrot.value ==  image.attributes.getNamedItem("endRotation").value)) {
  image.innerHTML = "<br><br><p style='color: white'>UNLOCKED!</p><br><br>";


  } else {

  image.innerHTML = "<br><br>LOCKED!<br><br>";

  }
}

<DOCTYPE html>

<table><tr><td>  <div id="imageLock" style="transform: rotate(90deg); width: 150px; height: 150px; background-color: green; border-radius: 30px 30px 30px 30px" clicks="0" rotation=0 endRotation="360" onClick="rotateLock(document.getElementById('imageLock'));">
<center>
   LOCKED
    </center>
  </div>
</td><td>
  <div id="imageLock2" style="transform: rotate(90deg); width: 150px; height: 150px; background-color: green; border-radius: 30px 30px 30px 30px" clicks="0" rotation=0 endRotation="180" onClick="rotateLock(document.getElementById('imageLock2'));">
  <p><center>
   LOCKED
    </center></p>
  </div>
</td></tr></table>

使用这种方法的优点是，您可以根据需要创建任意数量的锁，每个锁具有不同的设置，而无需重新编码整个脚本逻辑。

不确定这将有多大帮助...但是有一天可能对某人有帮助。

关于javascript - 如何获得Clickcount函数以0以外的数字开头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53502849/