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

    前言

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

    正文

            通过引入jQuery快速实现电脑浏览器全屏伪装更新页面!

    一、js逻辑代码

    1. function changeFullScreen() {
    2. 	const element = document.documentElement
    3.     console.log(1)
    4. 	// 如果是全屏状态
    5. 	if (this.fullscreen) {
    6. 		// 如果浏览器有这个Function
    7. 		if (document.exitFullscreen) {
    8. 			document.exitFullscreen()
    9. 		} else if (document.webkitCancelFullScreen) {
    10. 			document.webkitCancelFullScreen()
    11. 		} else if (document.mozCancelFullScreen) {
    12. 			document.mozCancelFullScreen()
    13. 		} else if (document.msExitFullscreen) {
    14. 			document.msExitFullscreen()
    15. 		}
    16. 	} else {
    17. 		// 如果浏览器有这个Function
    18. 		if (element.requestFullscreen) {
    19. 			element.requestFullscreen()
    20. 		} else if (element.webkitRequestFullScreen) {
    21. 			element.webkitRequestFullScreen()
    22. 		} else if (element.mozRequestFullScreen) {
    23. 			element.mozRequestFullScreen()
    24. 		} else if (element.msRequestFullscreen) {
    25. 			element.msRequestFullscreen()
    26. 		}
    27. 	}
    28. 	// 判断全屏状态的变量
    29. 	this.fullscreen = !this.fullscreen
    30. }

    判断全屏状态的变量

    this.fullscreen = !this.fullscreen;

    二、样式代码

    1. html,
    2. 		body,
    3. 		div {
    4. 		  margin: 0;
    5. 		  padding: 0;
    6. 		}
    7. 		 
    8. 		html,
    9. 		body {
    10. 		  width: 100%;
    11. 		  height: 100%;
    12. 		}
    13. 		.tips-to{
    14. 		  text-align: center;
    15. 		  color: #ffffff;
    16. 		  font-weight: 400;
    17. 		  font-size: 18px;
    18. 		  font-style:normal;
    19. 		  position: absolute;
    20. 		  bottom: 68px;
    21. 		  left: 0;
    22. 		  right: 0;
    23. 		}
    24. 		.update,.tips-one{
    25. 		  width: 375px;
    26. 		  text-align: center;
    27. 		  color: #ffffff;
    28. 		  font-weight: 400;
    29. 		  font-size: 18px;
    30. 		  font-style:normal;
    31. 		  margin: 0;
    32. 		}
    33. 		.text{
    34. 		  margin: 0 auto;
    35. 		  margin-top: 68px;
    36. 		  margin-left: -163px;
    37. 		}
    38. 		.loading i {
    39. 		  margin: auto;
    40. 		  position: absolute;
    41. 		  top: calc(50% - 120px);
    42. 		  left: calc(50% - 20px);
    43. 		  width: 45px;
    44. 		  height: 45px;
    45. 		  display: block;
    46. 		}
    47. 		 
    48. 		.loading span {
    49. 		  position: absolute;
    50. 		  width: 100%;
    51. 		  height: 100%;
    52. 		  opacity: 0;
    53. 		}
    54. 		 
    55. 		.loading span:after {
    56. 		  content: "";
    57. 		  display: block;
    58. 		  position: absolute;
    59. 		  left: 0px;
    60. 		  top: 0px;
    61. 		  width: 6px;
    62. 		  height: 6px;
    63. 		  background: var(--main, #ffffff);
    64. 		  border-radius: 50%;
    65. 		}
    66. 		 
    67. 		.loading span:nth-child(1) {
    68. 		  animation: i1 5.5s 0.2s infinite;
    69. 		}
    70. 		 
    71. 		.loading span:nth-child(2) {
    72. 		  animation: i2 5.5s 0.4s infinite;
    73. 		}
    74. 		 
    75. 		.loading span:nth-child(3) {
    76. 		  animation: i3 5.5s 0.6s infinite;
    77. 		}
    78. 		 
    79. 		.loading span:nth-child(4) {
    80. 		  animation: i4 5.5s 0.8s infinite;
    81. 		}
    82. 		 
    83. 		.loading span:nth-child(5) {
    84. 		  animation: i5 5.5s 1s infinite;
    85. 		}
    86. 		 
    87. 		.loading span:nth-child(6) {
    88. 		  animation: i6 5.5s 1.2s infinite;
    89. 		}
    90. 		 
    91. 		@keyframes i1 {
    92. 		  0% {
    93. 		    opacity: 1;
    94. 		    transform: rotate(190deg);
    95. 		    animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);
    96. 		  }
    97. 		  7% {
    98. 		    opacity: 1;
    99. 		    transform: rotate(300deg);
    100. 		    animation-timing-function: linear;
    101. 		  }
    102. 		  30% {
    103. 		    opacity: 1;
    104. 		    transform: rotate(450deg);
    105. 		    animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
    106. 		  }
    107. 		  39% {
    108. 		    opacity: 1;
    109. 		    transform: rotate(645deg);
    110. 		    animation-timing-function: linear;
    111. 		  }
    112. 		  63% {
    113. 		    opacity: 1;
    114. 		    transform: rotate(800deg);
    115. 		    animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
    116. 		  }
    117. 		  68% {
    118. 		    opacity: 1;
    119. 		    transform: rotate(920deg);
    120. 		    animation-timing-function: ease-in;
    121. 		  }
    122. 		  69% {
    123. 		    opacity: 0;
    124. 		    transform: rotate(930deg);
    125. 		  }
    126. 		}
    127. 		@keyframes i2 {
    128. 		  0% {
    129. 		    opacity: 1;
    130. 		    transform: rotate(180deg);
    131. 		    animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);
    132. 		  }
    133. 		  7% {
    134. 		    opacity: 1;
    135. 		    transform: rotate(300deg);
    136. 		    animation-timing-function: linear;
    137. 		  }
    138. 		  30% {
    139. 		    opacity: 1;
    140. 		    transform: rotate(450deg);
    141. 		    animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
    142. 		  }
    143. 		  39% {
    144. 		    opacity: 1;
    145. 		    transform: rotate(645deg);
    146. 		    animation-timing-function: linear;
    147. 		  }
    148. 		  63% {
    149. 		    opacity: 1;
    150. 		    transform: rotate(800deg);
    151. 		    animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
    152. 		  }
    153. 		  68% {
    154. 		    opacity: 1;
    155. 		    transform: rotate(910deg);
    156. 		    animation-timing-function: ease-in;
    157. 		  }
    158. 		  69% {
    159. 		    opacity: 0;
    160. 		    transform: rotate(920deg);
    161. 		  }
    162. 		}
    163. 		@keyframes i3 {
    164. 		  0% {
    165. 		    opacity: 1;
    166. 		    transform: rotate(170deg);
    167. 		    animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);
    168. 		  }
    169. 		  7% {
    170. 		    opacity: 1;
    171. 		    transform: rotate(300deg);
    172. 		    animation-timing-function: linear;
    173. 		  }
    174. 		  30% {
    175. 		    opacity: 1;
    176. 		    transform: rotate(450deg);
    177. 		    animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
    178. 		  }
    179. 		  39% {
    180. 		    opacity: 1;
    181. 		    transform: rotate(645deg);
    182. 		    animation-timing-function: linear;
    183. 		  }
    184. 		  63% {
    185. 		    opacity: 1;
    186. 		    transform: rotate(800deg);
    187. 		    animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
    188. 		  }
    189. 		  68% {
    190. 		    opacity: 1;
    191. 		    transform: rotate(900deg);
    192. 		    animation-timing-function: ease-in;
    193. 		  }
    194. 		  69% {
    195. 		    opacity: 0;
    196. 		    transform: rotate(910deg);
    197. 		  }
    198. 		}
    199. 		@keyframes i4 {
    200. 		  0% {
    201. 		    opacity: 1;
    202. 		    transform: rotate(160deg);
    203. 		    animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);
    204. 		  }
    205. 		  7% {
    206. 		    opacity: 1;
    207. 		    transform: rotate(300deg);
    208. 		    animation-timing-function: linear;
    209. 		  }
    210. 		  30% {
    211. 		    opacity: 1;
    212. 		    transform: rotate(450deg);
    213. 		    animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
    214. 		  }
    215. 		  39% {
    216. 		    opacity: 1;
    217. 		    transform: rotate(645deg);
    218. 		    animation-timing-function: linear;
    219. 		  }
    220. 		  63% {
    221. 		    opacity: 1;
    222. 		    transform: rotate(800deg);
    223. 		    animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
    224. 		  }
    225. 		  68% {
    226. 		    opacity: 1;
    227. 		    transform: rotate(890deg);
    228. 		    animation-timing-function: ease-in;
    229. 		  }
    230. 		  69% {
    231. 		    opacity: 0;
    232. 		    transform: rotate(900deg);
    233. 		  }
    234. 		}
    235. 		@keyframes i5 {
    236. 		  0% {
    237. 		    opacity: 1;
    238. 		    transform: rotate(150deg);
    239. 		    animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);
    240. 		  }
    241. 		  7% {
    242. 		    opacity: 1;
    243. 		    transform: rotate(300deg);
    244. 		    animation-timing-function: linear;
    245. 		  }
    246. 		  30% {
    247. 		    opacity: 1;
    248. 		    transform: rotate(450deg);
    249. 		    animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
    250. 		  }
    251. 		  39% {
    252. 		    opacity: 1;
    253. 		    transform: rotate(645deg);
    254. 		    animation-timing-function: linear;
    255. 		  }
    256. 		  63% {
    257. 		    opacity: 1;
    258. 		    transform: rotate(800deg);
    259. 		    animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
    260. 		  }
    261. 		  68% {
    262. 		    opacity: 1;
    263. 		    transform: rotate(880deg);
    264. 		    animation-timing-function: ease-in;
    265. 		  }
    266. 		  69% {
    267. 		    opacity: 0;
    268. 		    transform: rotate(880deg);
    269. 		  }
    270. 		}
    271. 		@keyframes i6 {
    272. 		  0% {
    273. 		    opacity: 1;
    274. 		    transform: rotate(140deg);
    275. 		    animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);
    276. 		  }
    277. 		  7% {
    278. 		    opacity: 1;
    279. 		    transform: rotate(300deg);
    280. 		    animation-timing-function: linear;
    281. 		  }
    282. 		  30% {
    283. 		    opacity: 1;
    284. 		    transform: rotate(450deg);
    285. 		    animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
    286. 		  }
    287. 		  39% {
    288. 		    opacity: 1;
    289. 		    transform: rotate(645deg);
    290. 		    animation-timing-function: linear;
    291. 		  }
    292. 		  63% {
    293. 		    opacity: 1;
    294. 		    transform: rotate(800deg);
    295. 		    animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
    296. 		  }
    297. 		  68% {
    298. 		    opacity: 1;
    299. 		    transform: rotate(870deg);
    300. 		    animation-timing-function: ease-in;
    301. 		  }
    302. 		  69% {
    303. 		    opacity: 0;
    304. 		    transform: rotate(880deg);
    305. 		  }
    306. 		}

    三、完整代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>F11伪装更新页面title>
    8.     
    9. 	<style>
    10. 		html,
    11. 		body,
    12. 		div {
    13. 		  margin: 0;
    14. 		  padding: 0;
    15. 		}
    16. 		 
    17. 		html,
    18. 		body {
    19. 		  width: 100%;
    20. 		  height: 100%;
    21. 		}
    22. 		.tips-to{
    23. 		  text-align: center;
    24. 		  color: #ffffff;
    25. 		  font-weight: 400;
    26. 		  font-size: 18px;
    27. 		  font-style:normal;
    28. 		  position: absolute;
    29. 		  bottom: 68px;
    30. 		  left: 0;
    31. 		  right: 0;
    32. 		}
    33. 		.update,.tips-one{
    34. 		  width: 375px;
    35. 		  text-align: center;
    36. 		  color: #ffffff;
    37. 		  font-weight: 400;
    38. 		  font-size: 18px;
    39. 		  font-style:normal;
    40. 		  margin: 0;
    41. 		}
    42. 		.text{
    43. 		  margin: 0 auto;
    44. 		  margin-top: 68px;
    45. 		  margin-left: -163px;
    46. 		}
    47. 		.loading i {
    48. 		  margin: auto;
    49. 		  position: absolute;
    50. 		  top: calc(50% - 120px);
    51. 		  left: calc(50% - 20px);
    52. 		  width: 45px;
    53. 		  height: 45px;
    54. 		  display: block;
    55. 		}
    56. 		 
    57. 		.loading span {
    58. 		  position: absolute;
    59. 		  width: 100%;
    60. 		  height: 100%;
    61. 		  opacity: 0;
    62. 		}
    63. 		 
    64. 		.loading span:after {
    65. 		  content: "";
    66. 		  display: block;
    67. 		  position: absolute;
    68. 		  left: 0px;
    69. 		  top: 0px;
    70. 		  width: 6px;
    71. 		  height: 6px;
    72. 		  background: var(--main, #ffffff);
    73. 		  border-radius: 50%;
    74. 		}
    75. 		 
    76. 		.loading span:nth-child(1) {
    77. 		  animation: i1 5.5s 0.2s infinite;
    78. 		}
    79. 		 
    80. 		.loading span:nth-child(2) {
    81. 		  animation: i2 5.5s 0.4s infinite;
    82. 		}
    83. 		 
    84. 		.loading span:nth-child(3) {
    85. 		  animation: i3 5.5s 0.6s infinite;
    86. 		}
    87. 		 
    88. 		.loading span:nth-child(4) {
    89. 		  animation: i4 5.5s 0.8s infinite;
    90. 		}
    91. 		 
    92. 		.loading span:nth-child(5) {
    93. 		  animation: i5 5.5s 1s infinite;
    94. 		}
    95. 		 
    96. 		.loading span:nth-child(6) {
    97. 		  animation: i6 5.5s 1.2s infinite;
    98. 		}
    99. 		 
    100. 		@keyframes i1 {
    101. 		  0% {
    102. 		    opacity: 1;
    103. 		    transform: rotate(190deg);
    104. 		    animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);
    105. 		  }
    106. 		  7% {
    107. 		    opacity: 1;
    108. 		    transform: rotate(300deg);
    109. 		    animation-timing-function: linear;
    110. 		  }
    111. 		  30% {
    112. 		    opacity: 1;
    113. 		    transform: rotate(450deg);
    114. 		    animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
    115. 		  }
    116. 		  39% {
    117. 		    opacity: 1;
    118. 		    transform: rotate(645deg);
    119. 		    animation-timing-function: linear;
    120. 		  }
    121. 		  63% {
    122. 		    opacity: 1;
    123. 		    transform: rotate(800deg);
    124. 		    animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
    125. 		  }
    126. 		  68% {
    127. 		    opacity: 1;
    128. 		    transform: rotate(920deg);
    129. 		    animation-timing-function: ease-in;
    130. 		  }
    131. 		  69% {
    132. 		    opacity: 0;
    133. 		    transform: rotate(930deg);
    134. 		  }
    135. 		}
    136. 		@keyframes i2 {
    137. 		  0% {
    138. 		    opacity: 1;
    139. 		    transform: rotate(180deg);
    140. 		    animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);
    141. 		  }
    142. 		  7% {
    143. 		    opacity: 1;
    144. 		    transform: rotate(300deg);
    145. 		    animation-timing-function: linear;
    146. 		  }
    147. 		  30% {
    148. 		    opacity: 1;
    149. 		    transform: rotate(450deg);
    150. 		    animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
    151. 		  }
    152. 		  39% {
    153. 		    opacity: 1;
    154. 		    transform: rotate(645deg);
    155. 		    animation-timing-function: linear;
    156. 		  }
    157. 		  63% {
    158. 		    opacity: 1;
    159. 		    transform: rotate(800deg);
    160. 		    animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
    161. 		  }
    162. 		  68% {
    163. 		    opacity: 1;
    164. 		    transform: rotate(910deg);
    165. 		    animation-timing-function: ease-in;
    166. 		  }
    167. 		  69% {
    168. 		    opacity: 0;
    169. 		    transform: rotate(920deg);
    170. 		  }
    171. 		}
    172. 		@keyframes i3 {
    173. 		  0% {
    174. 		    opacity: 1;
    175. 		    transform: rotate(170deg);
    176. 		    animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);
    177. 		  }
    178. 		  7% {
    179. 		    opacity: 1;
    180. 		    transform: rotate(300deg);
    181. 		    animation-timing-function: linear;
    182. 		  }
    183. 		  30% {
    184. 		    opacity: 1;
    185. 		    transform: rotate(450deg);
    186. 		    animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
    187. 		  }
    188. 		  39% {
    189. 		    opacity: 1;
    190. 		    transform: rotate(645deg);
    191. 		    animation-timing-function: linear;
    192. 		  }
    193. 		  63% {
    194. 		    opacity: 1;
    195. 		    transform: rotate(800deg);
    196. 		    animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
    197. 		  }
    198. 		  68% {
    199. 		    opacity: 1;
    200. 		    transform: rotate(900deg);
    201. 		    animation-timing-function: ease-in;
    202. 		  }
    203. 		  69% {
    204. 		    opacity: 0;
    205. 		    transform: rotate(910deg);
    206. 		  }
    207. 		}
    208. 		@keyframes i4 {
    209. 		  0% {
    210. 		    opacity: 1;
    211. 		    transform: rotate(160deg);
    212. 		    animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);
    213. 		  }
    214. 		  7% {
    215. 		    opacity: 1;
    216. 		    transform: rotate(300deg);
    217. 		    animation-timing-function: linear;
    218. 		  }
    219. 		  30% {
    220. 		    opacity: 1;
    221. 		    transform: rotate(450deg);
    222. 		    animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
    223. 		  }
    224. 		  39% {
    225. 		    opacity: 1;
    226. 		    transform: rotate(645deg);
    227. 		    animation-timing-function: linear;
    228. 		  }
    229. 		  63% {
    230. 		    opacity: 1;
    231. 		    transform: rotate(800deg);
    232. 		    animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
    233. 		  }
    234. 		  68% {
    235. 		    opacity: 1;
    236. 		    transform: rotate(890deg);
    237. 		    animation-timing-function: ease-in;
    238. 		  }
    239. 		  69% {
    240. 		    opacity: 0;
    241. 		    transform: rotate(900deg);
    242. 		  }
    243. 		}
    244. 		@keyframes i5 {
    245. 		  0% {
    246. 		    opacity: 1;
    247. 		    transform: rotate(150deg);
    248. 		    animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);
    249. 		  }
    250. 		  7% {
    251. 		    opacity: 1;
    252. 		    transform: rotate(300deg);
    253. 		    animation-timing-function: linear;
    254. 		  }
    255. 		  30% {
    256. 		    opacity: 1;
    257. 		    transform: rotate(450deg);
    258. 		    animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
    259. 		  }
    260. 		  39% {
    261. 		    opacity: 1;
    262. 		    transform: rotate(645deg);
    263. 		    animation-timing-function: linear;
    264. 		  }
    265. 		  63% {
    266. 		    opacity: 1;
    267. 		    transform: rotate(800deg);
    268. 		    animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
    269. 		  }
    270. 		  68% {
    271. 		    opacity: 1;
    272. 		    transform: rotate(880deg);
    273. 		    animation-timing-function: ease-in;
    274. 		  }
    275. 		  69% {
    276. 		    opacity: 0;
    277. 		    transform: rotate(880deg);
    278. 		  }
    279. 		}
    280. 		@keyframes i6 {
    281. 		  0% {
    282. 		    opacity: 1;
    283. 		    transform: rotate(140deg);
    284. 		    animation-timing-function: cubic-bezier(0.29, 0.44, 0.32, 0.74);
    285. 		  }
    286. 		  7% {
    287. 		    opacity: 1;
    288. 		    transform: rotate(300deg);
    289. 		    animation-timing-function: linear;
    290. 		  }
    291. 		  30% {
    292. 		    opacity: 1;
    293. 		    transform: rotate(450deg);
    294. 		    animation-timing-function: cubic-bezier(0.53, 0.27, 0.37, 0.81);
    295. 		  }
    296. 		  39% {
    297. 		    opacity: 1;
    298. 		    transform: rotate(645deg);
    299. 		    animation-timing-function: linear;
    300. 		  }
    301. 		  63% {
    302. 		    opacity: 1;
    303. 		    transform: rotate(800deg);
    304. 		    animation-timing-function: cubic-bezier(0.5, 0.32, 0.82, 0.54);
    305. 		  }
    306. 		  68% {
    307. 		    opacity: 1;
    308. 		    transform: rotate(870deg);
    309. 		    animation-timing-function: ease-in;
    310. 		  }
    311. 		  69% {
    312. 		    opacity: 0;
    313. 		    transform: rotate(880deg);
    314. 		  }
    315. 		}
    316. 	style>
    317. 	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js">script>
    318. head>
    319. <body onclick="changeFullScreen()" style="background-color: #3277D1; cursor:none;">
    320.     <div class="loading">
    321.         <i>
    322.             <span>span>
    323.             <span>span>
    324.             <span>span>
    325.             <span>span>
    326.             <span>span>
    327.             <span>span>
    328.             <div class="text">
    329.                 <h3 class="update">正在进行更新    5%h3>
    330.                 <h3 class="tips-one">请不要关闭电脑。完成此操作需要一定时间。h3>
    331.             div>
    332.         i>
    333.         
    334.     div>
    335.  
    336.     <div class="tips-to">
    337.         你的电脑将重启若干次
    338.     div>
    339. body>
    340. <script>
    341. function changeFullScreen() {
    342. 	const element = document.documentElement
    343.     console.log(1)
    344. 	// 如果是全屏状态
    345. 	if (this.fullscreen) {
    346. 		// 如果浏览器有这个Function
    347. 		if (document.exitFullscreen) {
    348. 			document.exitFullscreen()
    349. 		} else if (document.webkitCancelFullScreen) {
    350. 			document.webkitCancelFullScreen()
    351. 		} else if (document.mozCancelFullScreen) {
    352. 			document.mozCancelFullScreen()
    353. 		} else if (document.msExitFullscreen) {
    354. 			document.msExitFullscreen()
    355. 		}
    356. 	} else {
    357. 		// 如果浏览器有这个Function
    358. 		if (element.requestFullscreen) {
    359. 			element.requestFullscreen()
    360. 		} else if (element.webkitRequestFullScreen) {
    361. 			element.webkitRequestFullScreen()
    362. 		} else if (element.mozRequestFullScreen) {
    363. 			element.mozRequestFullScreen()
    364. 		} else if (element.msRequestFullscreen) {
    365. 			element.msRequestFullscreen()
    366. 		}
    367. 	}
    368. 	// 判断全屏状态的变量
    369. 	this.fullscreen = !this.fullscreen
    370. }
    371.  
    372. script>
    373. html>

    总结

            如果您有更好的创业demo，欢迎交流~

         

  • 相关阅读:
    Python完整教程
    EuroVis2022论文—2—FP-长论文
    go的singleFlight学习
    leetcode_2558 从数量最多的堆取走礼物
    java 面试之经典算法篇
    Unity基础课程之物理引擎8-扔保龄球游戏案例（完）
    html相关知识点 笔记
    【Python黑科技】制作一个定时小闹钟，自动发送系统通知提示（保姆级图文+实现代码）
    对比勒索病毒和熊猫烧香，谈如何保证服务器端数据安全?
    【pytorch 中 torch.max 和 torch.argmax 的区别】
  • 原文地址：https://blog.csdn.net/XU441520/article/details/133924798