日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

前端實現加載完畢之前loading提示效果

作者：小徐敲java 更新時間： 2022-08-28 編程語言

1：按鈕控制自動加載和取消模擬方法

<!DOCTYPE html>
<html lang="en">

<head>
    <title>按鈕方法</title>
    <meta charset="utf-8"/>
    <script src="http://code.jquery.com/jquery-1.6.min.js"></script>
</head>
<style>
    #pageloading {
        position: fixed;
        _position: absolute;
        top: 40%;
        right: 50%;
        width: 20%;
        padding: 2px;
        text-align: center;
        /*background: #c44;*/
        color: #fff;
        z-index: 999;
    }
</style>
<body>
<!-- logo/工具 -->
<div style="border: 1px solid red;">
    <input id="start" value="開始" type="button" onclick="start()">
    <button id="stop" onclick="stop()">停止</button>
</div>
<div id="pageloading" style="display: none" ><img src="動態加載圖片路徑"/></div>
</body>
<script>
    function start() {
        $("#pageloading").attr("style","display:block;");
    }

    $("#stop").click(function () {
        $("#pageloading").attr("style","display:none;");
    })

</script>
</html>

2：通過定時3秒后自動取消加載

<!DOCTYPE html>
<html lang="en">

<head>
    <title>按鈕方法</title>
    <meta charset="utf-8"/>
    <script src="http://code.jquery.com/jquery-1.6.min.js"></script>
</head>
<style>
    #pageloading {
        position: fixed;
        _position: absolute;
        top: 40%;
        right: 50%;
        width: 20%;
        padding: 2px;
        text-align: center;
        /*background: #c44;*/
        color: #fff;
        z-index: 999;
    }
</style>
<body>
<!-- logo/工具 -->
<div style="border: 1px solid red;">
    <input id="start" value="定時加載" type="button" onclick="start()">

</div>
<div id="pageloading" style="display: none" ><img src="動態加載圖片路徑"/></div>
</body>
<script>

    function start() {
        $("#pageloading").attr("style","display:block;");
        setTimeout(' $("#pageloading").attr("style","display:none;")',3000)
    }


</script>
</html>

3：文字加載動態效果

<!DOCTYPE html>
<html lang="en">

<head>
    <title>按鈕方法</title>
    <meta charset="utf-8"/>
    <script src="http://code.jquery.com/jquery-1.6.min.js"></script>
</head>
<style>
    #pageloading {
        position: fixed;
        _position: absolute;
        top: 40%;
        right: 50%;
        width: 20%;
        text-align: center;
        z-index: 999;
    }
</style>
<body>
<!-- logo/工具 -->
<div style="border: 1px solid red;">
    <input id="start" value="開始加載" type="button" onclick="start()">
    <input id="start" value="停止加載" type="button" onclick="stop()">

</div>
<div id="pageloading" style="display: none" ><p>數據加載中<span class="id_loaddian"></span></p></div>
</body>
<script>

    var dian=0;
    var  t;//定義定時器id
    function start() {
        id_loaddian();
        $("#pageloading").attr("style","display: block")
        function id_loaddian(){
            t=setTimeout(function() {
                if (dian>=3){
                    $('.id_loaddian').text('');
                    dian=0;
                }else{
                    dian++;
                    $('.id_loaddian').text($('.id_loaddian').text()+' ●');
                }
                id_loaddian();
            }, 500);
        }
    }

    function stop() {
        clearTimeout(t);//關閉定時器
        $("#pageloading").attr("style","display: none");

    }
</script>
</html>

4：知識補充

$(“#demo”).attr(“style”,“pointer-events: none;”);禁用所用操作事件
$(“#demo”).attr(“style”,“pointer-events: anto;”);操作事件默認

<script>

//一.標簽的隱藏和顯示方法
$("#id").show()    //表示display:block, 
$("#id").hide()      //表示display:none;

$("#demo").attr("style","display:none;");  //隱藏div
$("#demo").attr("style","display:block;");  //顯示div

$("#demo").css("display","none");    //隱藏div
$("#demo").css("display","block");    //顯示div

//二.jquery判斷元素是否隱藏
var display =$('#id').css('display');
if(display == 'none'){
   alert("隱藏的！");
}

//三.添加和刪除標簽class
$("#demo").addClass("btn");    //添加class
$("#demo").removeClass("btn");    //刪除class


</script>

5：原生js加載等待框loading動畫

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/shiyueGG/pxmu@1.0.6/pxmu.min.js"></script>
<script>
//彈出加載框
pxmu.loading('正在加載');

//彈出提示框
pxmu.toast({
    msg: '操作成功', //內容 不能為空
    time: 2500, //停留時間 默認2500毫秒
    bg: 'rgba(0, 0, 0, 0.86)', //背景顏色 默認黑色
    color: '#fff', //文字顏色 默認白色
});
</script>

原文鏈接：https://blog.csdn.net/qq_19891197/article/details/126431339

欄目分類
最近更新