jquery - jquery 倒计时提交

Question

我想在访问者单击提交时编码，它会在重定向到所述站点之前显示倒计时时间。

下面是演示

http://jsfiddle.net/VJT9d/17/

这是html代码：

<input id="hulk" class="submit" name="send_contact" type="submit" value="Send" />

<div style="display:hidden">Redirecting In <span id="countdown">5</span>.</div>

和jQuery代码：

var timer = 5,
el = document.getElementById('countdown');

$('#hulk').click(function t_minus() {
'use strict';
el.innerHTML = timer--;
if (timer >= 0) {
    setTimeout(function () {
        t_minus();
    }, 1000);
} else {
    window.location.replace("/");
}
}());

如何使倒数计时器仅在单击提交后出现？

Answer 1

只需删除()您最后拥有的。

var timer = 5,
    el = document.getElementById('countdown');

$('#hulk').on( 'click', function t_minus() {
    'use strict';
    el.innerHTML = timer--;
    if (timer >= 0) {
        setTimeout(function () {
            t_minus();
        }, 1000);
    } else {
        window.location.replace("/");
    }
});

更新小提琴。

Answer 2

要使消息仅在单击后可见，您需要做两件事：首先，正确隐藏具有适当样式的元素，其次不要在最后一行启动 t_minus 函数！

解决方案

var timer = 5,

el = document.getElementById('countdown');
$('#hulk').click(function t_minus() {
'use strict';
el.innerHTML = timer--;
if (timer >= 0) {
    setTimeout(function () {
    t_minus();
    }, 1000);
} else {
    window.location.replace("/");
}
});

另请阅读如何使用 CSS 隐藏元素

Answer 3

利用

$('#countdown').show()

在点击功能内。