javascript - 将数组增加到最大项目
问题描述
我已经写了这段代码。它每 1000 毫秒使用 css 转换像卡片翻转一样旋转两个 div,并在 div 中显示新文本,该文本是从数组中绘制的。它无限运行。
但是一旦数组到达它的末尾,我就会得到一个“未定义”的值,因为 i++ 在最后一个数组项上递增。我一直在疯狂地试图弄清楚如何防止这种情况。有什么帮助吗?
代码笔: https ://codepen.io/warpigs666/pen/OJpBKdy
<style>
#flip-card {
width: 100px;
height: 50px;
}
#flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
#textDiv1 {
background-color: lightblue;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
text-align: center;
}
#textDiv2 {
background-color: lightcoral;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
text-align: center;
transform: rotateX(180deg);
}
</style>
<body>
<div id="flip-card">
<div id="flip-card-inner">
<div id="textDiv1">
one
</div>
<div id="textDiv2">
set via script
</div>
</div>
</div>
<script>
var flipCard = document.getElementById('flip-card');
var flipCardInner = document.getElementById('flip-card-inner');
var textDiv1 = document.getElementById('textDiv1');
var textDiv2 = document.getElementById('textDiv2');
var wordArray = ["one", "two", "three", "four", "five"]
var i = 1;
function flipText(){
textDiv2.innerHTML = wordArray[i];
flipCardInner.style.transform = "rotateX(180deg)";
setTimeout(
function() {
textDiv1.innerHTML = wordArray[i++];
flipCardInner.style.transform = "rotateX(360deg)";
}, 1000
);
if (i<wordArray.length){
i++;
}
else {i=0;}
}
var flipIt = setInterval(flipText, 2000);
</script>
</body>
解决方案
这是一份工作setInterval
var flipCard = document.getElementById('flip-card');
let flipCardInner = document.getElementById('flip-card-inner');
let textDiv1 = document.getElementById('textDiv1');
let textDiv2 = document.getElementById('textDiv2');
let wordArray = ["one", "two", "three", "four", "five"];
let i = 0;
let timerVal = 1000;
function getI(i) {
if (i < wordArray.length - 1) return i + 1;
else return 0;
}
let ctr = 1,
useDiv; // ctr and useDiv will help to toggle between divs in our loop and also increment the transform number
textDiv1.innerHTML = wordArray[i]; // initialize
function flipText() {
i = getI(i);
useDiv = (useDiv == textDiv2) ? textDiv1 : textDiv2;
useDiv.innerHTML = wordArray[i];
flipCardInner.style.transform = "rotateX(" + (ctr * 180) + "deg)";
ctr++;
}
let interval
window.onload = function() {
// we'll still delay the beginning of the infinite loop, but then we set it to an interval, so it runs forever.
// if you need to stop it in your code, just use clearInterval(interval)
setTimeout(() => {
interval = setInterval(() => flipText(), timerVal);
}, timerVal);
}
#flip-card {
width: 100px;
height: 50px;
perspective: 100px;
}
#flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
#textDiv1 {
background-color: lightblue;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
text-align: center;
}
#textDiv2 {
background-color: lightcoral;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
text-align: center;
transform: rotateX(180deg);
}
<div id="flip-card">
<div id="flip-card-inner">
<div id="textDiv1">
</div>
<div id="textDiv2">
</div>
</div>
</div>
推荐阅读
- python - 尝试导入 openpyxl 时,Pycharm 给我其他 .py 文件的错误
- android - 调用 mediaPlayer.start() 时出现空指针异常:Android
- python - Python线程一一启动并获取返回值?
- javascript - 单击后具有唯一值的数据表列过滤器多选
- net-snmp - 当我使用 snmp 时,如何解决“此 OID 的此代理上没有可用的此类对象”?
- python - MDCARD 未在单击时删除
- proto.actor - 如何在 C# 中定义的序列化程序中注册消息
- swagger - 用于字段的 ApiParam
- swift - 如何在同一个窗口中转换到新的视图控制器?(斯威夫特/故事板,macOS)
- java - 使用@Slf4j 注解进行日志记录