zoukankan      html  css  js  c++  java
  • 判断是不是微信浏览器,如果是将弹出遮罩层提示在右上角浏览器中打开(一般用于下载东西)

    <!DOCTYPE html>
    <html lang="zh-cn">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="聚贤堂,聚贤堂官网,聚闲堂,聚闲堂官网,聚贤堂跑胡子,聚闲堂跑胡子,聚贤堂游戏,聚闲堂游戏,跑胡子,字牌">
        <meta name="description" content="聚闲堂跑胡子是针对湖南地区的地方性棋牌游戏,亦称“字牌”、“纸牌”,在我国某些地区也叫“跑胡纸”、“跑和字”、“二七十”、“煨胡子”、“棍棍”、“大贰”等。">
        <title>聚闲堂跑胡子</title>
        <!-- Bootstrap -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/css/style.css" rel="stylesheet">
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
      <style type="text/css">
      /*核心css*/
        .wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;}
        .wxtip-icon{width: 52px; height: 67px; background: url(http://img.caibaojian.com/uploads/2016/01/weixin-tip.png) no-repeat; display: block; position: absolute; right: 30px; top: 20px;}
        .wxtip-txt{padding-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}
      </style>
        <!-- top -->
        <header>
          <div class="container">
            <div class="media">
              <img class="img-responsive  col-sm-2 col-xs-4" src="assets/img/IMG_0561.jpg">
              <div class="col-sm-10 hidden-xs">
                <p>应用名称:聚闲堂跑胡子</p>
                <ul class="list-unstyled">
                  <li class="col-sm-4">应用大小:15.71MB</li>
                  <li class="col-sm-4">版本:1.0.1</li>
                  <li class="col-sm-4"></li>
                </ul>
                <p>系统支持:IOS 8.0以上,Android 2.2.x以上</p>
              </div>
              <div class="col-sm-10 visible-xs">
                <ul class="list-unstyled">
                  <li class="col-sm-4">应用名称:聚闲堂跑胡子</li>
                  <li class="col-sm-4">应用大小:15.71MB</li>
                  <li class="col-sm-4">版本:1.0.1</li>
                  <li class="col-sm-4">系统支持:IOS 8.0以上,Android 2.2.x以上</li>
                </ul>
              </div>
            </div>
          </div>
        </header>
        <!-- 游戏介绍 -->
        <div class="xx_intorduce">
          <div class="container">
            <div class="col-sm-6 col-xs-12">
                <img class="img-responsive" src="assets/img/gameIntro.png">
                <div class="xx_intrtext">
                  <p>《聚闲堂跑胡子》是一款手机棋牌类扑克牌、麻将类型游戏,内有乐山二七十、常德跑胡子、红黑点、碰胡子、桂林字牌、郴州毛胡子等多种玩法,画面精美,玩法正宗,更安全,更省流量。灵活的出牌规则,再加上丰富的玩法,使得虽然每一局的时间简短,但却又不失乐趣。</p>
                  <!-- <p>应用名称:聚闲堂跑胡子 </p>
                  <p>应用大小:15.71M</p>
                  <p>系统支持:IOS 8.0以上,Android 2.2.x以上</p> -->
                  <p>分类:棋牌游戏</p>
                  <p>语言:简体中文</p>
                  <p>更新时间:2016-12-31</p>
                  <!-- <p>版本:1.0.1</p> -->
                </div>
            </div>
            <div class="col-sm-6 col-xs-12">
              <img class="img-responsive" src="assets/img/gameFig.png">
              <div class="xx_intrtext">
                <p>【超丰富的竞技玩法】</br>全天候随时和伙伴竞技PK!看谁技高一筹,能笑到最后!</p>
                <p>【超贴近的游戏交互】</br>语音实时对讲,沟通就像面对面!</p>
                <p>【高品质的游戏体验】</br>超精美场景化的游戏界面,感受纯正的家乡味道!</p>
                <p>【超纯正的经典玩法】</br>体验最地道的家乡玩法,好友同玩千里约战,随时随地组牌局!</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 下载 -->
        <div align="center" class="container xx_donwload">
          <a id="JdownApp"><img class="img-responsive" src="assets/img/download_btn.png"></a>
        </div>
        <!-- footer -->
        <!-- <footer>
          <p>
             Copyright © 2016 聚闲堂游戏 京ICP备17006628号 | 京ICP证17006628号
          </p>
        </footer> -->
    
    
    <!-- 开始写代码 -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="assets/js/jquery-3.1.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    function doDownload(ele){
      ele.onclick=function(e){
        // 获取终端的相关信息
        var Terminal = {
            // 辨别移动终端类型
            platform : function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {
                    // android终端或者uc浏览器
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                    // 是否为iPhone或者QQHD浏览器
                    iPhone: u.indexOf('iPhone') > -1 ,
                    // 是否iPad
                    iPad: u.indexOf('iPad') > -1
                };
            }(),
            // 辨别移动终端的语言:zh-cn、en-us、ko-kr、ja-jp...
            language : (navigator.browserLanguage || navigator.language).toLowerCase()
        }
    
        // 根据不同的终端,跳转到不同的地址
        var theUrl = 'http://www.jxtgzh.com/juxiantangphz.apk';
        if(Terminal.platform.android){
            theUrl = 'http://www.jxtgzh.com/juxiantangphz.apk';
        }else if(Terminal.platform.iPhone){
            theUrl = 'https://itunes.apple.com/cn/app/jie-zou-da-shi/id1196806285?mt=8';
        }else if(Terminal.platform.iPad){
            theUrl = 'https://itunes.apple.com/cn/app/jie-zou-da-shi/id1196806285?mt=8';
        }
        location.href = theUrl;
      }
    }
    doDownload(document.getElementById('JdownApp'));
    </script>
    </body>
    </html>
    
    <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="assets/img/live_weixin.png" width="100%" alt="微信打开"/></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);  100%; height:100%; z-index: 100;} #weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}";
        if(isWeixin){
          loadHtml();
          loadStyleText(cssText);
        }
      </script>
  • 相关阅读:
    webpack配置模块的查找范围
    webpack中resolve用法
    C语言中的字符串
    bash通配符与特殊符号
    求两个字符串的最大公共子串
    linux内核编译
    数据库中使用索引来提高查询的速度
    数据库中的主键与外键
    Linux学习——命令3
    Linux学习——命令2
  • 原文地址:https://www.cnblogs.com/fkcqwq/p/6395898.html
Copyright © 2011-2022 走看看