手机端网站首页开屏启动图代码的两种方式

<div class="cpm-box">
<a class="cpm" href="链接">
<div class="preview pop" style="/* visibility: hidden; */">    
    <img src="头像">
    <span class="txt-item" style="top:calc(15% + 150px)">标题</span>
    <span class="txt-item" style="top:calc(15% + 190px)">描述</span>
    </div>
    </a>
    <div class="cpm-time"><span></span> 立即跳过</div>
</div>

/*首页启动图*/
.cpm-box {overflow-x:hidden; position: fixed;z-index: 9999;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;display: none; background-color: white;}
.cpm-img {width: 100%;height: 100%;display: block;overflow: hidden;}
.cpm-img img {width: 100%;height: 100%;object-fit: cover;}
.cpm-time {right:15px;top:15px;padding:5px 10px;background:rgba(0, 0, 0, 0.4);color:rgba(255, 255, 255, 0.9);font-size:14px;border-radius:3px;}
.cpm-box_logo {height:15%;background:rgba(255, 255, 255, 0.9);}
.cpm-box_logo img {height:30%;margin-top:5.5%;}  
.cpm-time {position: absolute; cursor: pointer; position: fixed;z-index: 999999999999999;}
/****** 载入封面 *******/
.pop{position:fixed;top:0;left:0;z-index:9999999;display:flex;visibility:visible;overflow:hidden;width:100%;height:100%;background-image:url(背景图片);background-position:center 0;background-size:cover;background-repeat:no-repeat;text-align:center;flex-direction:column;justify-content:center;align-items:center;}
.pop img{position:absolute;top:15%;left:calc(50% - 50px);width:100px;height:100px;border-radius:100%;object-fit:cover;}
.pop .txt-item{position:absolute;left:0;z-index:12;overflow:hidden;width:100%;height:auto;max-width:100%;min-height:15px;color:#fff;text-align:center;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;font-weight:700;font-size:18px;}
/**/
.preview .post{
    cursor: pointer;
}

两种 Js 方式

第一种是每次打开页面时会弹出一次，不影响网页刷新，只要不重新进入网页
第二种也是比较常见的通过记录 cookies 24 小时弹出一次

第一种 JS

// 每次访问页面弹出一次，不影响刷新
 $(document).ready(function(){    
    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
        if(sessionStorage.getItem("isReload")){
            $('.cpm-box').hide();
        }else{
            $(".cpm-time",".cpm").on("click",function(){
                $('.cpm-box').hide();
            });
            $(".cpm-time").on("click",function(){
                $('.cpm-box').hide();
            });
            
            $('.cpm-box').show();
             var num = 5;
            var settime = setInterval(function(){
                if(num == 0){$('.cpm-box').hide();clearInterval(settime);}
                num--;
                $('.cpm-time span').html(num);
            },1000);
            sessionStorage.setItem("isReload", true)
        }
    };
});

第二种 JS

// 24小时内弹出一次
$(document).ready(function(){    
    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
        if (!lcs.get('tb_wintips_ts') > 0){
            $(".cpm-time").on("click",function(){
                $('.cpm-box').hide();
                lcs.set('tb_wintips_ts', $.now());
            });
            $(".cpm-time",".cpm").on("click",function(){
                $('.cpm-box').hide();
                lcs.set('tb_wintips_ts', $.now());
            });
            
            $('.cpm-box').show();
        }
        var num = 10; 
        var settime = setInterval(function(){
            if(num == 0){$('.cpm-box').hide();clearInterval(settime);lcs.set('tb_wintips_ts', $.now());}
            num--;
            $('.cpm-time span').html(num);
        },1000);
    };
});
var lcs = {
    get: function(dataKey) {
        if (window.localStorage) {
            return localStorage.getItem(dataKey)
        } else {
            return $.cookie(dataKey)
        }
    },
    set: function(key, value) {
        if (window.localStorage) {
            localStorage[key] = value
        } else {
            $.cookie(key, value)
        }
    },
    remove: function(key) {
        if (window.localStorage) {
            localStorage.removeItem(key)
        } else {
            $.cookie(key, undefined)
        }
    }
};