html 等待界面

最新推荐文章于 2022-06-04 18:52:14 发布

Coding-lover

最新推荐文章于 2022-06-04 18:52:14 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： xhtml

本文链接：https://blog.youkuaiyun.com/coslay/article/details/44172073

xhtml 专栏收录该内容

50 篇文章

订阅专栏

本文介绍了如何使用HTML创建一个简洁而有效的等待界面，展示加载过程，确保用户体验流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="form_submit"><input type="button" id="message_submit" value="发布消息" onclick="sendOSMessageForAll()"/></div>

<!--等待div--> 
<div id="pop" style="z-index:1;background-color:#CCCCCC;filter: alpha(opacity=80);width:100%;height:100%;position:absolute;left:0px;top:0px;display:none"> 
	<!-- <div style="text-align:center;height:100%;line-height:250px;overflow:hidden;">发送中,请稍等...</div> -->
</div>
<div id="loading" class="loading" style="display:none;">发送中,请稍等...</div>

<script type="text/javascript">
<!--打开或关闭等待div-->
function show(o1,o2,open)
{ 
	var o1 = document.getElementById(o1); 
	var o2 = document.getElementById(o2);
	o1.style.width = document.documentElement.scrollWidth; 
	o1.style.height = document.documentElement.scrollHeight
	if(open){
		o1.style.display = "block"; 
		o2.style.display = "block"; 
	}else{
		o1.style.display = "none";  
	}
}

function showLoading(open)
{ 
	var dialog = document.getElementById("loading"); 
	if(open){
		dialog.style.display = "block"; 
	}else{
		dialog.style.display = "none"; 
	}
	return true;
}

function sendOSMessageForAll() 
{	
	show('pop','message_form',true);
	showLoading(true);
	$.ajax({
		url : 'android/createOSMessage.action',
        data:{senderId:$("#senderId").attr("value"),content:$("#content").attr("value"),receiver:$("#receiver").attr("value")},
        cache : false, 
        async : true,
        type : "POST",
        dataType : 'json',
        beforeSend:function(){ 
        	show('pop','message_form',true);
        	showLoading(true);
        },
        success : function (result)
        {
        	if (result != null) 
	    	{
	    		if(result.status == "0")
	    		{
	            	show('pop','message_form',false);
	    			showLoading(false);
	    			alert("发送成功！"); 
	    		}
	    		else
	    		{
	            	show('pop','message_form',false);
	    			showLoading(false);
	    			alert("发送失败！"); 
	    		}
	    	}
        },
    	error:function(msg)
        {
        	show('pop','message_form',false);
			showLoading(false);
			alert("发送错误！"); 
        },
        complete:function(){

        } 
	});
}
</script>

效果如图：