如何让我的计时器自动停止

Question

我有一个计时器，用它创建各种视觉效果。我不知道该怎么做，是如何使计时器达到特定值时自动停止。我试过停止switch语句，并使用if else语句无效：

<h1><time>0</time></h1>

<p id="para1">
</p>

<p id="para2">
</p>

<script>

var h1 = document.getElementsByTagName('h1')[0],
     start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;


function add() {
    seconds++;
    if (seconds >= 10) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }

    h1.textContent =  (seconds > 9 ? seconds : "" + seconds);

var m = (seconds > 9 ? seconds : "" + seconds);

document.getElementById("para1").innerHTML = m;

switch(m) {
   case "1":
document.getElementById("para2").innerHTML = ('<p style="background-color: purple; border: solid grey;">Hello</p>'); 
break;

case "2":
document.getElementById("para2").innerHTML = ('<p style="background-color: blue;  border: dotted grey; color: white;">Hello</p>'); 
break;

default:
document.getElementById("para2").innerHTML = ('<p style="background-color: red;  border: solid grey; ">Hello</p>'); 
break;
}

timer();
}
function timer() {
    t = setTimeout(add, 300);
}
timer();
</script>