前端用F11打开伪装更新页面demo后，老板被欺骗多次！

本文主要是介绍前端用F11打开伪装更新页面demo后，老板被欺骗多次！，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

        无意间看见朋友分享的页面看到了一个有趣的页面，通过F11之后给人以假乱真的感觉，这个代码并不难，我们一起来看看！

正文

        通过引入jQuery快速实现

一、js逻辑代码

function changeFullScreen() {const element = document.documentElementconsole.log(1)// 如果是全屏状态if (this.fullscreen) {// 如果浏览器有这个Functionif (document.exitFullscreen) {document.exitFullscreen()} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen()} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen()} else if (document.msExitFullscreen) {document.msExitFullscreen()}} else {// 如果浏览器有这个Functionif (element.requestFullscreen) {element.requestFullscreen()} else if (element.webkitRequestFullScreen) {element.webkitRequestFullScreen()} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen()} else if (element.msRequestFullscreen) {element.msRequestFullscreen()}}// 判断全屏状态的变量this.fullscreen = !this.fullscreen
}

二、样式代码

html,body,div {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}.tips-to{text-align: center;color: #ffffff;font-weight: 400;font-size: 18px;font-style:normal;position: absolute;bottom: 68px;left: 0;right: 0;}.update,.tips-one{width: 375px;text-align: center;color: #ffffff;font-weight: 400;font-size: 18px;font-style:normal;margin: 0;}.text{margin: 0 auto;margin-top: 68px;margin-left: -163px;}.loading i {margin: auto;position: absolute;top: calc(50% - 120px);left: calc(50% - 20px);width: 45px;height: 45px;display: block;}.loading span {position: absolute;width: 100%;height: 100%;opacity: 0;}.loading span:after {content: "";display: block;position: absolute;left: 0px;top: 0px;width: 6px;height: 6px;background: var(--main, #ffffff);border-radius: 50%;}.loading span:nth-child(1) {animation: i1 5.5s 0.2s infinite;}.loading span:nth-child(2) {animation: i2 5.5s 0.4s infinite;}.loading span:nth-child(3) {animation: i3 5.5s 0.6s infinite;}.loading span:nth-child(4) {animation: i4 5.5s 0.8s infinite;}.loading span:nth-child(5) {animation: i5 5.5s 1s infinite;}.loading span:nth-child(6) {animation: i6 5.5s 1.2s infinite;}@keyframes i1 {0% {opacity: 1;transform: rotate(190deg);animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);}7% {opacity: 1;transform: rotate(300deg);animation-timing-function: linear;}30% {opacity: 1;transform: rotate(450deg);animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);}39% {opacity: 1;transform: rotate(645deg);animation-timing-function: linear;}63% {opacity: 1;transform: rotate(800deg);animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);}68% {opacity: 1;transform: rotate(920deg);animation-timing-function: ease-in;}69% {opacity: 0;transform: rotate(930deg);}}@keyframes i2 {0% {opacity: 1;transform: rotate(180deg);animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);}7% {opacity: 1;transform: rotate(300deg);animation-timing-function: linear;}30% {opacity: 1;transform: rotate(450deg);animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);}39% {opacity: 1;transform: rotate(645deg);animation-timing-function: linear;}63% {opacity: 1;transform: rotate(800deg);animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);}68% {opacity: 1;transform: rotate(910deg);animation-timing-function: ease-in;}69% {opacity: 0;transform: rotate(920deg);}}@keyframes i3 {0% {opacity: 1;transform: rotate(170deg);animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);}7% {opacity: 1;transform: rotate(300deg);animation-timing-function: linear;}30% {opacity: 1;transform: rotate(450deg);animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);}39% {opacity: 1;transform: rotate(645deg);animation-timing-function: linear;}63% {opacity: 1;transform: rotate(800deg);animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);}68% {opacity: 1;transform: rotate(900deg);animation-timing-function: ease-in;}69% {opacity: 0;transform: rotate(910deg);}}@keyframes i4 {0% {opacity: 1;transform: rotate(160deg);animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);}7% {opacity: 1;transform: rotate(300deg);animation-timing-function: linear;}30% {opacity: 1;transform: rotate(450deg);animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);}39% {opacity: 1;transform: rotate(645deg);animation-timing-function: linear;}63% {opacity: 1;transform: rotate(800deg);animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);}68% {opacity: 1;transform: rotate(890deg);animation-timing-function: ease-in;}69% {opacity: 0;transform: rotate(900deg);}}@keyframes i5 {0% {opacity: 1;transform: rotate(150deg);animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);}7% {opacity: 1;transform: rotate(300deg);animation-timing-function: linear;}30% {opacity: 1;transform: rotate(450deg);animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);}39% {opacity: 1;transform: rotate(645deg);animation-timing-function: linear;}63% {opacity: 1;transform: rotate(800deg);animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);}68% {opacity: 1;transform: rotate(880deg);animation-timing-function: ease-in;}69% {opacity: 0;transform: rotate(880deg);}}@keyframes i6 {0% {opacity: 1;transform: rotate(140deg);animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);}7% {opacity: 1;transform: rotate(300deg);animation-timing-function: linear;}30% {opacity: 1;transform: rotate(450deg);animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);}39% {opacity: 1;transform: rotate(645deg);animation-timing-function: linear;}63% {opacity: 1;transform: rotate(800deg);animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);}68% {opacity: 1;transform: rotate(870deg);animation-timing-function: ease-in;}69% {opacity: 0;transform: rotate(880deg);}}

三、完整代码

<!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>F11伪装更新页面</title><!-- <link rel="stylesheet" href="./loding.css"> --><style>html,body,div {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}.tips-to{text-align: center;color: #ffffff;font-weight: 400;font-size: 18px;font-style:normal;position: absolute;bottom: 68px;left: 0;right: 0;}.update,.tips-one{width: 375px;text-align: center;color: #ffffff;font-weight: 400;font-size: 18px;font-style:normal;margin: 0;}.text{margin: 0 auto;margin-top: 68px;margin-left: -163px;}.loading i {margin: auto;position: absolute;top: calc(50% - 120px);left: calc(50% - 20px);width: 45px;height: 45px;display: block;}.loading span {position: absolute;width: 100%;height: 100%;opacity: 0;}.loading span:after {content: "";display: block;position: absolute;left: 0px;top: 0px;width: 6px;height: 6px;background: var(--main, #ffffff);border-radius: 50%;}.loading span:nth-child(1) {animation: i1 5.5s 0.2s infinite;}.loading span:nth-child(2) {animation: i2 5.5s 0.4s infinite;}.loading span:nth-child(3) {animation: i3 5.5s 0.6s infinite;}.loading span:nth-child(4) {animation: i4 5.5s 0.8s infinite;}.loading span:nth-child(5) {animation: i5 5.5s 1s infinite;}.loading span:nth-child(6) {animation: i6 5.5s 1.2s infinite;}@keyframes i1 {0% {opacity: 1;transform: rotate(190deg);animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);}7% {opacity: 1;transform: rotate(300deg);animation-timing-function: linear;}30% {opacity: 1;transform: rotate(450deg);animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);}39% {opacity: 1;transform: rotate(645deg);animation-timing-function: linear;}63% {opacity: 1;transform: rotate(800deg);animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);}68% {opacity: 1;transform: rotate(920deg);animation-timing-function: ease-in;}69% {opacity: 0;transform: rotate(930deg);}}@keyframes i2 {0% {opacity: 1;transform: rotate(180deg);animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);}7% {opacity: 1;transform: rotate(300deg);animation-timing-function: linear;}30% {opacity: 1;transform: rotate(450deg);animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);}39% {opacity: 1;transform: rotate(645deg);animation-timing-function: linear;}63% {opacity: 1;transform: rotate(800deg);animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);}68% {opacity: 1;transform: rotate(910deg);animation-timing-function: ease-in;}69% {opacity: 0;transform: rotate(920deg);}}@keyframes i3 {0% {opacity: 1;transform: rotate(170deg);animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);}7% {opacity: 1;transform: rotate(300deg);animation-timing-function: linear;}30% {opacity: 1;transform: rotate(450deg);animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);}39% {opacity: 1;transform: rotate(645deg);animation-timing-function: linear;}63% {opacity: 1;transform: rotate(800deg);animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);}68% {opacity: 1;transform: rotate(900deg);animation-timing-function: ease-in;}69% {opacity: 0;transform: rotate(910deg);}}@keyframes i4 {0% {opacity: 1;transform: rotate(160deg);animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);}7% {opacity: 1;transform: rotate(300deg);animation-timing-function: linear;}30% {opacity: 1;transform: rotate(450deg);animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);}39% {opacity: 1;transform: rotate(645deg);animation-timing-function: linear;}63% {opacity: 1;transform: rotate(800deg);animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);}68% {opacity: 1;transform: rotate(890deg);animation-timing-function: ease-in;}69% {opacity: 0;transform: rotate(900deg);}}@keyframes i5 {0% {opacity: 1;transform: rotate(150deg);animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);}7% {opacity: 1;transform: rotate(300deg);animation-timing-function: linear;}30% {opacity: 1;transform: rotate(450deg);animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);}39% {opacity: 1;transform: rotate(645deg);animation-timing-function: linear;}63% {opacity: 1;transform: rotate(800deg);animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);}68% {opacity: 1;transform: rotate(880deg);animation-timing-function: ease-in;}69% {opacity: 0;transform: rotate(880deg);}}@keyframes i6 {0% {opacity: 1;transform: rotate(140deg);animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);}7% {opacity: 1;transform: rotate(300deg);animation-timing-function: linear;}30% {opacity: 1;transform: rotate(450deg);animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);}39% {opacity: 1;transform: rotate(645deg);animation-timing-function: linear;}63% {opacity: 1;transform: rotate(800deg);animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);}68% {opacity: 1;transform: rotate(870deg);animation-timing-function: ease-in;}69% {opacity: 0;transform: rotate(880deg);}}</style><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body onclick="changeFullScreen()" style="background-color: #3277D1; cursor:none;"><div class="loading"><i><span></span><span></span><span></span><span></span><span></span><span></span><div class="text"><h3 class="update">正在进行更新 &nbsp;  5%</h3><h3 class="tips-one">请不要关闭电脑。完成此操作需要一定时间。</h3></div></i></div><div class="tips-to">你的电脑将重启若干次</div>
</body>
<script>
function changeFullScreen() {const element = document.documentElementconsole.log(1)// 如果是全屏状态if (this.fullscreen) {// 如果浏览器有这个Functionif (document.exitFullscreen) {document.exitFullscreen()} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen()} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen()} else if (document.msExitFullscreen) {document.msExitFullscreen()}} else {// 如果浏览器有这个Functionif (element.requestFullscreen) {element.requestFullscreen()} else if (element.webkitRequestFullScreen) {element.webkitRequestFullScreen()} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen()} else if (element.msRequestFullscreen) {element.msRequestFullscreen()}}// 判断全屏状态的变量this.fullscreen = !this.fullscreen
}</script>
</html>

       

这篇关于前端用F11打开伪装更新页面demo后，老板被欺骗多次！的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---