javascript/jquery 简单的页面定时器自动跳转登陆界面

登录成功页面 success.html

// js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册成功!</title>
    <script type="text/javascript">
        window.onload = function() {
        var time = 5;
        var secondEle = document.getElementById("second");
        setIntervar(function() {
            secondEle.innerHTML = time;
            time--;
            if (time == 0) {
                clearIntervar(timer);
                window.location.href = "login.html";// 跳转到登录页面
            }
        },1000);
    </script>
    </head>
<body>
<p>
    恭喜!注册成功,<span style="font-size: 30px;color: blueviolet;" id="second">5</span>秒后返回登录界面...<a href="login.html">就现在</a>
</p>
</body>
</html>
// jquery
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册成功!</title>
    <script src="classes/js/jquery-2.1.0.js"></script>
    <script src="classes/js/jquery.timer.js"></script>
    <script>
        $(function () {
            var time = 5;
            // 使用 jquery.timer插件方法
            $("#second").everyTime('1s',function () {
                this.innerHTML = time;
                if (time == 0) {
                    // 三种方法
                    $(window).attr('location','login.html');
                    //$(location).attr('href','login.html');
                    //$(location).prop('href','login.html');
                }
                time--;
            },6);
        });

    </script>
</head>
<body>
<p>
    恭喜!注册成功,<span style="font-size: 30px;color: blueviolet;" id="second">5</span>秒后返回登录界面...<a href="login.html">就现在</a>
</p>
</body>
</html>

jquery.timer.js插件

/**
 * jQuery.timers - Timer abstractions for jQuery
 * Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
 * Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
 * Date: 2009/02/08
 *
 * @author Blair Mitchelmore
 * @version 1.1.2
 *
 **/

jQuery.fn.extend({
    everyTime: function(interval, label, fn, times, belay) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, times, belay);
        });
    },
    oneTime: function(interval, label, fn) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, 1);
        });
    },
    stopTime: function(label, fn) {
        return this.each(function() {
            jQuery.timer.remove(this, label, fn);
        });
    }
});

jQuery.event.special

jQuery.extend({
    timer: {
        global: [],
        guid: 1,
        dataKey: "jQuery.timer",
        regex: /^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,
        powers: {
            // Yeah this is major overkill...
            'ms': 1,
            'cs': 10,
            'ds': 100,
            's': 1000,
            'das': 10000,
            'hs': 100000,
            'ks': 1000000
        },
        timeParse: function(value) {
            if (value == undefined || value == null)
                return null;
            var result = this.regex.exec(jQuery.trim(value.toString()));
            if (result[2]) {
                var num = parseFloat(result[1]);
                var mult = this.powers[result[2]] || 1;
                return num * mult;
            } else {
                return value;
            }
        },
        add: function(element, interval, label, fn, times, belay) {
            var counter = 0;

            if (jQuery.isFunction(label)) {
                if (!times)
                    times = fn;
                fn = label;
                label = interval;
            }

            interval = jQuery.timer.timeParse(interval);

            if (typeof interval != 'number' || isNaN(interval) || interval <= 0)
                return;

            if (times && times.constructor != Number) {
                belay = !!times;
                times = 0;
            }

            times = times || 0;
            belay = belay || false;

            var timers = jQuery.data(element, this.dataKey) || jQuery.data(element, this.dataKey, {});

            if (!timers[label])
                timers[label] = {};

            fn.timerID = fn.timerID || this.guid++;

            var handler = function() {
                if (belay && this.inProgress)
                    return;
                this.inProgress = true;
                if ((++counter > times && times !== 0) || fn.call(element, counter) === false)
                    jQuery.timer.remove(element, label, fn);
                this.inProgress = false;
            };

            handler.timerID = fn.timerID;

            if (!timers[label][fn.timerID])
                timers[label][fn.timerID] = window.setInterval(handler,interval);

            this.global.push( element );

        },
        remove: function(element, label, fn) {
            var timers = jQuery.data(element, this.dataKey), ret;

            if ( timers ) {

                if (!label) {
                    for ( label in timers )
                        this.remove(element, label, fn);
                } else if ( timers[label] ) {
                    if ( fn ) {
                        if ( fn.timerID ) {
                            window.clearInterval(timers[label][fn.timerID]);
                            delete timers[label][fn.timerID];
                        }
                    } else {
                        for ( var fn in timers[label] ) {
                            window.clearInterval(timers[label][fn]);
                            delete timers[label][fn];
                        }
                    }

                    for ( ret in timers[label] ) break;
                    if ( !ret ) {
                        ret = null;
                        delete timers[label];
                    }
                }

                for ( ret in timers ) break;
                if ( !ret )
                    jQuery.removeData(element, this.dataKey);
            }
        }
    }
});

jQuery(window).bind("unload", function() {
    jQuery.each(jQuery.timer.global, function(index, item) {
        jQuery.timer.remove(item);
    });
});

最后是 login.html 登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/WebDemo/login" method="post">
    用户名:<input type="text" name="username"><br />
    密码: <input type="password" name="password"><br />
    <input type="submit" value="登录"><br />
</form>
</body>
</html>

小白学习,用于记录。请多指教~

猜你喜欢

转载自blog.csdn.net/qq_43581949/article/details/88783271