應用 JavaScript 完成一個有遞增、遞減效果的計數器

本範例使用 JavaScript 的 setInterval() 方法來建立定時執行的計數器，並搭配邏輯運算子 || （OR）來判斷是否達到上下限。範例程式碼如下：

<script type="text/javascript">

     let everyStep = 2; // 每次變動值

     let thiscounter = 0; // 初始值

     const maxValueis = 100; // 上限

     const minValueis = -100; // 下限

     let totalRuns = 250; // 執行次數

     const timerex = setInterval(() => {

         console.log(`目前計數器的值：${thiscounter}`);

         // 預判是否會超出範圍，提前反轉方向

         if (thiscounter + everyStep > maxValueis || thiscounter + everyStep < minValueis) {

             everyStep = -everyStep;

         }

         thiscounter += everyStep;

         // 執行次數控制

         if (--totalRuns <= 0) {

             clearInterval(timerex);

             console.log("停止執行定時執行計數器");

         }

    }, 100);

</script>

結論：

• 當計數器的數值即將超過設定的最大值（maxValueis）或小於最小值（minValueis）時，會將 everyStep 反轉（正變負、負變正），藉此達到來回遞增與遞減的效果。
• 此外，透過 totalRuns 控制執行次數，當次數歸零時，使用 clearInterval(timerex) 停止計時器。