當前位置:首頁 » 網頁前端 » js腳本實現夜間模式
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

js腳本實現夜間模式

發布時間: 2022-09-18 17:40:17

『壹』 wkwebview 怎麼設置夜間模式

進入iOS「設置」-「通用」-「輔助功能」,然後選擇「反轉顏色」。 但是這個顏色,我看著很別扭……

『貳』 現在哪些手機瀏覽器有夜間模式

手機版的UC瀏覽器就有夜間模式,關於夜間模式和日間模式的切換步驟如下:

  1. 打開手機版的UC瀏覽器,點擊底部中間的菜單

  2. 點擊菜單後有個夜間模式點擊後切換到夜間模式

  3. 如果在夜間模式,同樣操作便切換到日間模式

詳細步驟見截圖:

『叄』 UC瀏覽器有什麼功能

第一:夜間模式。
殼瀏覽器呢,要實現夜間模式,只能採用javascript腳本來實現。這個腳本目的是更改頁面的全部的css樣式為黑色。
要實現這點,首先要載入頁面,然後插入腳本,更改css的顏色為黑色。
這個過程,採用腳本方式比較慢,另外一個,不是所有的顏色能更改。有時候還會出現閃白等問題。
而uc瀏覽器在這方面做得很深入。
第二:預讀功能。
殼瀏覽器,要實現預讀功能,則需要通過javascript腳本來判斷頁面上有沒有「下一頁」。這需要等待頁面載入完成之後才能執行預讀的javascript腳本。而uc呢,則可以在構建dom樹的時候就可以開啟預讀。
這個小小的時間差異,使得uc的預讀是比較及時。
假如頁面很大,需要很長時間才能載入完,才能執行預讀。這時候差距就會出來了。
第三:閱讀模式。所有的殼瀏覽器的閱讀模式都是採用readibilitiy.js的腳本來實現,或者採用正則表達式來實現,就是hardcode一些網站,那些東西是標題,那些東西是正文。
只能這些網站。如果超出這些白名單,則無法處理了。
而uc在這方面做得很深入,不需要白名單。
第四:省流量。
多數的省流量實現走google轉碼或者網路轉碼,實現的方式就是輸入一個url,然後google轉碼返回一個簡化之後的html文本。這個文本其實是wap2.0而已。輸出的還是html文本。而uc的省瀏量是真正的對每一個html元素都進行節省。這樣出來的省瀏覽器,實際上是可以高達90%的。
在這方面,唯一類似的operamini功能。
第五:單手操作。
uc是唯一把單手操作作為must-have必備考慮的。
所以看起來,uc的多標簽功能好像很醜陋似的,為何不像pc那樣的多標簽的。而採用的是菜單式的多標簽。
就是因為單手操作。就是希望你,在公交車上,在地鐵上,當你一手扶著欄桿的時候,另一個手還可以操作uc。
雖然,很多情況下,你可能你是坐在位置上,雙手是解放的。但uc依然會考慮你,在單手情況下該怎麼辦。
雖然很多情況下,你是用wifi的。但是uc會考慮你在野外的時候,沒有wifi的時候怎麼使用uc。在野外的時候,當你非常需要用網路搜索東西時候,而你卻搜索不了的時候,想想,再漂亮的瀏覽器,又有何用。
第六:復制,你會發現自由復制是跟殼瀏覽器很大不同的。

『肆』 小程序皮膚功能——夜間模式

老規矩,先上效果圖

個人對夜間模式這個功能情有獨鍾
晚上黑燈瞎火的看手機,屏幕亮度就算調到最低依然很是刺眼呀
所以我一直用某瀏覽器,因為有夜間模式

言歸正傳,依然是分析功能點
1.點擊按鈕,切換一套css(這個功能很簡單)
2.把皮膚設置保存到全局變數,在訪問其它頁面時也能有效果
3.把設置保存到本地,退出應用再進來時,依然載入上次設置的皮膚

先從切換開始吧,switch很少用,還是貼一下吧

按鈕功能OK了,現在我們去寫樣式
像這種黑的風格的皮膚,大背景色用#000
小背景用#333,文字用#999吧,我也懶得用取色器了

