zoukankan      html  css  js  c++  java
  • css3 ajax加载进度线

    最近想了想ajax加载时的进项,便着手写了这个,我想css3的支持度已经够了

    <button onclick="start()">button</button>
    <p id="string"></p>
    body{
        width: 500px
    }
    #string {
        width: 0%;
        height: 2px;
        width: 100%;
        margin: 0;
        background-color: #1592ef;
    }
    @keyframes loading {
        0% {
            width: 0%;
        }
        10% {
            width: 90%;
        }
        100%{
            width: 100%;
        }
    
    }
    @keyframes finish{
        from{
            width: auto;
        }
        to {
            width: 100%;
        }
    }
    function start() {
        var aj = new XMLHttpRequest();
        aj.open("get", './my.php');
        var obj = document.getElementById('string');
    
        obj.style.animation= 'loading 10s';
        
        aj.onreadystatechange = function() {
    
            if (aj.readyState == 4 ) {
                obj.style.animation = 'finish 0.5s';
                
                if( aj.status == 200){
                    console.log(aj.responseText);
                }
                
            }
    
    
        }
    
        aj.send();
    
    }
  • 相关阅读:
    输出流
    异常处理
    异常限制
    多个受控异常
    跟踪异常传播
    动手动脑练习2
    动手动脑练习
    文件总结
    程序员修炼之道3
    Shell教程 之printf命令
  • 原文地址:https://www.cnblogs.com/Grewer/p/7854173.html
Copyright © 2011-2022 走看看