javascript - 使用递增/递减按钮循环回到数字范围的开始或结束

Question

我在 StackOverflow 上阅读了很多问题，但似乎找不到答案。

我希望能够增加或减少一系列数字，通过按按钮可以循环回到第一个或最后一个数字。虽然我有最大/最小值，但我希望每次按下增量按钮时，它都会增加特定的数字。例如，如果数字范围是从 69 到 108，则增加 4。而从 108 到 144，增加了 8。一旦增量按钮达到最大值，假设 252，那么我希望它重置回最小值 30，然后再次增加 2。这也适用于递减按钮，但数值会下降。

这些是增加特定数字的数字范围:

30 -> 42 - increases by 2
42 -> 60 - increases by 3

当我正在研究解决方案时，我可能会稍后更改此设置，因此如果有流程或方法，请告诉我。

现在，我每次按下递增按钮时，它都会增加 4，反之亦然。

$(document).ready(function() {
 
  //toggle between default color screen and light orange screen 
  //also toggle the color inside 'metronome' and 'tuner' text
  //inside default color rectangle screen
  $(".smallbutton").click(function() {
    $(".Orange").toggleClass('OrangeLight');
    $(".Metronome-box").toggleClass('OrangeLight-text');
    $(".tuner-text").toggleClass('OrangeLight-text');
  });
  
var counter = 108;
var beat = 4;
  
  //number increment for tempo
  $('.up-tempo-triangle').click(function() {
    counter = counter + 4;
    $('.metronome_beats').text(counter);
  });
  
  //number decrement for tempo
  $('.down-tempo-triangle').click(function() {
    counter = counter - 4;
    $('.metronome_beats').text(counter);
  });
  
  //number increment for beat
  $('.up-beat-triangle').click(function() {
    beat = beat + 1;
    $('.beat-note-value').text(beat);
  });
  
  //number decrement for beat
  $('.down-beat-triangle').click(function() {
    beat = beat - 1;
    $('.beat-note-value').text(beat);
  });
  
  //toggle tuner side on and off by pressing "Tumer On"
  //grey rectangle button
  $(".GreyRectangle1").click(function() {
    $(".ReceivedTunerNote").toggleClass('ReceivedTunerNote1');
    $(".tuner-text").toggleClass('ReceivedTunerNote1');
    $(".hertz-value").toggleClass('ReceivedTunerNote1');
    $(".hertz-symbol").toggleClass('ReceivedTunerNote1');
  });
  
  //toggle metronome side on and off by pressing "Metronome On" 
  //grey rectangle button
  $(".GreyRectangle2").click(function() {
    $(".Metronome-box").toggleClass('Metronome1');
    /*make sure to toggle to the same class, in this case 
     'Metronome1'*/
    $(".tempo-text").toggleClass('Metronome1');
    $(".metronome_beats").toggleClass('Metronome1');
    $(".beat-text").toggleClass('Metronome1');
    $(".beat-note-value").toggleClass('Metronome1');
  });
});

/*
from this pen: https://codepen.io/mtbroomell/pen/yNwwdv

function increaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number').value = value;
}

function decreaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('number').value = value;
}
*/

h1 {
  font-size: 2em;
  font-family: arial;
  text-align: center;
}

p {
  font-family: arial;
}

div {
  font-family: arial;
  color: white;
  font-size: 50%;
}

body {
  text-align: center;
  background-color: #F7EBC4;
}

.BlackRectangle {
  display: grid;
  
  /*grid-template-columns creates 5 columns*/
  grid-template-columns: 100px 94px auto 94px 100px;
  
  /*grid-template-rows create 5 rows*/
  grid-template-rows: 20% 20% 20% 20% 20%;
  height: 290px;
  width: 460px;
  background-color: #212121;
  border-radius: 25px;
  margin: auto;
  z-index: -1;
}

.greencircle {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 1;
  background-color: green;
  height: 12px;
  width: 12px;
  border-radius: 20px;
  margin-top: 5px;
  margin-left: 28px;
}

