Javascript将脚本包装到函数中

这里我有一个简单的脚本，它是一个倒计时计时器，下面是代码：

<span id="countdown" class="timer"></span>
<script>
    var seconds = 60;
    function secondPassed() {
        var minutes = Math.round((seconds - 30)/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;  
        }
        document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Buzz Buzz";
        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('secondPassed()', 1000);
</script>

var秒=60；
函数secondPassed（）{
var分钟=数学轮（（秒-30）/60）；
var剩余秒数=秒数%60；
如果（剩余秒数<10）{
剩余秒数=“0”+剩余秒数；
}
document.getElementById（'countdown'）。innerHTML=minutes+“：”+remainingSeconds；
如果（秒==0）{
清除间隔（倒计时）；
document.getElementById（'countdown'）.innerHTML=“Buzz”；
}否则{
秒--；
}
}
var countdownTimer=setInterval（'secondPassed（）'，1000）；

现在，当我在chrome上打开这个页面时，它马上开始倒计时，我想做的是让它在我点击图片时开始倒计时，我该怎么做

---

谢谢

在图像本身上设置一个onclick侦听器：

<img onclick="setInterval('secondPassed()', 1000)" src="..."/>

---

在映像的事件处理程序中启动间隔

<span id="countdown" class="timer"></span>
<img src="http://www.clker.com/cliparts/5/r/I/j/O/k/another-green-start-button.svg" id="image" />

<script>
    var seconds = 60,
        countdownTimer;

    function secondPassed() {
        var minutes = Math.round((seconds - 30)/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;  
        }
        document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Buzz Buzz";
        } else {
            seconds--;
        }
    }

    document.getElementById('image').addEventListener('click', function() {
          countdownTimer = setInterval(secondPassed, 1000);
    }, false);

</script>

<span id="countdown" class="timer"></span>
<img onClick="startTimer()" src="https://cdn1.iconfinder.com/data/icons/iconsweets2/40/clock_alarm.png">
<script>
    var seconds = 60;
    function secondPassed() {
        var minutes = Math.round((seconds - 30)/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;  
        }
        document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Buzz Buzz";
        } else {
            seconds--;
        }
    }
    var countdownTimer;
    function startTimer(){
        countdownTimer = setInterval('secondPassed()', 1000);
    }
</script>

var秒=60，
倒计时；
函数secondPassed（）{
var分钟=数学轮（（秒-30）/60）；
var剩余秒数=秒数%60；
如果（剩余秒数<10）{
剩余秒数=“0”+剩余秒数；
}
document.getElementById（'countdown'）。innerHTML=minutes+“：”+remainingSeconds；
如果（秒==0）{
清除间隔（倒计时）；
document.getElementById（'countdown'）.innerHTML=“Buzz”；
}否则{
秒--；
}
}
document.getElementById（'image'）.addEventListener（'click'，function（）{
倒计时=设置间隔（秒通过，1000）；
}，假）；

---

使用图像的onClick

<span id="countdown" class="timer"></span>
<img src="http://www.clker.com/cliparts/5/r/I/j/O/k/another-green-start-button.svg" id="image" />

<script>
    var seconds = 60,
        countdownTimer;

    function secondPassed() {
        var minutes = Math.round((seconds - 30)/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;  
        }
        document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Buzz Buzz";
        } else {
            seconds--;
        }
    }

    document.getElementById('image').addEventListener('click', function() {
          countdownTimer = setInterval(secondPassed, 1000);
    }, false);

</script>

<span id="countdown" class="timer"></span>
<img onClick="startTimer()" src="https://cdn1.iconfinder.com/data/icons/iconsweets2/40/clock_alarm.png">
<script>
    var seconds = 60;
    function secondPassed() {
        var minutes = Math.round((seconds - 30)/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;  
        }
        document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Buzz Buzz";
        } else {
            seconds--;
        }
    }
    var countdownTimer;
    function startTimer(){
        countdownTimer = setInterval('secondPassed()', 1000);
    }
</script>

var秒=60；
函数secondPassed（）{
var分钟=数学轮（（秒-30）/60）；
var剩余秒数=秒数%60；
如果（剩余秒数<10）{
剩余秒数=“0”+剩余秒数；
}
document.getElementById（'countdown'）。innerHTML=minutes+“：”+remainingSeconds；
如果（秒==0）{
清除间隔（倒计时）；
document.getElementById（'countdown'）.innerHTML=“Buzz”；
}否则{
秒--；
}
}
var倒计时；
函数startTimer（）{
倒计时=设置间隔（'secondPassed（）'，1000）；
}

+1是唯一建议将字符串

secondPassed（）

从setInterval中取出并将其作为函数引用以及使用

addEventListener

的人，非常感谢您的建议，它帮助了我！虽然它引起了一个问题，但当计数器到达时，它不再显示“嗡嗡”声0@PandaBear-是的，计时器现在超出了范围，修复了它并更新了答案！非常感谢，现在我唯一的问题是，如果你能帮助我，我会很高兴，我将如何改变这一点，使页面上有多个曾经点击过启动自己计数器的图像。？？thanks@PandaBear-按照现在的设置方式，您只需创建更多函数和事件处理程序。更好的方法是重写整个过程，这样就可以传递元素并轻松创建新的倒计时。