既然需要一套皮膚,那我們就去文件夾外面寫一個樣式文件
就新建一個skin目錄,下面寫一個dark.wxss吧
然後呢
我們把普通模式下的wxss復制一份,貼進來
把和顏色有關的屬性留下來,其它刪除
像background呀,border,color等。。其它統統不要

最後發現就剩這么點了。。

大家發現,我這些樣式名稱都有dark-box
這個dark-box就是最外面,也是最大的盒子(除了默認的page哈)

my-box是普通模式,dark-box就是夜間模式

當然你也可以在寫一個皮膚樣式,黃、紅、藍。。。
現在這個寫法,我們只用控制變數 skinStyle的值就能改變皮膚樣式了
我們還能寫個blue-box的皮膚,然後設置變數為skinStyle為blue就行了

還有關鍵一步,在wxss文件中把這個皮膚文件引入要顯示的頁面

接下來第二步,這就簡單了。。
設置到全局變數嘛,先getApp(),然後傳過去就行了

現在在訪問其它頁面的時候,dark皮膚也會傳進去
我只寫了一個頁面哈,所以只有這個頁面會有變化

現在第三步了,保存到localstroge中

完了嗎?並沒有。。
我們要在程序打開時就獲取皮膚設置
所以要在app.js去get與皮膚相關的信息

現在我們設置黑色皮膚,然後退出,進去之後不是黑色
因為我們在頁面載入時沒設置

現在再來看看

結果按鈕的狀態是關閉,皮膚卻是開著
因為開關重置了
這個就交給大家自己解決啦,啟動時判斷一下就OK啦
需要源碼的話我再上傳

『伍』 UC瀏覽器有什麼功能

第一:夜間模式。 殼瀏覽器呢,要實現夜間模式,只能採用javascript腳本來實現。這個腳本目的是更改頁面的全部的css樣式為黑色。 要實現這點,首先要載入頁面,然後插入腳本,更改css的顏色為黑色。 這個過程,採用腳本方式比較慢,另外一個,不是所有的顏色能更改。有時候還會出現閃白等問題。 而UC瀏覽器在這方面做得很深入。
第二:預讀功能。 殼瀏覽器,要實現預讀功能,則需要通過javascript腳本來判斷頁面上有沒有「下一頁」。這需要等待頁面載入完成之後才能執行預讀的javascript腳本。而UC呢,則可以在構建DOM樹的時候就可以開啟預讀。 這個小小的時間差異,使得UC的預讀是比較及時。 假如頁面很大,需要很長時間才能載入完,才能執行預讀。這時候差距就會出來了。
第三:閱讀模式。所有的殼瀏覽器的閱讀模式都是採用Readibilitiy.js的腳本來實現,或者採用正則表達式來實現,就是hardcode一些網站,那些東西是標題,那些東西是正文。 只能這些網站。如果超出這些白名單,則無法處理了。 而UC在這方面做得很深入,不需要白名單。
第四:省流量。 多數的省流量實現走google轉碼或者網路轉碼,實現的方式就是輸入一個url,然後google轉碼返回一個簡化之後的html文本。這個文本其實是wap2.0而已。輸出的還是html文本。而UC的省瀏量是真正的對每一個html元素都進行節省。這樣出來的省瀏覽器,實際上是可以高達90%的。 在這方面,唯一類似的OperaMini功能。
第五:單手操作。 UC是唯一把單手操作作為must-have必備考慮的。 所以看起來,UC的多標簽功能好像很醜陋似的,為何不像PC那樣的多標簽的。而採用的是菜單式的多標簽。 就是因為單手操作。就是希望你,在公交車上,在地鐵上,當你一手扶著欄桿的時候,另一個手還可以操作UC。
雖然,很多情況下,你可能你是坐在位置上,雙手是解放的。但UC依然會考慮你,在單手情況下該怎麼辦。
雖然很多情況下,你是用wifi的。但是UC會考慮你在野外的時候,沒有wifi的時候怎麼使用UC。在野外的時候,當你非常需要用網路搜索東西時候,而你卻搜索不了的時候,想想,再漂亮的瀏覽器,又有何用。
第六:復制,你會發現自由復制是跟殼瀏覽器很大不同的。

『陸』 手機瀏覽器如何用css注入的方法實現夜間模式

什麼叫css注入?
弄個按鈕,點擊後把網頁淺色背景變深色背景,把黑色文字變淺色文字就行了。