如何从HTML [duplicate]停止“ setInterval”

问题描述 投票：-2回答：1

此代码显示了不断增长的Intervaltimer。我正在使用setInterval，但我不知道如何停止ist。

有一个名为ende（）的函数。我可以通过此功能停止Intervaltimer吗？

停止的原因是，当我再次按下按钮（在底部）时，第二个计时器启动。我不知道怎么说，测试出来。

```
<!DOCTYPE html>
<html>
	<head>
		<title>Interval Timer</title>
	
		<style>
			@font-face {
				font-family: sevenSegment;
				src: url(SevenSegment.ttf);
			}
		
			h1{
				font-family: sevenSegment;
				font-size: 7em;
				color: #969696;
				line-height: 0%;
			}
			h2{
				font-family: sevenSegment;
				font-size: 5em;
				color: #969696;
				line-height: 0%;
			}

			.container{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50% );
			}
			
			.button1{
				font-family: sevenSegment;
				font-size: 1em;
				color: #969696;
				
  				border: none;
			}
		</style>

	</head>
	<body>
		<div class="container">


			<table>
			  <tr>
			  	<td><h2 id="des">WORK</h2></td>			    
			  </tr>
			  <tr>
			    <td><h1 id="count">00:00:45</h1></th>
			  </tr>
			  <tr>
			  	<td><h2 id="des">REST</h2></td>
			   </tr>
			  <tr>
			    <td><h1 id="count2">00:00:15</h1></td>
			  </tr>
			   <tr>
			   	 <td><h2 id="des">Pause</h2></td>
			   </tr>
			   <tr>
			     <td><h1 id="count3">00:00:25</h1></td>
			   </tr>
			</table>
			<button class="button1" type="button" id="work">Work</button>
			<button class="button1" type="button" id="rest">Rest</button>
			<button class="button1" type="button" id="pause">Pause</button>
		</div>
		<script type="text/javascript">

			document.querySelector('#work').addEventListener('click', work);
			document.querySelector('#rest').addEventListener('click', rest);
			document.querySelector('#pause').addEventListener('click', pause);

			function work(argument) {
				var counter = 45;
				var status = 0;
	/*			function ende(argument) {
					
					if (){
						counter = 15;
					}
					if (){
						counter = 45;
					}
					if (){
						counter = 25;
					}
					if (){
						counter = "mal sehen";
					}
				}*/
				setInterval( function(){
					counter--;

					if (counter >= 10) {
						id = document.getElementById("count");
						id.innerHTML = "00:00:" + counter + "";
						if (counter <= 0) {
							ende(id);
						}
					}
					if (counter < 10){
						id = document.getElementById("count");
						id.innerHTML = "00:00:0" + counter + "";
						if (counter <= 0) {
							ende(id);
						}
					}

				}, 1000);
			}
			function rest(argument) {
				var counter = 15;
				var status = 0;
	/*			function ende(argument) {
					
					if (){
						counter = 15;
					}
					if (){
						counter = 45;
					}
					if (){
						counter = 25;
					}
					if (){
						counter = "mal sehen";
					}
				}*/
				setInterval( function(){
					counter--;

					if (counter >= 10) {
						id = document.getElementById("count2");
						id.innerHTML = "00:00:" + counter + "";
						if (counter <= 0) {
							ende(id);
						}
					}
					if (counter < 10){
						id = document.getElementById("count2");
						id.innerHTML = "00:00:0" + counter + "";
						if (counter <= 0) {
							ende(id);
						}
					}

				}, 1000);
			}
			function pause(argument) {
				var counter = 25;
				var status = 0;
	/*			function ende(argument) {
					
					if (){
						counter = 15;
					}
					if (){
						counter = 45;
					}
					if (){
						counter = 25;
					}
					if (){
						counter = "mal sehen";
					}
				}*/
				setInterval( function(){
					counter--;

					if (counter >= 10) {
						id = document.getElementById("count3");
						id.innerHTML = "00:00:" + counter + "";
						if (counter <= 0) {
							ende(id);
						}
					}
					if (counter < 10){
						id = document.getElementById("count3");
						id.innerHTML = "00:00:0" + counter + "";
						if (counter <= 0) {
							ende(id);
						}
					}

				}, 1000);
			}
			function ende(id){
				id.innerHTML = "00:00:00"
			}
		</script>
	</body>
</html>

间隔计时器

    <style>
        @font-face {
            font-family: sevenSegment;
            src: url(SevenSegment.ttf);
        }

        h1{
            font-family: sevenSegment;
            font-size: 7em;
            color: #969696;
            line-height: 0%;
        }
        h2{
            font-family: sevenSegment;
            font-size: 5em;
            color: #969696;
            line-height: 0%;
        }

        .container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50% );
        }

        .button1{
            font-family: sevenSegment;
            font-size: 1em;
            color: #969696;

            border: none;
        }
    </style>

</head>
<body>
    <div class="container">


        <table>
          <tr>
            <td><h2 id="des">WORK</h2></td>             
          </tr>
          <tr>
            <td><h1 id="count">00:00:45</h1></th>
          </tr>
          <tr>
            <td><h2 id="des">REST</h2></td>
           </tr>
          <tr>
            <td><h1 id="count2">00:00:15</h1></td>
          </tr>
           <tr>
             <td><h2 id="des">Pause</h2></td>
           </tr>
           <tr>
             <td><h1 id="count3">00:00:25</h1></td>
           </tr>
        </table>
        <button class="button1" type="button" id="work">Work</button>
        <button class="button1" type="button" id="rest">Rest</button>
        <button class="button1" type="button" id="pause">Pause</button>
    </div>
    <script type="text/javascript">

        document.querySelector('#work').addEventListener('click', work);
        document.querySelector('#rest').addEventListener('click', rest);
        document.querySelector('#pause').addEventListener('click', pause);

        function work(argument) {
            var counter = 45;
            var status = 0;
/*          function ende(argument) {

                if (){
                    counter = 15;
                }
                if (){
                    counter = 45;
                }
                if (){
                    counter = 25;
                }
                if (){
                    counter = "mal sehen";
                }
            }*/
            setInterval( function(){
                counter--;

                if (counter >= 10) {
                    id = document.getElementById("count");
                    id.innerHTML = "00:00:" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }
                if (counter < 10){
                    id = document.getElementById("count");
                    id.innerHTML = "00:00:0" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }

            }, 1000);
        }
        function rest(argument) {
            var counter = 15;
            var status = 0;
/*          function ende(argument) {

                if (){
                    counter = 15;
                }
                if (){
                    counter = 45;
                }
                if (){
                    counter = 25;
                }
                if (){
                    counter = "mal sehen";
                }
            }*/
            setInterval( function(){
                counter--;

                if (counter >= 10) {
                    id = document.getElementById("count2");
                    id.innerHTML = "00:00:" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }
                if (counter < 10){
                    id = document.getElementById("count2");
                    id.innerHTML = "00:00:0" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }

            }, 1000);
        }
        function pause(argument) {
            var counter = 25;
            var status = 0;
/*          function ende(argument) {

                if (){
                    counter = 15;
                }
                if (){
                    counter = 45;
                }
                if (){
                    counter = 25;
                }
                if (){
                    counter = "mal sehen";
                }
            }*/
            setInterval( function(){
                counter--;

                if (counter >= 10) {
                    id = document.getElementById("count3");
                    id.innerHTML = "00:00:" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }
                if (counter < 10){
                    id = document.getElementById("count3");
                    id.innerHTML = "00:00:0" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }

            }, 1000);
        }
        function ende(id){
            id.innerHTML = "00:00:00"
        }
    </script>
</body>
javascript html time countdown
1个回答
1
投票

将间隔存储在变量中，然后使用该变量停止间隔。但是，由于要在函数内部启动间隔并在另一个函数内部停止间隔，因此需要使用全局变量。首先声明一个全局变量x：

var x;

然后，替换：

setInterval(...

作者：

x = setInterval(...

要停止间隔，只需致电

clearInterval(x);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.