Javascript将脚本包装成函数

Question

here i have a simple script which is a countdown timer, here is the code:

<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>

Now at the moment when i open this page on chrome, it starts the countdown straight away, what im trying to do is make it start the countdown when i click on an image, how would i do this guys?

Thanks

Answer 1

Start the interval inside an event handler for the image

<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>

FIDDLE

Answer 2

Use onClick of the image

<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>

Answer 3

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

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