.redcircle {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: red;
  height: 12px;
  width: 12px;
  border-radius: 20px;
  margin-top: 5px;
  margin-left: 90px;
}

.flat {
  content: "\266D";
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  font-size: 175%;
  color: white;
  margin-right: -4px;
}

.redcircle1 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: red;
  height: 12px;
  width: 12px;
  border-radius: 20px;
  margin-top: 5px;
  margin-left: 155px;
}

.sharp {
  content: "\266F";
  font-size: 175%;
  color: white;
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;
  margin-left: -8px;
  margin-top: 2px;
}

.Orange {
  grid-row-start: 1;
  grid-row-end: span 2;
  grid-column-start: 2;
  grid-column-end: span 3;
  display: grid;
  grid-template-columns: 50px auto 50px;
  grid-template-rows: 30px auto 30px;
  font-size: 1.5em;
  background-color: #D7C39C;
  border-radius: 5px;
  height: 100px;
  width: 253px;
  margin-top: 30px;
  margin-left: 2px;
  z-index: 1;
}

.OrangeLight {
  background-color: #FFB266; 
}

.OrangeMedium {
  background-color: orange;
}

.tuner-text {
  grid-column: 1/1;
  grid-row: 1/1;
  color: #D7C39C;
  font-size: 70%;
  background-color: black;
  transform: scaleX(1.2);
  height: 10px;
  width: 60px;
  border-radius: 3px;
  margin-top: 1px;
  margin-left: 8px;
}

.hertz-value {
  grid-column: 1/2;
  grid-row: 1/2;
  font-size: 125%;
  font-style: italic;
  color: black;
  margin-left: -19px;
  margin-top: 11px;
}

.hertz-symbol {
  grid-column: 1/1;
  grid-row: 1/1;
  font-size: 70%;
  transform: scaleX(1.2);
  color: black;
  margin-top: 18px;
  margin-left: 22px;
}

.ReceivedTunerNote {
  position: absolute;
  grid-column: 1/3;
  grid-row: 1/2;
  font-size: 125%;
  color: black;
  z-index: 4;
  margin-left: 121px;
}

.ReceivedTunerNote1 {
  visibility:hidden;
}

.input-edit-prevent-box {
  position: absolute;
  grid-column: 3/4;
  grid-row: 1/span 4;
  background-color: transparent;
  width: 85px;
  height: 100px;
  margin-left: 175px;
  z-index: 4;
}

.Metronome-box {
  position: absolute;
  grid-column: 3/ span 4;
  grid-row: 1/ span 2;
  font-size: 70%;
  color: #D7C39C;
  background-color: black;
  transform: scaleX(1.2);
  height: 10px;
  width: 60px;
  border-radius: 3px;
  z-index: 2;
  margin-left: 185px;
  margin-top: 1px;
}

/*when toggling, the visibility hidden function will
hide the div element 'A' completely that is independent
of 'METRONOME' rather than 'display:none'*/
.Metronome1 {
  visibility: hidden;
}

.OrangeLight-text {
  color: #FFB266;
}

.tempo-text {
  position: absolute;
  grid-column: 2/ span 4;
  grid-row: 1/1;
  font-size: 65%;
  color: black;
  transform: scaleX(1.2);
  margin-top: 13px;
  margin-left: 188px;
}

/*note: I haven't gotten to part where I can adjust
metronome beat, so left it as default 108 per beat*/
.metronome_beats {
  position: absolute;
  grid-column: 2/ span 4;
  grid-row: 1/1;
  font-size: 125%;
  color: black;
  
  /*transparent background-color and no borders is because of deault setting of input*/
  background-color: transparent;
  border: none; 
  transform: scaleX(1.2);
  font-style: italic;
  text-align: right; 
  width: 35px;
  margin-left: 162px;
  margin-top: 10px;
}

