js下载APP判断手机端_最优秀的QQ技术网_最专业的网络资源收集平台_小辉资源网分享_小刀娱乐网

js下载APP判断手机端
2021-7-26 1130 0
通过js来判断iPhone|iPad|iPod|iOS|Android客户端
非常简单实用的代码，可添加到页面！
代码如下：
<!--小辉网 www.61ling.com-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title>js下载APP判断手机端</title>
<script src="https://www.layuicdn.com/layui/layui.js"></script><!--代码复制到你的网站-->
<style>
html, body {
  background: #28254C;
  font-family: 'Ubuntu';
}

* {
  box-sizing: border-box;
}

.box {
  width: 350px;
  height: 100%;
  max-height: 600px;
  min-height: 450px;
  background: #332F63;
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 30px 50px;
}
.box .box__ghost {
  padding: 15px 25px 25px;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -30%);
}
.box .box__ghost .symbol:nth-child(1) {
  opacity: .2;
  animation: shine 4s ease-in-out 3s infinite;
}
.box .box__ghost .symbol:nth-child(1):before, .box .box__ghost .symbol:nth-child(1):after {
  content: '';
  width: 12px;
  height: 4px;
  background: #fff;
  position: absolute;
  border-radius: 5px;
  bottom: 65px;
  left: 0;
}
.box .box__ghost .symbol:nth-child(1):before {
  transform: rotate(45deg);
}
.box .box__ghost .symbol:nth-child(1):after {
  transform: rotate(-45deg);
}
.box .box__ghost .symbol:nth-child(2) {
  position: absolute;
  left: -5px;
  top: 30px;
  height: 18px;
  width: 18px;
  border: 4px solid;
  border-radius: 50%;
  border-color: #fff;
  opacity: .2;
  animation: shine 4s ease-in-out 1.3s infinite;
}
.box .box__ghost .symbol:nth-child(3) {
  opacity: .2;
  animation: shine 3s ease-in-out .5s infinite;
}
.box .box__ghost .symbol:nth-child(3):before, .box .box__ghost .symbol:nth-child(3):after {
  content: '';
  width: 12px;
  height: 4px;
  background: #fff;
  position: absolute;
  border-radius: 5px;
  top: 5px;
  left: 40px;
}
.box .box__ghost .symbol:nth-child(3):before {
  transform: rotate(90deg);
}
.box .box__ghost .symbol:nth-child(3):after {
  transform: rotate(180deg);
}
.box .box__ghost .symbol:nth-child(4) {
  opacity: .2;
  animation: shine 6s ease-in-out 1.6s infinite;
}
.box .box__ghost .symbol:nth-child(4):before, .box .box__ghost .symbol:nth-child(4):after {
  content: '';
  width: 15px;
  height: 4px;
  background: #fff;
  position: absolute;
  border-radius: 5px;
  top: 10px;
  right: 30px;
}
.box .box__ghost .symbol:nth-child(4):before {
  transform: rotate(45deg);
}
.box .box__ghost .symbol:nth-child(4):after {
  transform: rotate(-45deg);
}
.box .box__ghost .symbol:nth-child(5) {
  position: absolute;
  right: 5px;
  top: 40px;
  height: 12px;
  width: 12px;
  border: 3px solid;
  border-radius: 50%;
  border-color: #fff;
  opacity: .2;
  animation: shine 1.7s ease-in-out 7s infinite;
}
.box .box__ghost .symbol:nth-child(6) {
  opacity: .2;
  animation: shine 2s ease-in-out 6s infinite;
}
.box .box__ghost .symbol:nth-child(6):before, .box .box__ghost .symbol:nth-child(6):after {
  content: '';
  width: 15px;
  height: 4px;
  background: #fff;
  position: absolute;
  border-radius: 5px;
  bottom: 65px;
  right: -5px;
}
.box .box__ghost .symbol:nth-child(6):before {
  transform: rotate(90deg);
}
.box .box__ghost .symbol:nth-child(6):after {
  transform: rotate(180deg);
}
.box .box__ghost .box__ghost-container {
  background: #fff;
  width: 100px;
  height: 100px;
  border-radius: 100px 100px 0 0;
  position: relative;
  margin: 0 auto;
  animation: upndown 3s ease-in-out infinite;
}
.box .box__ghost .box__ghost-container .box__ghost-eyes {
  position: absolute;
  left: 50%;
  top: 45%;
  height: 12px;
  width: 70px;
}
.box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-left {
  width: 12px;
  height: 12px;
  background: #332F63;
  border-radius: 50%;
  margin: 0 10px;
  position: absolute;
  left: 0;
}
.box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-right {
  width: 12px;
  height: 12px;
  background: #332F63;
  border-radius: 50%;
  margin: 0 10px;
  position: absolute;
  right: 0;
}
.box .box__ghost .box__ghost-container .box__ghost-bottom {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
.box .box__ghost .box__ghost-container .box__ghost-bottom div {
  flex-grow: 1;
  position: relative;
  top: -10px;
  height: 20px;
  border-radius: 100%;
  background-color: #fff;
}
.box .box__ghost .box__ghost-container .box__ghost-bottom div:nth-child(2n) {
  top: -12px;
  margin: 0 -0px;
  border-top: 15px solid #332F63;
  background: transparent;
}
.box .box__ghost .box__ghost-shadow {
  height: 20px;
  box-shadow: 0 50px 15px 5px #3B3769;
  border-radius: 50%;
  margin: 0 auto;
  animation: smallnbig 3s ease-in-out infinite;
}
.box .box__description {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}
.box .box__description .box__description-container {
  color: #fff;
  text-align: center;
  width: 200px;
  font-size: 16px;
  margin: 0 auto;
}
.box .box__description .box__description-container .box__description-title {
  font-size: 24px;
  letter-spacing: .5px;
}
.box .box__description .box__description-container .box__description-text {
  color: #8C8AA7;
  line-height: 20px;
  margin-top: 20px;
}
.box .box__description .box__button {
  display: block;
  position: relative;
  background: #FF5E65;
  border: 1px solid transparent;
  border-radius: 50px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  line-height: 50px;
  font-size: 18px;
  padding: 0 70px;
  white-space: nowrap;
  margin-top: 25px;
  transition: background .5s ease;
  overflow: hidden;
}
.box .box__description .box__button:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 100px;
  background: #fff;
  bottom: -25px;
  left: 0;
  border: 2px solid #fff;
  transform: translateX(-50px) rotate(45deg);
  transition: transform .5s ease;
}
.box .box__description .box__button:hover {
  background: transparent;
  border-color: #fff;
}
.box .box__description .box__button:hover:before {
  transform: translateX(250px) rotate(45deg);
}

