• 查看作者
  • 网站广告 / 点击隐藏 / 点击显示 / 方法

    绿化网站神器它来了,如果你是网站站长,我强烈推荐你开启“网站点击隐藏广告/点击展示广告”把选择器交给用户,这样能大大提升网站体验度。当然不是永久关闭,默认是关闭了一天之内不会在显示,当然你也可以在点击展示。

    网站广告 / 点击隐藏 点击显示 方法 第1张图片

    js代码

    (function(){
    "use strict";
    var hideAdBtn = document.getElementById('hideAdBtn');
    var showAdBtn = document.getElementById('showAdBtn');
    hideAdBtn.onclick = hideAd;
    showAdBtn.onclick = showAd;
    // 点击隐藏广告
    function hideAd(){
    // 禁止显示时间,单位 ms
    var duration = 24 * 3600 * 1000;
    var curTime = new Date().getTime();
    var expire  = curTime + duration;
    window.localStorage.setItem('expire' , expire);
    // 隐藏广告
    laohan.style.display='none';
    alert("将为您关闭广告24小时内不在显示");//
    showAdBtn.style.display = 'block';
    // 可任意增加内容
    }
    // 点击显示广告
    function showAd(){
    window.localStorage.removeItem('expire');
    showAdBtn.style.display = 'none';
    laohan.style.display='block';
    alert("感谢您开启广告展示");//
    }
      (function(){
    // 进入页面的时候检查是否已经过期
    var expire = window.localStorage.getItem('expire');
    if (expire === null) {
    laohan.style.display='block';
    showAdBtn.style.display = 'none';
    return ;
    }
    expire = parseInt(expire);
    var curTime = new Date().getTime();
     if (curTime > expire) {
    // 已经过期,显示广告
    laohan.style.display='block';
    showAdBtn.style.display = 'none';
     } else {
     // 还未过期,不显示广告
    laohan.style.display='none';
    showAdBtn.style.display = 'block';
      }
      })();
    })();

    PS:请先本地创建一个js文件,复制上方代码,上传到网站js目录。如果js放首页,下方代码就要放首页。

    html代码

    1、关闭按钮

    <div><a id='hideAdBtn' class="gbgg">关闭广告</a></div>
    <div><a id='showAdBtn' class="dkgg">打开广告</a></div>

    2、隐藏展示

    <div id="laohan">       
    这里是 / 关闭 / 打开 / 的内容
    </div>

    PS:把你网站广告内容最外层<div>加上id="laohan"就可以一键关闭广告,一键展示广告。 

    css代码

    .dkgg{position: absolute;top: 108px;width: 21px;text-align: center;background: #676767;color: #FFF!important;padding: 7px 0px;font-size: 14px;cursor: pointer;border-radius: 0px 3px 3px 0px;}
    .gbgg{position: absolute;top: 108px;width: 21px;text-align: center;background: #ff5533;color: #FFF!important;padding: 7px 0px;font-size: 14px;cursor: pointer;border-radius: 0px 3px 3px 0px;}

    PS:这个是关闭/展示/按钮的CSS样式,请自行适配调整。

  • 0
  • 0
  • 0
  • 1037
  • #笔记
  • 请登录之后再进行评论

    登录
    最新评论