.beat-text {
  position: absolute;
  grid-column: 3/4;
  grid-row: 1/ span 3;
  font-size: 65%;
  color: black;
  transform: scaleX(1.2);
  margin-left: 216px;
  margin-top: 48px;
  z-index: 4;
}

.beat-note-value {
  grid-column: 1/4;
  grid-row: 2/3;
  font-size: 125%;
  transform: scaleX(1.2);
  color: black;
  background-color: transparent;
  border: none; 
  width: 20px;
  font-style: italic;
  text-align: right;
  margin-left: 178px;
  margin-top: 46px;
}

.top-trapezoid {
  grid-column: 1/ span 5;
  grid-row: 1 / 2;
  height: 5px;
  width: 253px;
  
  /*151515 is a very dark grey, borderline black*/
  border-top: 8px solid #151515;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  margin-top: 22px; 
  margin-left: 94px;
}

.right-trapezoid {
  grid-column: 5 / span 6;
  grid-row: 1 / span 3;
  height: 103px;
  width: 0px;
  border-right: 8px solid #3C3C3C;
  border-top: 7px solid transparent;
  border-bottom: 10px solid transparent; 
  margin-top: 22px;
  z-index: 2;
}

.bottom-trapezoid {
  grid-column: 1 / span 5;
  grid-row: 3 / span 4;
  height: 5px;
  width: 255px;
  border-bottom: 12px solid #2e2e2e;
  border-right: 6.5px solid transparent;
  border-left: 6.5px solid transparent;
  margin-top: 9px;
  margin-left: 95px;
  z-index: 2;
}

.left-trapezoid {
  grid-column: 1 / span 3;
  grid-row: 1 / span 4;
  height: 100px;
  border-left: 8px solid #1B1B1B;
  border-top: 8px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 95px;
  margin-top: 23px;
}

.tuner-on {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 0;
  grid-row-start: 1;
  color: white;
  transform: scaleX(1.3);
}

.GreyRectangle1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
  height: 15px;
  width: 53px;
  background-color: gray;
  border-radius: 20px;
  margin: auto;
  z-index: 3;
}

.InnerGreyDot {
  height: 4px;
  width: 4px;
  background-color: #9C9C9C;
  border-radius: 50%;
  z-index: 3;
  margin-left: 17px;
  margin-bottom: 2px;
}

.small-left-white-line {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 3;
  margin: auto;
  width: 3px;
  height: 10px;
  border-top: 1px solid white;
  margin-top: -28px;
  margin-left: 22px;
}

.first-left-white-line {
  grid-column: 1 / 2;
  grid-row: 1 / span 2;
  width: 10px;
  height: 15px;
  border-left: 1px solid white;
  margin-left: 21px;
  margin-top: 31px;
}

.upside-down-half-circle {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: span 3;
  height: 9px;
  width: 20px;
  border-radius: 0 0 90px 90px;
  background: #828181;
  z-index: 1;
  margin-left: 40px;
  margin-top: 37px;
}

.second-left-white-line {
  grid-column: 1 / 2;
  grid-row: 2 / span 3;
  height: 98px;
  width: 21px;
  border-right: 1px solid white;
}

.third-left-white-line {
  grid-column: 1/2;
  grid-row: 4/5;
  height: 1px;
  width: 8px;
  border-top: 1px solid white;
  margin-left: 22px;
  margin-top: -19px;
}

.calibrate {
  grid-column: 1 / 2;
  grid-row: 2 / span 3;
  
  /*transform scale X will stretch the word horizontally based on the x-axis*/
  transform: scaleX(1.3);
  color: white;
  margin-right: 33px;
  margin-top: -10px;
}

.note {
  grid-column: 1 / span 2;
  grid-row: 1 / span 3;
  transform: scaleX(1.3);
  color: white;
  margin-left: -55px;
  margin-top: 48px;
}

.first-right-white-line {
  grid-column: 1/span 2;
  grid-row: 1/span 3;
  height: 67px;
  width: 0px;
  border-right: 1px solid white;
  margin-left: 80px;
  margin-top: 57px;
}

