小編這次要給大家分享的是JavaScript或jQuery如何實現網站夜間/高亮模式,文章內容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
創(chuàng)建夜間/高亮模式的步驟:
創(chuàng)建一個HTML文檔。
為文檔文件以及黑暗模式創(chuàng)建CSS。
添加一個開關轉換器按鈕,以在明暗模式之間進行切換。
使用javascript或jQuery代碼向開關轉換器添加功能,以在明暗模式之間切換。
示例1:以下示例演示了使用JQuery代碼在明暗模式之間進行切換。它基本上通過使用函數hasClass(),addClass()和removeClass()方法來工作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Dark Mode </title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> <style> body{ padding:10% 3% 10% 3%; text-align:center; } img{ height:140px; width:140px; } h2{ color: #32a852; } .mode { float:right; } .change { cursor: pointer; border: 1px solid #555; border-radius: 40%; width: 20px; text-align: center; padding: 5px; margin-left: 8px; } .dark{ color: #e6e6e6; } </style> </head> <body> <div class="mode"> Dark mode: <span class="change"> OFF </span> </div> <div> <h2> GeeksforGeeks </h2> <p> <i> A Computer Science Portal for Geeks </i> </p> <h4> Light and Dark Mode </h4> <img src="https://cache.yisu.com/upload/information/20200622/114/1684.png"> <p> Click on the switch on top-right to move to dark mode. </p> </div> <script> $(".change").on("click", function() { if ($("body").hasClass("dark")) { $("body").removeClass("dark"); $(".change").text("OFF"); } else { $("body").addClass("dark"); $(".change").text("ON"); } }); </script> </body> </html>
另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
文章標題:JavaScript或jQuery如何實現網站夜間/高亮模式-創(chuàng)新互聯
文章源于:http://chinadenli.net/article48/cdhgep.html
成都網站建設公司_創(chuàng)新互聯,為您提供外貿建站、做網站、ChatGPT、搜索引擎優(yōu)化、企業(yè)建站、企業(yè)網站制作
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