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

最新推荐文章于 2024-05-09 08:56:21 发布

烟敛寒林o

最新推荐文章于 2024-05-09 08:56:21 发布

阅读量1.1k

点赞数

分类专栏： ★ JavaScript

本文链接：https://blog.csdn.net/dyw_666666/article/details/80373303

版权

JS笔记及简单应用同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

★ JavaScript

20 篇文章 1 订阅

订阅专栏

定时器setTimeout

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

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

<!DOCTYPE html>
<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>

效果如下：
这里写图片描述

3秒后转为炸弹：
这里写图片描述

setInterval实现倒计时效果

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

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

<!DOCTYPE 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';
            }
        }

        setInterval('bang()', 1000);

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

定时器终极版（爆炸后不再倒计时）

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

这里写图片描述

循环调用爆炸效果

setTimeout实现每N秒执行一次

<!DOCTYPE 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);
            } 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>

烟敛寒林o

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS的一些简单应用 —— 定时器setTimeout、倒计时setInterval 和循环调用爆炸效果

定时器setTimeout setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。下面是一个3秒后炸弹爆炸的例子：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script&gt;
复制链接

扫一扫