判断是否微信，qq等登陆。进去不同的页面下载
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>安得直通宝下载</title>
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
body {
height: 100%;
padding: 0;
margin: 0;
font-family: "simHei";
font-size: 1em;
background-color: #0081db;
color: #fff;
-webkit-overflow-scroll: touch;
}
* {
font-family: "simHei" !important;
}
a {
text-decoration: none;
cursor: pointer;
color: #fff;
}
.logo{
margin: 30% auto 0;
width: 105px;
height: 105px;
background: url(images/1.png) no-repeat center center;
background-size: contain;
}
.logo-detail{
width: 100%;
margin: 14px auto 0;
font-size: 30px;
color: #fff;
text-align: center;
}
.helper{
margin-top: 10px;
font-size: 18px;
color: #fff;
text-align: center;
}
.down{
margin: 50px auto 0;
width: 300px;
height: 115px;
}
.weixin{
float: right;
width: 115px;
height: 115px;
background: url(images/weixin.png) no-repeat center center;
background-size: contain;
}
.down-d{
float: left;
margin-top: 5px;
width: 165px;
height: 100px;
}
.ios-and{
display: block;
padding-left: 40px;
box-sizing: border-box;
width: 160px;
height: 43px;
line-height: 43px;
font-size: 12px;
border:1px solid #fff;
border-radius: 6px;
}
.and{
background: url(images/2.png) no-repeat 7% center;
background-size: 25px;
}
.ios{
margin-top: 15px;
background: url(images/3.png) no-repeat 7% center;
background-size: 25px;
}
.down-weixin-mask {
position: fixed;
top: 0;
left: 0;
z-index: 96;
width: 100%;
height: 100%;
background-color: #000;
-moz-opacity:.65;
opacity:.65;
filter: alpha(opacity=65);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=65);
}
.down-weixin-tip {
position: absolute;
top: 84px;
left: 8%;
z-index: 98;
width: 84%;
height: 50%;
}
.down-weixin-pic {
width: 100%;
height: 100%;
background: url(images/weixin_tip.png) no-repeat;
background-size: 100% auto;
}
.down-weixin-arrow {
position: absolute;
top: 0;
right: 21px;
z-index: 97;
width: 62px;
height: 86px;
background: url(images/weixin_tip_arrow.png) no-repeat center center;
background-size: cover;
}
.down-weixin-close {
position: absolute;
top: 92px;
right: 40px;
z-index: 99;
width: 24px;
height: 24px;
background: url(images/weixin_tip_close.png) no-repeat center center;
background-size: cover;
}
#close-all{
display: none;
}
</style>
</head>
<body>
<div class="logo"></div>
<div class="logo-detail">安得直通宝</div>
<p class="helper">最专业的物流助手</p>
<div class="down">
<div class="down-d">
<a class="and ios-and" onclick="showWeixinTip(true)">Android公测版下载</a>
<a class="ios ios-and" onclick="showWeixinTip(false)">ios公测版下载</a>
</div>
<div class="weixin"></div>
</div>
<div id="close-all">
<div class="down-weixin-tip">
<div class="down-weixin-pic"></div>
</div>
<div class="down-weixin-arrow"></div>
<div class="down-weixin-close" onclick="oClose()"></div>
<div class="down-weixin-mask"></div>
</div>
<script type="text/javascript">
var oClose = document.getElementsByClassName('down-weixin-close'),
oMask = document.getElementById('close-all');
var isWeiXin = function () {
var ua = navigator.userAgent.toLowerCase();
var isWeichat = false ;
if((/micromessenger/.test(ua)) ? true : false && (/android/.test(ua)) ? true : false){
isWeichat = true ;
}
if((/qq/.test(ua)) ? true : false && (/android/.test(ua)) ? true : false){
isWeichat = true ;
}
return isWeichat ;
};
var openIsWeixin = isWeiXin();
var notIos = !/ios/.test(navigator.userAgent.toLowerCase());
/*openIsWeixin 和 notIos 都为true才显示*/
if(openIsWeixin && notIos){
oMask.style.display = 'block';
};
console.log(openIsWeixin);
var showWeixinTip = function(isAndroid){
alert(isAndroid);
openIsWeixin = isWeiXin();
if(!openIsWeixin){
setTimeout(function(){
var url = isAndroid ? "http://map.midea.com/map/mam/apps/download/com.midea.annto/android?appKey=73ed94969d70f377f4a3ea4fc10acd55" : "https://map.midea.com/map/mam/apps/download/com.midea.annto/ios?appKey=73ed94969d70f377f4a3ea4fc10acd55";
window.open(url);
}, 1000);
} else if (openIsWeixin && !notIos) {
setTimeout(function(){
var url = "https://map.midea.com/map/mam/apps/download/com.midea.annto/ios?appKey=73ed94969d70f377f4a3ea4fc10acd55";
window.open(url);
}, 1000);
}
};
var oClose = function () {
oMask.style.display = 'none';
openIsWeixin = false;
};
/* var closeWeixinTip = function(){
openIsWeixin = false;
};*/
</script>
</body>
</html>
判断是否微信，qq等登陆。进去不同的页面下载的更多相关文章
- 判断浏览器环境(QQ,微信,安卓设备,IOS设备,PC微信环境,移动设备)
判断浏览器环境(QQ,微信,安卓设备,IOS设备,PC微信环境,移动设备) // ===== 判断浏览器环境 ===== // // 判断是否是QQ环境 function isQQ() { retur ...
- 分享一下,PHP实现第四方QQ微信扫码登陆,不接入qq互联以及微信开发者平台就可以实现用户对接鹅厂,phpQQ微信扫码登陆
自己抓的QQ包以及整合了网上一些已经封装好了的代码具体如下:QQ: <?php class QQ extends Curl_Api { //获取登录验证码 public function QRc ...
- C#网站实现QQ第三方登陆# C#快速开发教程
C#网站实现QQ第三方登陆 说起在网站上面可以直接使用QQ登录功能大家并不陌生.但翻其官方提供的SDK包中却没有C#方向的. 但是我们有个牛人叫张善友,做了一个民间SDK.下面我们就是用他所写的SDK ...
- 微信QQ打开网页时提示用浏览器打开
微信QQ打开网页时提示用浏览器打开 一,需求分析 1.1,使用微信或QQ打开网址时,无法在微信或QQ内打开常用下载软件,手机APP等.故此需要在微信qq里提示 二,功能实现 2.1 html实现 &l ...
- 【javascript】判断是否微信浏览器的最佳实践
根据判断UA中是否有关键字micromessenger,有的话则是微信内置浏览器 用Chrome的iPhone5模拟测试 //判断是否微信登陆 function isWeiXin() { var ua ...
- 微信登陆，微信SDK授权登陆经验分享
From:http://www.eoeandroid.com/thread-547012-1-1.html 最近因为项目需要做了微信登陆,好像也是微信最近才放出来的接口.还需要申请才能有权限实现授权. ...
- Vue3.0网页版聊天|Vue3.x+ElementPlus仿微信/QQ界面|vue3聊天实例
一.项目简介 基于vue3.x+vuex+vue-router+element-plus+v3layer+v3scroll等技术构建的仿微信web桌面端聊天实战项目Vue3-Webchat.基本上实现 ...
- Android 实现微信QQ分享以及第三方登录
集成准备 在微信开放平台创建移动应用,输入应用的信息,包括移动应用名称,移动应用简介,移动应用图片信息,点击下一步,选择Android 应用,填写信息提交审核. 获取Appkey 集成[友盟+]SDK ...
- nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId
nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...
随机推荐
- Blazor 002 : 一种开历史倒车的UI描述语言 -- Razor
Razor是一门相当怪异丑陋的标记语言,但在实际使用中却十分高效灵活.本文主要介绍了Razor是什么,以及Razor引擎的一些浅薄的背后机理. 写文章前我本想一口气把Razor的基本语法,以及Blaz ...
- 钓鱼+DNS欺骗学习笔记
钓鱼+DNS欺骗学习笔记 0x00 写在前面 原文链接: http://www.cnblogs.com/hkleak/p/5186523.html 感谢大佬无私教学 0x01 步骤如下 第一步:布置钓 ...
- Java Study two
由于前段时间再做.NET 项目没做更新,今天简单的学习java项目的新建和入门的学习 今日目标 基础语法了解 新建第一个java项目 新建第一个项目Class ->HelloWorld 运行并输 ...
- SSM(Spring+SpringMVC+MyBatis)框架整合开发流程
回忆了 Spring.SpringMVC.MyBatis 框架整合,完善一个小demo,包括基本的增删改查功能. 开发环境 IDEA MySQL 5.7 Tomcat 9 Maven 3.2.5 需要 ...
- STL基本用法的一些记录
迭代器 (set类型)::iterator 就是迭代器 迭代器可以看成stl容器内元素的指针 set 默认从小到大排序 begin() set中最小的元素的迭代器 end() set中最大的元素的迭代 ...
- JQuery Validate验证插件自定义验证消息
// 自定义验证的方法,验证通过返回true,否则返回false(会显示错误消息) jQuery.validator.addMethod; // 定义验证的消息 jQuery.validator.fo ...
- Redis 常见的性能问题都有哪些？如何解决？
Redis 常见的性能问题都有哪些?如何解决? Master写内存快照,save命令调度rdbSave函数,会阻塞主线程的工作,当快照比较大时对性能影响是非常大的,会间断性暂停服务,所以Master最 ...
- int 越界处理
在程序运行中,如果运算结果太大超出了所定义的类型,那么可能会影响整个程序的运行结果,甚至是程序出错. 因此,在编写程序时,加入越界处理就显得一起重要了. 用整型 int 来举个例子吧,int型占四个字 ...
- SCSS学习笔记（一）
SCSS的由来 SCSS就是加强版的CSS,要讲SCSS那就一定要从SASS讲起 SASS Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hamp ...
- js 获取和设置css3 属性值的实现方法
众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如:<div style="left:100px"></div> 只考虑行间样式的话 ...