哈哈会爬树的金鱼,树上的金鱼呦😀

前言

老板：针对上半年业绩发表一下大家的看法,大家自由发言,已经定好晚餐和夜宵了有需要的自取୧(๑•̀⌄•́๑)૭

产品A：根据大数据分析公司产品的广告收入较低拖后腿,建议扩宽曝光渠道!

产品B：对! 大数据分析公司产品的广告大部分来自移动端,pc端曝光率较少,可以增加一下曝光率,据统计移动端大部分广告收入来自首屏广告,我觉得pc也可以加上

程序员: PC哪有首屏广告啊,行业都没有先例

老板：这个好,没有先例! 我们又可以申请专利了Ψ(￣∀￣)Ψ 搞起!!今年公司专利指标有着落了

程序员: 这也太影响体验了

产品A：就说能不能做吧, 今天面试的那个应届生不错能倒背chromium源码,还能手写react源码并且指出优化方案

程序员: 我做!!! ╭(￣m￣*)╮

先来个全屏遮罩🤔

这还不简单,直接一个定位搞定

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>XX百货</title>
    <style>
      #ADBox {
        background: #fff;
        position: fixed;
        width: 100%;
        height: 100%;
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="ADBox">广告</div>
  </body>
</html>

搞定提测!

重来没接过这么简单的需求,送业绩这是╮(╯﹏╰)╭

第一次提测🤐

测试A: 送业绩这是? 产品说要和移动端一模一样,你这哪一样了?? 直系看需求文档!!

程序员: 需求文档就一句话, 和移动端一样的开屏广告, 这那不一样了?

测试A: 这哪一样了?? 你家移动端广告露个顶部出来?看看哪个app广告不是全屏的???

程序员: 啥? 还要全屏?? 行...


// 必须用点击事件触发才能全屏
document.addEventListener("click", async (elem) => {
    const box = document.getElementById("ADBox");
    if (box.requestFullscreen) {
        box.requestFullscreen();
    }
    setTimeout(() => {
        const state = !!document.fullscreenElement;
        // 是否全屏状态
        if (state) {
        // 取消全屏
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        }
    }, 5 * 1000);
});

搞定提测

第二次提测🙄

产品A: 嗯...有点感觉了,这鼠标去掉都遮住广告了,万一广告商不满意投诉怎么办?

程序员: 鼠标这么小这么能遮住广告??

产品B: 看我鼠标? (大米老鼠标PC主题)

程序员: ...

<style>
      #ADBox {
        background: #fff;
        position: fixed;
        width: 100%;
        height: 100%;
        // 隐藏广告Box让用户点任意地方激活
        opacity: 0;

      }
</style>

提测...

第三次提测🤕

测试A: 为啥还有鼠标???

程序员: 怎么那可能还有?

测试A: 过来看,鼠标不动的话还是会显示鼠标哦,动一下才消失

程序员: ##..行, 那我直接锁指针

    <script>
      let pointerLockElement = null;
      // 指针锁定或解锁
      document.addEventListener(
        "pointerlockchange",
        () => {
          // 锁定的元素是否为当前的元素 -- 没啥也意义可以去掉
          if (document.pointerLockElement === pointerLockElement) {
            console.log("指针锁定成功了。");
          } else {
            pointerLockElement = null;
            console.log("已经退出锁定。");
          }
        },
        false
      );
      // 锁定失败事件
      document.addEventListener(
        "pointerlockerror",
        () => {
          console.log("锁定指针时出错。");
        },
        false
      );

      // 锁定指针,锁定指针的元素必须让用户点一下才能锁定
      function lockPointer(elem) {
        // 如果已经存锁定的元素则不操作
        if (document.pointerLockElement) {
          return;
        }
        if (elem) {
          pointerLockElement = elem;
          elem.requestPointerLock();
        }
      }

      // 解除锁定
      function unlockPointer() {
        document.exitPointerLock();
      }

      // 必须用点击事件触发才能全屏
      document.addEventListener("click", async () => {
        const box = document.getElementById("ADBox");
        if (box.requestFullscreen) {
          box.requestFullscreen();
          box.style.opacity = 1;
          box.style.display = "block";
          lockPointer(box);
        }
        // 5秒后解除锁定
        setTimeout(() => {
          const state = !!document.fullscreenElement;
          // 是否全屏状态
          if (state) {
            // 取消全屏
            if (document.exitFullscreen) {
              document.exitFullscreen();
              unlockPointer();
              box.style.display = "none";
            }
          }
        }, 5 * 1000);
      });
    </script>

提测...

第四次提测😤

测试A: Safari上失效哦

程序员: 额....

<script>

//  requestFullscreen 方法兼容处理
function useRequestFullscreen(elem) {
    const key = ['requestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen', 'msRequestFullscreen']
    for (const value of key) {
        if (elem[value]) {
            elem[value]()
            return true
        }
    }
    return false
}

// document.exitFullscreen 方法兼容处理
document.exitFullscreenUniversal = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen

// fullscreenElement 对象兼容处理
 function getFullscreenElement() {
    const key = ['fullscreenElement', 'webkitFullscreenElement']
    for (const value of key) {
        if (document[value]) {
            return document[value]
        }
    }
    return null
}

// fullscreenchange 事件兼容处理
addEventListener("fullscreenchange", endCallback);
addEventListener("webkitfullscreenchange", endCallback);

// requestPointerLock 方法在Safari下不可与 requestFullscreen 方法共用一个事件周期 暂无解决方法,必须让用户点两次鼠标,第一次全屏,第二次锁鼠标
// 同一事件周期内会出现的问题: 1.有小机率会正常执行, 2.顶部出现白条(实际上是个浏览器锁鼠标的提示语,但显示异常了) 3.锁定鼠标失败

</script>

结尾😩

产品A: 效果不错,但还有点小小的瑕疵,为啥要鼠标点一下才能弹广告,改成进入就弹窗吧

程序员：要不还是找上次那个应届生来吧,改chromium源码应该能实现╭∩╮(︶︿︶)╭∩╮

效果预览: www.npmstart.top/BSOD.html

🤭新的广告方式,很新很新!

前言

先来个全屏遮罩🤔

第一次提测🤐

第二次提测🙄

第三次提测🤕

第四次提测😤

结尾😩