1. 程式人生 > >前端註冊成功跳轉等待頁面例項(包含Html,Css,JavaScript)

前端註冊成功跳轉等待頁面例項(包含Html,Css,JavaScript)

Html程式碼 

<div class="container-fluid container-fluid-bg">
    <div class="row">
        <nav class="header-top">
            <img src="../../img/logo.png" class="logo" id="register-success-logo">
            <div  style="float: right;display: none;" id="count-down">
                <span style="padding-right: 30px"><label id="timedown">3</label>秒後將跳轉至主頁</span><!--<button class="btn btn-primary btn-sm" data-toggle="modal"
                                                                           data-target="#my-modal" onclick="restoreLogin()">登入</button>-->
            </div>
        </nav>
    </div>
</div>
<div class="container-fluid main">
    <div class="row">
        <div class="body">
            <div>
                <img class="img" src="../../img/success.png" alt="註冊成功">
            </div>
            <div>
                <h3 class="body-h">註冊成功!</h3>
            </div>
        </div>
    </div>
</div>

Javascript程式碼 

$(function(){
    var obj = getConfigInfomation();
    getItem(obj);
    function getItem(obj){
        $('#count-down')[0].style.display = 'block';
        if( obj["2"] != ""){//網站首頁logo
            //returnValue = data[index].imageurl;
            $("#register-success-logo").attr("src",obj["2"]);
            $("#register-success-logo").css("background-image",null);
        }
        if( obj["5"] != ""){//網站圖示
            //returnValue = data[index].imageurl;
            var head = document.getElementsByTagName('head');
            var link = document.createElement('link');
            link.href = obj["5"];
            link.rel = 'shortcut icon';
            var t_type = '';
            if(obj["5"]){
                if( obj["5"].substr(obj["5"].lastIndexOf("."),obj["5"].length-1) == 'icon'){
                    t_type = 'image/x-icon';
                }else{
                    t_type = 'image/'+obj["5"].substr(obj["5"].lastIndexOf("."),obj["5"].length-1);
                }
            }
            link.type = t_type;
            $.each(head,function(index,item){
                head[index].appendChild(link);
            });
        }
        let count = 3;
        setInterval(function () {
            count--;
            $('#timedown').html(count);
        },1000);
        //三秒後跳轉新頁面
        window.setTimeout("window.location='../index.html?privacy='+1",3000);
        restoreLogin();
    }
})

 Css樣式

.body{
    background: #ffffff;
    width: 100%;
    height: 100%;
    margin-top: 1%;
    text-align: center;
}
.img{
    padding-top: 10%;
}
.body-h{
    letter-spacing: 20px;
    font-size: 40px;
    margin-left: 6%
}