手寫H5/web loading效果和消息提示層

時間 2019-11-12

標籤手寫 h5 web loading 效果消息提示欄目 HTML 简体版

原文原文鏈接

衆所周知，在前端開發中，loading效果和消息提示層是常常用到的，固然這裏有不少成熟的前端提示層插件，例如：layerjavascript

這裏咱們本身動手寫一下，話很少說，上代碼：css

準備rem.js，用來將rem和px互轉，代碼以下：html

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=750){
                docEl.style.fontSize = '100px';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

準備css樣式，showMsg.css：前端

.opacityDiv { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); z-index: 99; }
.popBox { border-radius: 0.1rem; position: fixed; top: 50%; left: 50%; margin-left: -2.5rem; z-index: 101; transform: translateY(-50%); -webkit-transform: translateY(-50%); background: #fff; width: 5rem; background: #fff; padding: 0.2rem 0 0 0; }
.pop_title { text-align: center; font-size: 0.24rem; color: #333; }
.popBox_content { padding: 0.2rem; }
.ptPad{
	padding: 0.3rem 0 0.5rem;
}
.btn_common{ background: none; color: #999; font-size: 0.24rem; padding: 0.18rem 0; }
.btn_common { font-size: 0.28rem; color: #fff; text-align: center; display: block; border-radius: 0.1rem; background: #00c622; padding: 0.16rem 0; }
.btn_common { background: none; color: #999; font-size: 0.24rem; padding: 0.18rem 0; }
.noMsg {
    text-align: center;
    font-size: 0.28rem;
    padding: 0.4rem 0;
    color: #666;
}
.app_loading { position: fixed; top: 50%; left: 50%; text-align: center; z-index: 1002; padding-top: 0.16rem; background: rgba(0,0,0,.7); border-radius: 0.1rem; margin-left: -0.8rem; margin-top: -0.8rem; width: 1.6rem; height: 1.6rem; }
.app_loading b { display: block; font-size: 0.18rem; letter-spacing: 0.01rem; font-weight: normal; color: #fff;padding-top:0.04rem; }
.app_loading img { max-width: 100%; }

html內容：java

<!DOCTYPE html>
<html>
<head>
<title></title>
<script
  src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="rem.js"></script>
<link rel="stylesheet" type="text/css" href="showMsg.css" />

</head>
<body>
		<input type="button" value="loading" onclick="loading()"/>
        <input type="button" value="消息提醒"onclick="showMsg('提示','提交成功',1)"/>
		
		 <!--loading-->
		<div class="app_loading hideObj" style="display:none">
			<img src="loading.gif" />
			<b>加載中</b>
		</div>

		<!--透明背景-->
		<div class="opacityDiv" style="display: none;"></div>

		<!-- 消息提醒 -->
		<div class="popBox" id="showMsg" style="display: none;">
		<h3 id="titleMsg" class="pop_title"></h3>
		<div class="popBox_content ptPad">
			<h3 id="contentMsg" class="pop_title"></h3>
		</div>
		
		</div>

	
<script type="text/javascript" language="javascript">

    function loading(){
        $('.opacityDiv,.app_loading').show().delay(3000).fadeOut();
    }
	
	//消息提醒
	function showMsg(title,content,type){

		$("#titleMsg").html(title);
		$("#contentMsg").html(content);
		if(type==1){
			$("#showMsg #sureMsg").remove();
			var html="<div id=\"sureMsg\" class=\"flex_btn flex_pop\">"+
			"<a href=\"javascript:;\" class=\"btn_common\" onclick=\"hideMsg()\">肯定</a>"
			"</div>";
			$("#showMsg").append(html);
		}
		$('.opacityDiv,#showMsg').show(); 
		
	}
    
    
	
	//消息提醒
	function showMsg2(title,content,type,url){
		$("#titleMsg").html(title);
		$("#contentMsg").html(content);
		if(type==1){
			$("#showMsg #sureMsg").remove();
			var html="<div id=\"sureMsg\" class=\"flex_btn flex_pop\">"+
			"<a href=\""+url+";\" class=\"btn_common\" onclick=\"hideMsg()\">肯定</a>"
			"</div>";
			$("#showMsg").append(html);
		}
		$('.opacityDiv,#showMsg').show(); 
		
	}
	
	
	function hideMsg(){
		$('.opacityDiv,#showMsg').hide(); 
	}
	
	
</script>
</body>
</html>

固然html代碼裏面的js方法其實能夠提出來放到一個js文件裏面去，這裏我偷懶了..jquery

看看最後效果吧：web

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。