zoukankan      html  css  js  c++  java
  • 判断是否微信,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;
    105px;
    height: 105px;
    background: url(images/1.png) no-repeat center center;
    background-size: contain;
    }
    .logo-detail{
    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;
    300px;
    height: 115px;
    }
    .weixin{
    float: right;
    115px;
    height: 115px;
    background: url(images/weixin.png) no-repeat center center;
    background-size: contain;
    }
    .down-d{
    float: left;
    margin-top: 5px;
    165px;
    height: 100px;
    }
    .ios-and{
    display: block;
    padding-left: 40px;
    box-sizing: border-box;
    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;
    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;
    84%;
    height: 50%;
    }
    .down-weixin-pic {
    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;
    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;
    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>
  • 相关阅读:
    Linux驱动下的platform总线架构(转)
    一生中很值得看的30个故事之一断箭
    学习嵌入式LINUX系统的笔记和体会
    DIY:自己动手做一个迷你 Linux 系统
    linux里面i386 i686 i486 i586代表什么?是什么意思
    菜鸟编译Linux内核
    LINUX核心重编与升级
    ARM 内核移植中常见的错误
    Linux 2.6.19.x 内核编译配置选项简介
    基于S3C2410平台移植Linux 2.6内核指南
  • 原文地址:https://www.cnblogs.com/GoodPingGe/p/4431007.html
Copyright © 2011-2022 走看看