@keyframes upndown {
  0% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(5px);
  }
}
@keyframes smallnbig {
  0% {
    width: 90px;
  }
  50% {
    width: 100px;
  }
  100% {
    width: 90px;
  }
}
@keyframes shine {
  0% {
    opacity: .2;
  }
  25% {
    opacity: .1;
  }
  50% {
    opacity: .2;
  }
  100% {
    opacity: .2;
  }
}
</style>
</head>
<body>
<div class="box">
  <div class="box__ghost">
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    
    <div class="box__ghost-container">
      <div class="box__ghost-eyes">
        <div class="box__eye-left"></div>
        <div class="box__eye-right"></div>
      </div>
      <div class="box__ghost-bottom">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="box__ghost-shadow"></div>
  </div>
  
  <div class="box__description">
    <div class="box__description-container">
      <div class="box__description-title">演示页面！</div>
      <div class="box__description-text">客服QQ：3131282664</div>
    </div>
    <!--下面代码复制到你的网站box__button为样式-->	
    <a class="box__button" onclick="Download('下载客户端','https://oss2020.infile.inspurcloud.cn/2019.apk');" target="_blank" class="widget" style="background:#0000 !important;">点击下载</a>
    <!--上面代码复制到你的网站-->	
  </div>
  
</div>
<!--下面代码复制到你的网站-->	
<script>
function finder()
{
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) 
    { //判断iPhone|iPad|iPod|iOS
        Download('下载客户端 - 苹果','https://oss2020.infile.inspurcloud.cn/2019.apk');
    } 
	else
	{
		Download('下载客户端 - 安卓','https://oss2020.infile.inspurcloud.cn/2019.apk');
	}    
};
function LoadTime() 
{
    var LoadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart;
    var ms2m = LoadTime / 1000;
    $("#LoadTime").html(ms2m.toFixed(3));
    //console.log(LoadTime / 1000);
}

