0

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

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

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

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

'如果 (clickedCount = 2 || 2 + (% 4 === 0))'

如果 clickedcount 等于 2 OR 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 */
}
4

1 回答 1

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 属性，您可以直接修改任何对象的变换元素。

结合几个自定义属性，你可以设置一系列的锁，而不需要写一堆重复的代码。

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>

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

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

于 2018-11-27T15:34:47.053 回答