JS的一些简单应用 —— 定时器setTimeout、倒计时setInterval 和 循环调用爆炸效果

定时器setTimeout


setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

下面是一个3秒后炸弹爆炸的例子:


<html lang="en">
    <head>
        <meta charset="utf-8">
        <script>
        function bang() {
            document.getElementsByTagName('img')[0].src='warn.png';
        }

        setTimeout('bang()', 3000);
        script>
    head>
    <body>
        <h1>定时器h1>
        <img src="boom.png" alt="" />
    body>
html>

效果如下:
JS的一些简单应用 —— 定时器setTimeout、倒计时setInterval 和 循环调用爆炸效果_第1张图片

3秒后转为炸弹:
JS的一些简单应用 —— 定时器setTimeout、倒计时setInterval 和 循环调用爆炸效果_第2张图片


setInterval实现倒计时效果


setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

下面这个炸弹爆炸的例子可看到倒计时效果:


<html lang="en">
    <head>
        <meta charset="utf-8">
        <script>
        function bang() {
            var inp = document.getElementsByName('time')[0];
            var time = parseInt(inp.value) - 1;
            inp.value = time;

            if(time == 0) {
                document.getElementsByTagName('img')[0].src = 'warn.png';
            }
        }

        setInterval('bang()', 1000);

        script>
    head>
    <body>
        <h1>定时器h1>
        <input type="button" name="time" value="5" /><br >
        <img src="boom.png" alt="" />
    body>
html>

定时器终极版(爆炸后不再倒计时)


<html lang="en">
    <head>
        <meta charset="utf-8">
        <script>
        function bang() {
            var inp = document.getElementsByName('time')[0];
            var time = parseInt(inp.value) - 1;
            inp.value = time;

            if(time == 0) {
                document.getElementsByTagName('img')[0].src = 'warn.png';
                clearInterval(clock);
            }
        }

        var clock = setInterval('bang()', 1000);

        script>
    head>
    <body>
        <h1>定时器h1>
        <input type="button" name="time" value="5" /><br >
        <img src="boom.png" alt="" />
    body>
html>

JS的一些简单应用 —— 定时器setTimeout、倒计时setInterval 和 循环调用爆炸效果_第3张图片

JS的一些简单应用 —— 定时器setTimeout、倒计时setInterval 和 循环调用爆炸效果_第4张图片


循环调用爆炸效果


setTimeout实现每N秒执行一次


<html lang="en">
    <head>
        <meta charset="utf-8">
        <script>
        function bang() {
            var inp = document.getElementsByName('time')[0];
            var time = parseInt(inp.value) - 1;
            inp.value = time;

            if(time == 0) {
                document.getElementsByTagName('img')[0].src = 'warn.png';
                clearInterval(clock);
            } else {
                setTimeout('bang()',1000);
            }
        }

        clock = setTimeout('bang()', 1000);

        script>
    head>
    <body>
        <h1>setTimeout实现每N秒执行一次h1>
        <input type="button" name="time" value="5" /><br >
        <img src="boom.png" alt="" />
    body>
html>

你可能感兴趣的:(JavaScript,Simple,Application,JS笔记及简单应用)