function LoadA()
{
    //alert("1");
    $("body").css("overflow-y","hidden");
    console.log("Loading");
    $(this).attr("disabled", true);
    $("#wannet-loading").css("display","");
    $(".center-block").css("filter","blur(20px)");
}
function LoadButton()
{
    //alert("1");
    console.log("Loading");
    $(this).attr("disabled", true);
    $("#wannet-loading").css("display","");
    //$('form').submit();
    $(".center-block").css("filter","blur(20px)");
    setTimeout(function() 
    {
        //$('form').submit();
        console.log("Forming");
        setTimeout(function() 
        {
            //$('form').submit();
            console.log("Forming");
            setTimeout(function() 
            {
                //$('form').submit();
                console.log("Forming");
            },9000);
        },6000);
    },3000);
}
function FrameWindow(wid,hei,tit,url)
{
    layui.use('layer', function()
    {
        var layer = layui.layer;
        layer.open({
            type: 2,
            title: tit,
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: [wid, hei],
            content: url
        });
    }); 
}
function Download(tit,url)
{
    layui.use('layer', function()
    {
        var layer = layui.layer;
        layer.open({
            type: 2,
            title: tit,
            time: 1000,
            resize: false,
            shadeClose: true,
            shade: false,
            area: [320, 180],
            content: url
        });
    }); 
}

/*--执行区域--------FanMatter*/
$(function()
{
    $("#wannet-loader").fadeOut(700);
    LoadTime();
    var ADAble = $.cookie('ADAble');
    if(ADAble == "false")
    {
        $("GGBlock").remove();
    }
    var Notice = $.cookie('Notice');
    if(Notice == "true")
    {
        layer.closeAll();
    }
    $('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);});
    $("a[target!='_blank']").click(function(){
        var test_layui = $(this).attr("class");
        var test_href = $(this).attr("href");
        if(test_layui == undefined){var test_layui = "NO_CLASS";}
        if(test_href == undefined){var test_href = "NO_HREF";}
        console.log(test_href);
        if(test_layui.indexOf("layui") == "-1")
        {
            if(test_href.indexOf("/") != "-1" || test_href.indexOf(".") != "-1" && test_layui.indexOf("NOJS") == "-1")
            {
                LoadA();
            }
        }
    });
    $("button").click(function(){
        var test_captcha = $(this).attr("class");
        if(test_captcha.indexOf("captcha") == "-1" && test_captcha.indexOf("NOJS") == "-1" )
        {
            LoadButton();
        }
    });
});
setInterval(function(){ 
    var SiteCounter=$.getJSON({url:"/code.php?mode=SiteCounter",async:true});
    setTimeout(function(){
        NumDynamic("SmsCounter",90,SiteCounter.responseJSON.SmsCounter);
        NumDynamic("SecretCounter",50,SiteCounter.responseJSON.SecretCounter);
        NumDynamic("PageCounter",10,SiteCounter.responseJSON.PageCounter);
        //$("#SmsCounter").html(SiteCounter.responseJSON.SmsCounter);
        //$("#SecretCounter").html(SiteCounter.responseJSON.SecretCounter);
        //$("#PageCounter").html(SiteCounter.responseJSON.PageCounter);
    },4000);
    //console.log(SiteCounter);
},5000);
setInterval(function(){ 
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || /(Android)/i.test(navigator.userAgent)) 
    {
        $("#Guider").css("display","");
    }
    else
    {
        $("#Guider").css("display","none");
    }
},100);
</script> 
<!--以上代码复制到你的网站-->
</div>
</body>
</html>
Plugins by frpkj.com
下载地址：
文件名称：js下载APP判断手机端
文件大小：93KB适用版本：PC
更新日期：2021-07-26作者信息：小辉网络
点击下载 查看演示
上一篇: js网页右侧客服在线浮窗代码
下一篇: 网页嵌入外部页面框架展示js弹窗框架一个非常不错的UI弹出框架