用JavaScript写一个简单的网页倒计时插件

最新推荐文章于 2024-07-26 20:46:33 发布

菡萏_花开

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量966

点赞数 1

分类专栏：有趣实用的JavaScript插件文章标签： javascript js html html5

本文链接：https://blog.csdn.net/weixin_43839749/article/details/105894705

版权

有趣实用的JavaScript插件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在一些验证码等待、网页跳转等待、广告等待等一些等待的场景中，经常需要一个倒计时，于是这个插件就可以完成这个功能。

1. 定义和用法

该插件主要实现倒计时的功能。可以在所要网页标签内显示倒计时，并可以指定倒计时结束后的操作。

2. 语法

函数timer_down(eleid, time, begtext, endtext, endfunc, fundelaytime)需要传入6个参数

参数	说明
`eleid`	必须。参数类型为`String`。需要显示倒计时的标签的id。
`time`	必须。参数类型为`Int`。倒计时的秒数。
`begtext`	必须。参数类型为`String`。倒计时数字前面的文本。
`endtext`	必须。参数类型为`String`。倒计时数字后面的文本。
`endfunc`	可选。参数类型为`String`。倒计时结束后需要执行的函数名。
`fundelaytime`	可选。参数类型为`Int`。倒计时结束后需要执行的函数的延迟时间。

3. 实例

实现一个网页3秒的倒计时，倒计时结束后延迟1秒弹窗，弹窗内容为“ok”

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="http://code.cble.online/javascript/timer.js"></script>
</head>

<body>
    <div id="timertest"></div>
</body>
<script type="text/javascript">
    function OK(){
        alert('ok');
    }
    timer_down('timertest', 3, '网页将在', '秒后弹窗', 'OK', 1);
</script>
</html>

效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JM3fhsnL-1588421717024)($resource/demo.gif)]

当然可以通过在begtext和endtext的标签里的方式来设定倒计时数字的样式，例如：

timer_down('timertest', 3, '网页将在<a style=\"color:red;\">', '</a>秒后弹窗', 'OK', 1);

效果如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R2aNEMwH-1588421717027)($resource/2.png)]

4. 源码及链接

这里来po一下源码，可以直接将该函数放到文件中使用

function timer_down(eleid, time, begtext, endtext, endfunc, fundelaytime) {
    ele = document.getElementById(eleid);
    nowtime = time;
    downtime = self.setInterval(function () {
        ele.innerHTML = begtext + nowtime + endtext + '';
        nowtime -= 1;
    }, 1000);
    setTimeout(function () {
        downtime = window.clearInterval(downtime);
        setTimeout(function () {
            try {
                eval(endfunc + '()');
            } catch (e) { }
        }, fundelaytime * 1000)
    }, (time + 1) * 1000)
}