.up-triangle {
  grid-column: 1/span 2;
  grid-row: 1 / span 2;
  transform: scale(0.05,0.05);
  margin-left: -145px;
  margin-top: -120px;
}

.in-between-triangle-line {
  grid-column: 1 / span 2;
  grid-row: 2 / span 3; 
  height: 8px;
  width: 1px; 
  border-left: 1px solid gray;
  margin-left: 50px;
  margin-top: 29px;
}

.down-triangle {
  grid-column: 1/span 2;
  grid-row: 1/ span 3;
  transform: scale(0.05,0.05);
  margin-left: -145px;
  margin-top: -88px;
}

.second-right-white-line {
  grid-column: 1/2;
  grid-row: 3/4;
  height: 1px;
  width: 10px;
  border-bottom: 1px solid white; 
  margin-left: 71px;
  margin-top: 7px;
}

.sound {
  grid-column: 1/2;
  grid-row: 2/4;
  transform: scaleX(1.2);
  color: white;
  margin-top: 62px;
}

.small-black-rectangle {
  grid-column: 1/2;
  grid-row: 3/4;
  height: 12px;
  width: 35px;
  border-radius: 10px;
  background-color: black;
  margin-left: 33px;
  margin-top: 15px;
  z-index: 2;
}

.sound-back {
  grid-column: 1/ 2;
  grid-row: 3/ span 5;
  color: white;
  transform: scaleX(1.2);
  margin-top: 30px;
}

.small-black-rectangle1 {
  grid-column: 1/2;
  grid-row: 3/4;
  height: 12px;
  width: 35px;
  border-radius: 10px;
  background-color: black;
  margin-left: 33px;
  margin-top: 50px;
  z-index: 2;
}

.illuminating-star {
  grid-column: 1/3;
  grid-row: 2/4;
  transform: scale(0.04,0.04);
  margin-left: -85px;
  margin-top: -97px;
}

.smallbutton {
  grid-column: 2/2;
  grid-row: 4/5;
  height: 15px;
  width: 10px;
  border-radius: 20px;
  background-color: black;
  margin-left: 2px;
  margin-top: -7px;
  z-index: 2;
}


.voltext {
  grid-column: 4/5;
  grid-row: 1/2;
  transform: scaleX(1.2);
  color: white;
  margin-left: 33px;
}

.right-side-triangle {
  grid-column: 4 / 5;
  grid-row: 1 / span 2;
  width: 0; 
  height: 0; 
  border-top: 7px solid transparent;
  border-bottom: 1px solid transparent; 
  border-right: 20px solid white;
  margin-left: 75px;
  margin-top: 8px;
}

.metronome-on {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: span 2;
  transform: scaleX(1.2);
  color: white;
  margin-right: 6px;
}

.GreyRectangle2 {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 1;
  height: 15px;
  width: 55px;
  background-color: gray;
  border-radius: 20px;
  margin-left: 27px;
  margin-top: 22px;
  z-index: 2;
}

.InnerGreyDot1 {
  height: 4px;
  width: 4px;
  background-color: #9C9C9C;
  border-radius: 50%;
  z-index: 3;
  margin-left: 12px;
}

.upside-down-half-circle1 {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: span 3;
  height: 9px;
  width: 20px;
  border-radius: 0 0 90px 90px;
  background: #828181;
  z-index: 1;
  margin-top: 38px;
  margin-left: 44px;
}

.beat-white-text{
  position: absolute;
  grid-column: 4/ span 6;
  grid-row: 1/span 3;
  transform: scaleX(1.2);
  color: white;
  margin-left: 380px;
  margin-top: 50px;
}

.up-beat-triangle {
  grid-column: 1/span 2;
  grid-row: 1 / span 2;
  transform: scale(0.05,0.05);
  cursor: pointer;
  margin-left: 195px;
  margin-top: -120px;
  z-index: 2;
}

