如何让 clickcount 函数从 0 以外的数字开始
How to get a clickcount function to begin on number other than 0
我有一个图像可以同时旋转和计算点击次数。用户必须将图像旋转到正确的位置,然后提交此答案才能转到下一页。根据第一张图片的总点击次数(通过 clickedcount 函数检查),点击第二个按钮将导航到两个网址之一。
我使用 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 */
}
只需更改代码行
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的样式属性,可以直接修改任何对象的变换元素。
结合几个自定义属性,不用写一堆重复的代码就可以设置一系列的锁
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>
使用这种方法的优点是您可以根据需要创建任意数量的锁,每个锁都有不同的设置,而无需重新编写整个脚本逻辑。
不确定这会有多大帮助...但总有一天它可能会帮助某人。
我有一个图像可以同时旋转和计算点击次数。用户必须将图像旋转到正确的位置,然后提交此答案才能转到下一页。根据第一张图片的总点击次数(通过 clickedcount 函数检查),点击第二个按钮将导航到两个网址之一。
我使用 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 */
}
只需更改代码行
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的样式属性,可以直接修改任何对象的变换元素。
结合几个自定义属性,不用写一堆重复的代码就可以设置一系列的锁
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>
使用这种方法的优点是您可以根据需要创建任意数量的锁,每个锁都有不同的设置,而无需重新编写整个脚本逻辑。
不确定这会有多大帮助...但总有一天它可能会帮助某人。