javascript - 如何让 clickcount 函数从 0 以外的数字开始

Question

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

我已经使用 CSS 变换让图片在点击时旋转。我还有一个 clickedcount 函数，它计算点击次数，然后第二个按钮根据该总数正确响应导航到其中一个 url。但是，我需要从 2 而不是 0 开始计数，因为这是第一个正确的图像位置。然后之后的每个完整旋转(4 的倍数)也将被接受为正确的。因此点击次数总计为 2，然后是 6、10、14、18、22，依此类推。

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

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

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

if the clickedcount is equal to 2 OR 2 + a multiple of 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 */
}

Answer 1

只需更改代码行

 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>

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

不确定这会有多大帮助......但它可能有一天会帮助某人。