微信下载app，提示右上角打开遮罩HTML代码

最新推荐文章于 2020-08-06 16:03:39 发布

@嵌入式爱好者@

最新推荐文章于 2020-08-06 16:03:39 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：编程语言文章标签：遮罩微信下载

本文链接：https://blog.youkuaiyun.com/qq_35105528/article/details/90110815

编程语言专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的APP下载页面实现方式，包含HTML、CSS和JavaScript代码，用于指导安卓用户下载特定应用，并通过判断是否为微信环境来调整显示效果。

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


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<title>APP下载</title>
</head> 
<body>
	<style type="text/css">
	*{margin:0; padding:0;}
	img{max-width: 100%; height: 100%;}
	</style>
	<div>
		<p style="text-align: center">
		<a href="http://www.xxxxx.com/down/com.sstx.medic.apk">
			<br/><br/><img src="Android.jpg" width="150" height="150">
			<br/><font size="5">点击下载</font>
			<br/><font size="2">目前仅支持安卓用户，其他用户敬请期待哦</font>
		</a>
		</p>
	</div>
	<script type="text/javascript">
		function is_weixin() {
		    var ua = navigator.userAgent.toLowerCase();
		    if (ua.match(/MicroMessenger/i) == "micromessenger") {
		        return true;
		    } else {
		        return false;
		    }
		}
		var isWeixin = is_weixin();
		var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
		function loadHtml(){
			var div = document.createElement('div');
			div.id = 'weixin-tip';
			div.innerHTML = '<p><img src="point.png"/></p>';			//遮罩图片
			document.body.appendChild(div);
		}
					
		function loadStyleText(cssText) {
	        var style = document.createElement('style');
	        style.rel = 'stylesheet';
	        style.type = 'text/css';
	        try {
	            style.appendChild(document.createTextNode(cssText));
	        } catch (e) {
	            style.styleSheet.cssText = cssText; //ie9以下
	        }
            var head=document.getElementsByTagName("head")[0]; //head标签之间加上style样式
            head.appendChild(style); 
	    }
	    var cssText = "#weixin-tip{position: fixed; left:0; top:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80); width: 100%; height:100%; z-index: 100;} #weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}";
		if(isWeixin){
			loadHtml();
			loadStyleText(cssText);
		}
	</script>
</body>
</html>