JS：在两个数间循环遍历
本帖最后由 马黑黑 于 2023-5-17 13:10 编辑 <br /><br /><style>.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background: #f9f9f9; box-sizing: border-box; overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
.hidden { display: none; }
</style>
<div class="papa">
<p>以下代码实现计数器在指定范围内(包含边界数)循环遍历。这里约定，begin < end，即起始数小于终止数。本法支持负数。以下是代码：</p>
<div class="mama">
<pre class="hCode"><div id="mydiv"></div>
<p><input id="btn" type="button" value="反复点击" /></p>
<script>
let begin = 2, end = 6; /* 起止数 */
let calc = begin; /* 计数器 */
mydiv.innerText = `起始数 ${begin} | 终止数 ${end}`;
btn.onclick = () => {
mydiv.innerText = calc;
calc += calc < end ? 1 : -(end - begin);
}
</script></pre>
<pre class="hLineNum"></pre>
</div>
<p><br><button class="btnok" type="button" value="运行代码">运行代码</button><br></p>
<div class="stage"></div>
<p>核心代码是计数变量 calc 的运算（行10），每次按钮点击它会加上或减去一个数，规则是，当计数变量 calc 自身小于终止数 end 时加 1 ，否则，减去 (end - begin) 即范围总个数。</p>
</div>
<script>
let btns = document.querySelectorAll('.btnok'),
stages = document.querySelectorAll('.stage'),
hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum'),
mamas = document.querySelectorAll('.mama');
hCodes.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(let i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
mamas.style.cssText += `height: ${hCodes.offsetHeight + 20}px`;
if(!btns) return;
btns.onclick = () => {
let val = btns.value;
val === '运行代码' ? codeRun(hCodes.innerText, stages) : codeRun('',stages);
btns.value = btns.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
};
});
let codeRun = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
</script>
类似文章：
JS实现在两个数值间来回步进 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
这个是顺序往前的，前面那个帖子是自动在两个数字间来回步进{:4_187:} 感谢老师的分享，点赞！ 两个计时器，一个手动的，一个自动的。{:4_173:} 南无月 发表于 2023-5-17 18:02
两个计时器，一个手动的，一个自动的。
实现的目标和方式也不一样 看谁先用在实例中，来！准备。。。。。。。 calc == end ? calc = begin : calc++; 起个网名好难 发表于 2023-5-17 19:48
calc == end ? calc = begin : calc++;
你这个更简洁 樵歌 发表于 2023-5-17 19:40
看谁先用在实例中，来！准备。。。。。。。
这个要用上，需要有场景 红影 发表于 2023-5-17 13:28
这个是顺序往前的，前面那个帖子是自动在两个数字间来回步进
所以标题也不一样 马黑黑 发表于 2023-5-17 20:01
所以标题也不一样
黑黑把各种语句都带来了，就不知道怎样用在帖子里了。 马黑黑 发表于 2023-5-17 19:28
实现的目标和方式也不一样
一个拆炸弹的时候读秒用，一个走路时记数用{:4_173:} 南无月 发表于 2023-5-17 20:59
一个拆炸弹的时候读秒用，一个走路时记数用
{:4_172:} 红影 发表于 2023-5-17 20:24
黑黑把各种语句都带来了，就不知道怎样用在帖子里了。
这个不是简单就能用的，你需要有场景，例如，需要读取数组元素中从哪到哪的位置 马黑黑 发表于 2023-5-17 21:54
这个不是简单就能用的，你需要有场景，例如，需要读取数组元素中从哪到哪的位置
嗯嗯，听起来就觉得不容易。 红影 发表于 2023-5-17 22:23
嗯嗯，听起来就觉得不容易。
我进一步说明吧：
假设我们有一堆的果果，每一个都放在数组里，这时，我们希望从第八个开始选择，让它们循环着色，每一回都上不同的颜色。这时候，我这个算法就能用的上。 马黑黑 发表于 2023-5-17 20:01
这个要用上，需要有场景
你两个得意门生都实践了，效果超捧{:4_173:}牛叉 马黑黑 发表于 2023-5-17 22:36
我进一步说明吧：
假设我们有一堆的果果，每一个都放在数组里，这时，我们希望从第八个开始选择，让它 ...
挺起来很不错的样子{:4_187:} 红影 发表于 2023-5-18 11:06
挺起来很不错的样子
果果是诱人的