我需要为function descramble()
设置动画。因此,它将更改第一个字符,然后移动到下一个字符,依此类推。我尝试使用setTimeout()
,但这只会延迟功能的启动。我只需要逐字母为ROT13转换设置动画。
我正在使用slice()
删除字符串的第一个元素,将其替换为ROT13,然后用新字母加上整个字符串替换该字符串。我无法找到一种仅删除段落首字母的方法。您可以单击jsfiddle中的第三段以查看转换。
$("#last-second-inside p:nth-child(3)").one('click', function() {
$(this).css('cursor', 'default');
var str = "Vg'f fvzcyr lbh jvyy whfg nqq nabgure pbyhza nsgre sbhe'f cynpr naq gung pbyhza jvyy unir gur cynpr inyhr bs rvtug'f.";
var strArr = str.split('');
var decodedArr = [];
var increaseNum = -1;
descramble();
function descramble() {
strArr.map(function(num) {
increaseNum++;
var currentLetter = num.charCodeAt();
if (currentLetter >= 65 && currentLetter <= 90 || currentLetter >= 97 && currentLetter <= 122) {
if (currentLetter >= 78 && currentLetter <= 90 || currentLetter >= 110 && currentLetter >= 97) {
decodedArr.push(String.fromCharCode(currentLetter - 13));
} else {
decodedArr.push(String.fromCharCode(currentLetter + 13));
}
} else {
decodedArr.push(num);
}
var sliced = str.slice(increaseNum + 1, str.length - 1);
$("#last-second-inside p:nth-child(3)").text(decodedArr.join('') + sliced);
})
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="last-second-inside">
<p>You probably now understand that how binary works and how simple it is.</p>
<p>Now, I need you to think about that how you might display 8 in binary. After giving it a shot, you can click on the next paragraph to descramble it.</p>
<p>Vg'f fvzcyr lbh jvyy whfg nqq nabgure pbyhza nsgre sbhe'f cynpr naq gung pbyhza jvyy unir gur cynpr inyhr bs rvtug'f.</p>
</div>
最佳答案
根据map()
的值,让descramble()
一次只处理一个字母,而不是使用increaseNum
。descramble()
运行后,使用setTimeout()
在适当的时间间隔后再次调用它:
$("#last-second-inside p:nth-child(3)").one('click', function() {
$(this).css('cursor', 'default');
var str = "Vg'f fvzcyr lbh jvyy whfg nqq nabgure pbyhza nsgre sbhe'f cynpr naq gung pbyhza jvyy unir gur cynpr inyhr bs rvtug'f.";
var strArr = str.split('');
var decodedArr = [];
var increaseNum = 0; // changed from -1
descramble();
function descramble() {
var num = str[increaseNum++],
currentLetter = num.charCodeAt();
if (currentLetter >= 65 && currentLetter <= 90 || currentLetter >= 97 && currentLetter <= 122) {
if (currentLetter >= 78 && currentLetter <= 90 || currentLetter >= 110 && currentLetter >= 97) {
decodedArr.push(String.fromCharCode(currentLetter - 13));
} else {
decodedArr.push(String.fromCharCode(currentLetter + 13));
}
} else {
decodedArr.push(num);
}
var sliced = str.slice(increaseNum + 1, str.length - 1);
$("#last-second-inside p:nth-child(3)").text(decodedArr.join('') + sliced);
if(increaseNum < str.length) {
setTimeout(descramble, 10);
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="last-second-inside">
<p>You probably now understand that how binary works and how simple it is.</p>
<p>Now, I need you to think about that how you might display 8 in binary. After giving it a shot, you can click on the next paragraph to descramble it.</p>
<p>Vg'f fvzcyr lbh jvyy whfg nqq nabgure pbyhza nsgre sbhe'f cynpr naq gung pbyhza jvyy unir gur cynpr inyhr bs rvtug'f.</p>
</div>