.in-between-triangle-beat-line {
  grid-column: 2 / span 4;
  grid-row: 2 / span 3; 
  height: 8px;
  width: 1px; 
  border-left: 1px solid gray;
  margin-left: 290px;
  margin-top: 29px;
}

.down-beat-triangle {
  grid-column: 1/span 2;
  grid-row: 1/ span 3;
  transform: scale(0.05,0.05);
  cursor: pointer;
  margin-left: 195px;
  margin-top: -88px;
}

.tempo-white-text {
  position: absolute;
  grid-column: 4/ span 6;
  grid-row: 1/ span 2;
  transform: scaleX(1.2);
  color: white;
  margin-left: 412px;
  margin-top: 50px;
}

.up-tempo-triangle {
  grid-column: 1/span 2;
  grid-row: 1 / span 2;
  transform: scale(0.05,0.05);
  margin-left: 230px;
  margin-top: -120px;
  z-index: 2;
}

.in-between-triangle-tempo-line {
  grid-column: 2 / span 4;
  grid-row: 2 / span 3; 
  height: 8px;
  width: 1px; 
  border-left: 1px solid gray;
  margin-left: 324px;
  margin-top: 29px;
}

.down-tempo-triangle {
  grid-column: 1/span 2;
  grid-row: 1/ span 3;
  transform: scale(0.05,0.05);
  margin-left: 230px;
  margin-top: -88px;
}

.tap-tempo-text {
  grid-column: 5/ span 6;
  grid-row: 3/4;
  font-size: 100%;
  color: white;
  transform: scaleX(1.2);
  margin-top: 2px;
  margin-right: -5px;
}

.tap-tempo-button {
  position: absolute;
  grid-column: 4/5;
  grid-row: 3/ span 4;
  background-color: gray;
  height: 40px;
  width: 40px;
  border-radius: 50px;
  border: 1px solid black;
  box-shadow: 
    inset 8px 8px 10px -6px rgba(0,0,0,0.35);
  margin-left: 388px;
  margin-top: 130px;
}

