JS實(shí)現(xiàn)指定區(qū)域的全屏顯示功能示例
本文實(shí)例講述了JS實(shí)現(xiàn)指定區(qū)域的全屏顯示功能。分享給大家供大家參考,具體如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chabaoo.cn js指定區(qū)域全屏</title> <style> #fulldiv { background: #fff; width: 100%; text-align: center; height: 100%; } </style> </head> <body> <h1>指定區(qū)域全屏測(cè)試</h1> <button id="btn">全屏按鈕</button> <div id="fulldiv"> <h1>這里是全屏顯示的內(nèi)容</h1> </div> </body> <script> var fullscreen = false; let btn = document.getElementById('btn'); let fullarea = document.getElementById('fulldiv') btn.addEventListener('click',function(){ if (fullscreen) { // 退出全屏 if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } else { // 進(jìn)入全屏 if (fullarea.requestFullscreen) { fullarea.requestFullscreen(); } else if (fullarea.webkitRequestFullScreen) { fullarea.webkitRequestFullScreen(); } else if (fullarea.mozRequestFullScreen) { fullarea.mozRequestFullScreen(); } else if (fullarea.msRequestFullscreen) { // IE11 fullarea.msRequestFullscreen(); } } fullscreen = !fullscreen; }) </script> </html>
感興趣的朋友還可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js實(shí)現(xiàn)的奧運(yùn)倒計(jì)時(shí)時(shí)鐘效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)的奧運(yùn)倒計(jì)時(shí)時(shí)鐘效果代碼,可實(shí)現(xiàn)根據(jù)指定時(shí)間進(jìn)行倒計(jì)時(shí)的實(shí)時(shí)顯示效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-12-12Bootstrap項(xiàng)目實(shí)戰(zhàn)之首頁(yè)內(nèi)容介紹(全)
本文分為兩部分介紹Bootstrap首頁(yè)內(nèi)容介紹的實(shí)現(xiàn)代碼,感興趣的小伙伴們可以參考一下2016-04-04js實(shí)現(xiàn)完美兼容各大瀏覽器的人民幣大小寫(xiě)相互轉(zhuǎn)換
在基于網(wǎng)頁(yè)的打印輸出或報(bào)表中,經(jīng)常會(huì)牽扯到金額的大寫(xiě),每次都打上去很麻煩,所以想法用一個(gè)JavaScript客戶(hù)端腳本來(lái)實(shí)現(xiàn)自動(dòng)轉(zhuǎn)換,只需在需要顯示大寫(xiě)金額的時(shí)候調(diào)用該JS函數(shù),下面我們就來(lái)匯總下吧2015-10-10js實(shí)現(xiàn)表格數(shù)據(jù)搜索
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)表格數(shù)據(jù)搜索,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08提高網(wǎng)站性能之 如何對(duì)待JavaScript
在一個(gè)頁(yè)面中,每一個(gè)外部JavaScript 及CSS文件都會(huì)導(dǎo)致一個(gè)額外的HTTP請(qǐng)求。所以,如何合理的合并JavaScript 文件及CSS文件也是前端工程師應(yīng)該考慮的。2009-10-10網(wǎng)絡(luò)之美 JavaScript中Get和Set訪問(wèn)器的實(shí)現(xiàn)代碼
前兩天IE9 Beta版發(fā)布了,對(duì)于從事Web開(kāi)發(fā)的朋友們來(lái)說(shuō)真是個(gè)好消息啊,希望將來(lái)有一天各個(gè)瀏覽器都能遵循統(tǒng)一的標(biāo)準(zhǔn)。今天要和大家分享的是JavaScript中的Get和Set訪問(wèn)器,和C#中的訪問(wèn)器非常相似。2010-09-09微信小程序 連續(xù)旋轉(zhuǎn)動(dòng)畫(huà)(this.animation.rotate)詳解
這篇文章主要介紹了微信小程序 連續(xù)旋轉(zhuǎn)動(dòng)畫(huà)(this.animation.rotate)詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04