论坛 › 马黑黑教程专版 › JS实现在两个数值间来回步进

马黑黑 发表于 2022-4-4 22:00

JS实现在两个数值间来回步进

<div id="myBox" style="font: 1em Arial; color: deeppink; padding: 10px;"></div>

<script>
let mybox = document.getElementById('myBox');
let step = 1;
let num1= 10;
let num2 = -10;
let start = (num1 > num2 ? num1 : num2) - 1;
mybox.innerHTML =start + 1;

setInterval(sSs, 1000);

function sSs() {
        start = start + step;
        if(start == num1 || start == num2) step = -step;
        myBox.innerHTML = start;
}
</script>

马黑黑 发表于 2022-4-4 22:01

本帖最后由 马黑黑 于 2022-4-4 22:06 编辑 <br /><br /><p>代码：</p>
<pre>

&lt;<span style='color:darkred'>div</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"myBox"</span> <span style='color: red'>style</span><span style='color: blue'>=</span><span style='color: magenta'>"font: 1em Arial; color: deeppink; padding: 10px;"</span>&gt;&lt;<span style='color: darkred'>/div</span>&gt;

&lt;script language=<span style='color: magenta'>"javascript"</span>&gt;<span style='color: green'>
/*&nbsp; 在 num1 和 num2 之间来回步进（退）
&nbsp; &nbsp;包含 num1 与 num 2
&nbsp; &nbsp;注意 num1 不能等于 num2
*/</span>
let mybox = <span style='color: red'>document</span>.getElementById(<span style='color: magenta'>'myBox'</span>); <span style='color: green'>//显示变化的盒子标识</span>
<span style='color: blue'>let</span> step = 1; <span style='color: green'>// 步进幅度</span>
<span style='color: blue'>let</span> num1= 10; <span style='color: green'>// 区间阈值1</span>
<span style='color: blue'>let</span> num2 = -10; <span style='color: green'>// 区间阈值2</span>
<span style='color: blue'>let</span> start = (num1 &gt; num2 ? num1 : num2) - 1; <span style='color: green'>// 实时步进数：从大往小变</span>
mybox.innerHTML =start + 1; <span style='color: green'>//变化初始</span>

setInterval(sSs, 1000); <span style='color: green'>// 定时器演示步进循环变化</span>

<span style='color: blue'>function</span> sSs() { <span style='color: green'>// 步进函数</span>
&nbsp; &nbsp;start = start + step;
&nbsp; &nbsp;<span style='color: blue'>if</span>(start == num1 || start == num2) step = -step;
&nbsp; &nbsp;myBox.innerHTML = start;
}
&lt;/script&gt;
</pre>

马黑黑 发表于 2022-4-4 22:07

这个会经常用到，刚写好

红影 发表于 2022-4-4 22:31

估计又准备用在什么里面的吧{:4_173:}

红影 发表于 2022-4-4 22:32

有趣，看着数字变化看了半天，的确是不停在10和-10中步进的。

马黑黑 发表于 2022-4-5 00:08

红影 发表于 2022-4-4 22:32
有趣，看着数字变化看了半天，的确是不停在10和-10中步进的。

这是预设目标。最近经常用到，就单独写一个。

红影 发表于 2022-4-5 21:43

马黑黑 发表于 2022-4-5 00:08
这是预设目标。最近经常用到，就单独写一个。

黑黑厉害，想弄什么都能弄出来{:4_187:}

马黑黑 发表于 2022-4-5 22:58

红影 发表于 2022-4-5 21:43
黑黑厉害，想弄什么都能弄出来

也是根据需要来

红影 发表于 2022-4-5 23:33

马黑黑 发表于 2022-4-5 22:58
也是根据需要来

这样已经很厉害了{:4_187:}

马黑黑 发表于 2022-4-6 09:35

红影 发表于 2022-4-5 23:33
这样已经很厉害了

一般一般，班里倒数第三

焱鑫磊 发表于 2023-5-17 23:34

马黑黑 发表于 2022-4-6 09:35
一般一般，班里倒数第三

老师全班就三个人，倒数第三。那是......？厉害！{:4_187:}

马黑黑 发表于 2023-5-17 23:36

焱鑫磊 发表于 2023-5-17 23:34
老师全班就三个人，倒数第三。那是......？厉害！

{:4_172:}

查看完整版本: JS实现在两个数值间来回步进