JQ片段改为JS原生写法

5 months ago · 0cfe2040e7
--- a/index.html
+++ b/index.html
@ -2,17 +2,20 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <title>页面加载进度效果</title>
    <link rel="stylesheet" href="src/root.css">
    <link rel="stylesheet" href="src/pace.css">
    <link rel="stylesheet" href="src/preloader.css">
    <link rel="stylesheet" href="src/loading.css">
    <link rel="stylesheet" href="src/index.css">

 </head>
 <body>

 <!-- LOGO -->
 <div class="loading">
 <div id="loading">
    <span>网</span>
    <span>塔</span>
    <span>科</span>
@ -22,32 +25,48 @@
 <!-- 屏幕 -->
 <div id="preloader"></div>

 <script src="src/jquery-3.6.0.js"></script>
 <!-- 处理JQ3.0版本兼容 -->
 <script src="src/jquery-migrate-3.4.0.min.js"></script>
 <!-- 页面加载进度 -->
 <script src="src/pace.js"></script>
 <!-- <script src="src/pacejs.js"></script> -->
 <script>

    // 延时看效果 time = ？秒
    $.get("http://wtkj.qiyejianzhan.wang/dtest.php?time=3", function (data) {
        console.log(data);
    });

    // 页面加载进度条配置
    paceOptions = {
        ajax: true,
        document: true,
        trackWebSockets: false,
        eventLag: false
    };

    // 网页加载结束后执行
    Pace.on("done", function () {
        console.log('paceDone')
        $('#preloader').addClass("isdone");
        $('.loading').addClass("isdone");
        document.getElementById('preloader').classList.add("isdone");
        document.getElementById('loading').classList.add("isdone");
    });

    // 延时看效果 time = ？秒
    // 第一步： 获得XMLHttpRequest对象
    var ajax = new XMLHttpRequest();
    // 第二步： 设置状态监听函数
    ajax.onreadystatechange = function () {
        console.log(ajax.readyState);
        console.log(ajax.status);
        // 第五步：在监听函数中，判断readyState=4 && status=200表示请求成功
        if (ajax.readyState === 4 && ajax.status === 200) {
            // 第六步： 使用responseText、responseXML接受响应数据，并使用原生JS操作DOM进行显示
            console.log(ajax.responseText);
            // console.log(ajax.responseXML);// 返回不是XML，显示null
            // console.log(JSON.parse(ajax.responseText));
            // console.log(eval("(" + ajax.responseText + ")"));
        }
    }
    // 第三步： open一个链接
    // ajax.open("GET", "http://wtkj.qiyejianzhan.wang/dtest.php?time=5", false);//true异步请求，false同步

    // 第四步： send一个请求。 可以发送对象和字符串，不需要传递数据发送null
    // ajax.send(null);

 </script>
 </body>
 </html>
--- a/src/loading.css
+++ b/src/loading.css
@ -1,4 +1,4 @@
 .loading {
 #loading {
    position: fixed;
    left: 50%;
    top: calc(50% - 40px);
@ -13,7 +13,7 @@
    color: #ffffff;
 }

 .loading.isdone {
 #loading.isdone {
    top: 50%;
    opacity: 0;
    -webkit-transition: all .8s;
@ -24,42 +24,42 @@
    transition-delay: .5s;
 }

 .loading span {
 #loading span {
    -webkit-animation: loading 1.4s infinite alternate;
    animation: loading 1.4s infinite alternate;
 }

 .loading span:nth-child(1) {
 #loading span:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
 }

 .loading span:nth-child(2) {
 #loading span:nth-child(2) {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
 }

 .loading span:nth-child(3) {
 #loading span:nth-child(3) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
 }

 .loading span:nth-child(4) {
 #loading span:nth-child(4) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
 }

 .loading span:nth-child(5) {
 #loading span:nth-child(5) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
 }

 .loading span:nth-child(6) {
 #loading span:nth-child(6) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
 }

 .loading span:nth-child(7) {
 #loading span:nth-child(7) {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
 }
--- a/src/pace.js
+++ b/src/pace.js
@ -38,6 +38,8 @@
            };
        };


    // 默认配置
    defaultOptions = {
        className: '',
        catchupTime: 100,
@ -71,6 +73,7 @@
        return (_ref = typeof performance !== "undefined" && performance !== null ? typeof performance.now === "function" ? performance.now() : void 0 : void 0) != null ? _ref : +(new Date);
    };

    // 动画
    requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

    cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;