找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发页面计时跳转

2019-01-22 分类：教程 阅读(637) 评论(0)
前端开发是怎么分工的
前端的开发总结文档怎么写
前端怎么和后台如何合作开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <meta
            name=”viewport”
            content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”
        />
        <title>loading</title>
        <style>
            body {
                background-color: #f5f5f5;
                padding: 0;
                margin: 0;
            }
            .loading-box {
                background-color: #fff;
                padding: 20px 0 50px;
            }
            .load-tit {
                height: 44px;
                line-height: 44px;
                text-align: center;
            }
            .load-container {
                margin: 0 auto;
                width: 100px;
                height: 100px;
                position: relative;
            }
            .loader {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background: #0dcecb;
                background: -moz-linear-gradient(
                    left,
                    #0dcecb 10%,
                    rgba(255, 255, 255, 0) 90%
                );
                background: -webkit-linear-gradient(
                    left,
                    #0dcecb 10%,
                    rgba(255, 255, 255, 0) 90%
                );
                background: -o-linear-gradient(
                    left,
                    #0dcecb 10%,
                    rgba(255, 255, 255, 0) 90%
                );
                background: -ms-linear-gradient(
                    left,
                    #0dcecb 10%,
                    rgba(255, 255, 255, 0) 90%
                );
                background: linear-gradient(
                    to right,
                    #0dcecb 10%,
                    rgba(255, 255, 255, 0) 90%
                );
                position: relative;
                -webkit-animation: loading 1.5s infinite linear;
                animation: loading 1.5s infinite linear;
            }
            .loader:before {
                content: ”;
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                height: 50%;
                background: #0dcecb;
                border-radius: 200px 200px 0 0;
            }
            .loader:after {
                content: ”;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                background: #fff;
                width: 95%;
                height: 95%;
                border-radius: 50%;
            }
            .load-time {
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                line-height: 100px;
                text-align: center;
            }
            .load-time span {
                font-size: 32px;
            }
            @-webkit-keyframes loading {
                0% {
                    -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }
            @keyframes loading {
                0% {
                    -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }
            .load-tip {
                padding: 16px;
            }
            .load-tip div {
                color: #999;
                font-size: 14px;
            }
            .load-tip p {
                color: #fc0d1b;
                margin: 0;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div class=”loading-box”>
            <div class=”load-tit”>正在等待对方返回结果</div>
            <div class=”load-container”>
                <div class=”loader”></div>
                <div class=”load-time”><span></span>秒</div>
            </div>
        </div>
        <div class=”load-tip”>
            <div>温馨提示：</div>
            <p>结果返回前，请不要重复转账</p>
        </div>
        <script>
            countDown(‘.load-time span’, 5, function() {
                location.href = ‘#’
            })
            function countDown(ele, time, fn) {
                var text = document.querySelector(ele)
                text.innerHTML = time
                var count = setInterval(function() {
                    if (time– > 0) {
                        text.innerHTML = time
                    } else {
                        fn()
                        clearInterval(count)
                    }
                }, 1000)
            }
        </script>
    </body>
</html>
用苹果笔记本搞前端开发怎么样
前端开发怎么进行可视化
前端开发周志怎么写
赞(0)
前端开发者 » 前端开发页面计时跳转
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论