.tap-tempo-button:active {
  /*in order for radial-gradient to have gradient, the outer more circles must have higher percentages than the inner circle, otherwise it will become solid colors*/
  background: radial-gradient(closest-side, #EC7FA2 10%, #EBA5BB 85%, #FFD1E0 100%);
  border: 1px solid #FFEAEA;
  box-shadow: 0 0 5px 5px #FF4040;
}

.rights {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Tuner and Metronome Combined</title>
<h1><strong>My Tuner and Metronome (based on Korg Tuner TM50 and Metronome Design)</strong></h1>
<body>
  <div class="BlackRectangle">
      <div class="greencircle"></div>
      <div class="redcircle"></div>
      <span class="flat">&#9837;</span>
      <div class="redcircle1"></div>
      <span class="sharp">&#9839;</span>
    <div class="Orange">
      <div class="tuner-text">TUNER</div>
      <div class="hertz-value">440</div>
      <div class="hertz-symbol">HZ</div>
      <div class="ReceivedTunerNote">A</div>
      <!--the input-edit-prevent-box is used to hide input textbox. This is soley for the purpose of imitating the real-life metronome where you cannot physically edit it on-screen-->
      <div class="input-edit-prevent-box"></div>
      <div class="Metronome-box">METRONOME</div>
      <div class="tempo-text">TEMPO</div>
      <div class="beat-text">BEAT</div>
      
      <!--increment/decrement tempo and beat value-->
      <form>
        <!--input name is used to put name inside form submission-->
      <div type="text" min="30" max="252" class="metronome_beats"></div>
       <div type="text" value="4" class="beat-note-value"></div>
    </form>
  
    </div>
    <div class="top-trapezoid"></div>
    <div class="right-trapezoid"></div>
    <div class="bottom-trapezoid"></div>
    <div class="left-trapezoid"></div>
    <p class="tuner-on">TUNER ON</p>
    <button class="GreyRectangle1">
      <div class="InnerGreyDot" style="margin-top: 2px;"></div>
    </button>
    <div class="small-left-white-line"></div>
    <div class="first-left-white-line"></div>
    <div class="upside-down-half-circle"></div>
    <p class="calibrate">CALIB</p>
    <div class="second-left-white-line"></div>
    <div class="third-left-white-line"></div>
    <p class="note">NOTE</p>
    <div class="first-right-white-line"></div>
    <input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184787015/cd90a26d-8c21-4437-8436-c018e4f20252/hireslargecomposite.png" class="up-triangle">
    <div class="in-between-triangle-line"></div>
    <input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184782382/0292af05-b48b-4195-9e90-aea0f850fab8/hireslargecomposite.png" alt="giant up triangle" class="down-triangle">
    <div class="second-right-white-line"></div>
    <p class="sound">SOUND</p>
    <button class="small-black-rectangle"></button>
<p class="sound-back">SOUND<br>BACK</p>
    <button class="small-black-rectangle1"></button>
    <img src="https://imgservice.cricut.com/design-users/users/4339679/images/184947932/2b99ea92-05ad-41d3-a211-4625bb4c5796/hireslargecomposite.png" alt="Illuminating star symbol" class="illuminating-star"></img>
<button class="smallbutton"></button>
    <p class="voltext">VOL</p>
    <div class="right-side-triangle"></div>
    <p class="metronome-on">METRONOME ON</p>
    <button class="GreyRectangle2">
      <div class="InnerGreyDot1">
        <div class="InnerGreyDot1"></div>
      </div>
    </button>
    <div class="upside-down-half-circle1"></div>
  
  <!--Note: in Korg TM50 Tuner and Metronome specification, tempo range is from 30 to 252 BPM-->
  
  <!--Also, only moves up and down by 4 beats-->
    <p class="beat-white-text">BEAT</p>
<!--Have up triangle image act as button using onclick event-->
  <input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184787015/cd90a26d-8c21-4437-8436-c018e4f20252/hireslargecomposite.png" alt="giant up triangle" data-max="252" class="up-beat-triangle"></input>
  <div class="in-between-triangle-beat-line"></div>
  <input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184782382/0292af05-b48b-4195-9e90-aea0f850fab8/hireslargecomposite.png" alt="giant up triangle" data-min="30" class="down-beat-triangle">
    <p class="tempo-white-text">TEMPO</p>
  <input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184787015/cd90a26d-8c21-4437-8436-c018e4f20252/hireslargecomposite.png" class="up-tempo-triangle">
  <div class="in-between-triangle-tempo-line"></div>
  <input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184782382/0292af05-b48b-4195-9e90-aea0f850fab8/hireslargecomposite.png" alt="giant up triangle" class="down-tempo-triangle">
  <div class="tap-tempo-text">TAP TEMPO</div>
  <button class="tap-tempo-button"></button>
  </div>
<p>Will be working on toggle function between beige, light orange, and orange</p>
<p class="rights">Made by Sarah</p>
</body>

Answer 1

如果你想从任意一端绕过限制，并且还具有动态增量和减量；您可以添加接受当前值并返回下一个和上一个值的函数。然后只需将返回值分配给输入字段即可。

类似于 this

const min = 0;
const max = 252;
function next(current) {
  switch(true) {
    case min <= current && current < 30: return current + 1;
    case 30 <= current && current < 42: return current + 2;
    case 42 <= current && current < 60: return current + 3;
    // ... and so on
    case current == max: return min;
    default: return current + 1;
  }
}

function previous(current) {
  switch(true) {
    case min == current: return max;
    case min < current && current <= 30: return current - 1;
    case 30 < current && current <= 42: return current - 2;
    case 42 < current && current <= 60: return current - 3;
    // ... and so on
    default: return current - 1;
  }
}

function increaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value = next(value);
  document.getElementById('number').value = value;
}

function decreaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value = previous(value);
  document.getElementById('number').value = value;
}

您可能需要添加一些防御代码，以应对用户手动键入超出范围的数字的情况。