h5 new knowledge _2 full-screen operation

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8    <div id="box" style="text-align: center;">
 9        <img src="img/mac.png" alt="">
10        <div style="text-align: center">
11            <button id="full">全屏</button>
12            <button id="cancel_full">取消全屏</button>
13            <button id = "is_full"> determines whether the full-frame </ Button>
16    </ div>
15        </ div>
14<Script the src = "JS / jQuery-3.3.1.js"> </ Script>
 . 17 <Script type = "text / HTML">
 18 is      $ ( function () {
 . 19          // 1. Get the object fullscreen 
20 is          the let = Box document.getElementById ( 'Box' );
 21 is          //   2. Full Screen 
22 is          . $ ( '# Full') ON ( 'the Click', () => {
 23 is              box.requestFullscreen ();
 24          });
 25      });
 26 is </ Script>
 27 <Script>
 28      $ ( function () {
 29          // 1. Get fullscreen objects 
30         Box = document.getElementById the let ( 'Box' );
 31 is          //   2. Full Screen 
32          . $ ( '# Full') ON ( 'the Click', () => {
 33 is              the fullScreen (Box);
 34 is          });
 35          / / 3. cancel fullscreen 
36          $ ( 'cancel_full #') ON ( 'the Click', () =>. {
 37 [              exitFullscreen ();
 38 is          });
 39          // 4. judged whether the full-frame 
40          $ ( '# is_full' ) .on ( 'the Click', () => {
 41 is             // the console.log (document.webkitIsFullScreen); 
42 is             //   the console.log (document.mozIsFullScreen);
43            //  console.log(document.isFullScreen);
44             console.log(isFullScreen());
45 
46         });
47     });
48 
49     //全屏
50     let fullScreen = (element) =>{
51         if (element.requestFullscreen) {
52             element.requestFullscreen();
53         } else if (element.msRequestFullscreen) {
54             element.msRequestFullscreen();
55         } else if (element.mozRequestFullScreen) {
56             element.mozRequestFullScreen();
57         } else if (element.webkitRequestFullscreen) {
58             element.webkitRequestFullscreen();
59         }
60     };
61 
62     //退出全屏
63     let exitFullscreen = () =>{
64         if (document.exitFullscreen) {
65             document.exitFullscreen();
66         } else if (document.msExitFullscreen) {
67             document.msExitFullscreen();
68         } else if (document.mozCancelFullScreen) {
69             document.mozCancelFullScreen();
70         } else if (document.webkitExitFullscreen) {
71             document.webkitExitFullscreen();
72         }
73     };
74 
75     let isFullScreen = () =>{
76         return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
77     }
78 
79 </script>
80 </body>
81 </html>
h5 new knowledge _2 full-screen operation

Guess you like
