網頁全屏與鎖屏顯示效果

天主要實現一個網頁相當于按鍵盤F11按鍵全屏后的功能效果，還有鎖屏界面展示效果！

具體效果圖如下：

點擊網頁中的“全屏”，“鎖屏”按鈕即可操作

全屏后的效果

鎖屏的展示界面

實現代碼如下：

html:

css:

js:

務8：全屏模式的切換。

這張就是第八，第八小姐就是講關于全屏模式的切換。回到頁面，希望有個按鈕，一點全屏娛樂模式，這一點就切換回來。可能我個人不太喜歡這種模式，但有的人會用，還是把它設計進去。

然后就在這個地方加一個圖標，有空再找一下。找了一個圖標，就找這個。jump through screen one，這有了嗎？有了，還挺好。然后就稍小了一點，再給它大一點，size，就不要說是二十，可以。點它，現在沒效果，來做這個效果。

首先給它定一個變量叫is war screen，是不是全屏的？它肯定是響應數據了，i e f，它不是默認，當然響應數據這邊可以給它添類型，比如它是birch，填birch。如果它不是，還找一個相對的，跟它相反的按鈕，收回來的按鈕，就用這個。

off for screen one，就這個，給它來復制一下，把它放松，就是衣服regan in the first three，如果它真的，就顯示上面的，否則就顯示下面的。來看一下，這邊有一個方法，就這樣可以，可能還做其他的，記得就給它定一個top切換螺絲功能，它是一個，然后再調整這個方法就行了。

就要投screen，點，沒效果，為啥沒效果？是不是點錯了？這邊點這上面，再說下面一個，放到槍上，點，看有切換效果了。怎么樣給它切換？這個是節食里面固定的方法，如果它的值，直接給它切換，就是document，the element，點a request，press greet plug，就是全屏切換。

這里切換了，這點沒效果只按a xe，所以這邊也不對，所以希望它變成這個時候就把它縮回來，這邊就要做一個判斷了，就是來判斷它是不是已經縮放了，如果它已經是展開了，就把它縮回來，也是，這個就退出，否則就把它刪遠，就簡單的刪遠，刪除就可以了。

試一下，點，點，回來了，點，點，再配合原來的一點，就全屏顯示了，舒服了，點回來。這一章就講完了，就把頁面布局都弄好了，包括動態生成菜單頁，瀏覽歷史頁，面包穴導航，把整個布局就全做好了。

下一張開始做具體業務了，首先叫做用戶的登錄，注冊新用戶，還有一個重置密碼。這節課就講到這里，拜拜。

前遇到一個需要在瀏覽器全屏展示頁面的效果,我們經常使用的就是requestFullscreen和exitFullscreen，來進行全屏或者退出全屏，但有時候我們可能需要獲取打開全屏時的窗口權限信息，這種情況下就需要使用getScreenDetails了

代碼如下

<div class="wrap">
    <div class="content">
      Setting Screen
    </div>
    <div class="btn">
      <button id="full-screen" onclick="fullScreen()">全屏</button>
      <button id="exit-full-screen" onclick="exitFullScreen()">退出全屏</button>
    </div>
  </div>
  <script>
     //獲取全屏元素，可以是具體元素或者body
    const wrap = document.querySelector('.wrap')
    let primaryScreen = null
    async function fullScreen () {
      // 檢測網頁是否有全屏元素
      if(!document.fullscreenElement){
        console.log('/screen.html [43]--1','full-screen',document.fullscreenElement);
        try {
          if(!primaryScreen) {
            //獲取可以全屏的窗口信息
            primaryScreen = (await getScreenDetails()).screens.find(
              (screen) => screen.isPrimary,
            );
          }
          console.log('/screen.html [54]--1','primaryScreen',primaryScreen);
          //將窗口信息傳給requestFullscreen,窗口將彈出確認彈框
          await wrap.requestFullscreen({ screen: primaryScreen });
        } catch (err) {
          console.error(err.name, err.message);
        }
      }
      

    }

    function exitFullScreen () {
      // 檢測網頁是否有全屏元素
      if(document.fullscreenElement) {
        // document 退出全屏
        document.exitFullscreen()
        console.log('/screen.html [43]--1','exit-full-screen',document.fullscreenElement);
      }
    }

如圖所示，點擊允許將獲取同意全屏窗口的信息

PS:

全屏元素，可以是具體元素或者body
退出全屏只能是document
在進行全屏或退出全屏時，最好進行document.fullscreenElement全屏元素獲取
getScreenDetails可以獲取系統同意全屏的窗口信息

在線咨詢

上一篇：HBuilderX，uni-app創建HTML5項目，同時支持瀏覽器和移動端
下一篇：HTML 文本格式化

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

網頁全屏與鎖屏顯示效果

您的項目需求