如何製作乙個簡單的換膚功能

2022-05-27 22:57:10 字數 3355 閱讀 7113

每一次的切換就會更改掉本地資訊,就不會因為重新整理而導致背景還原成預設狀態

但是!在這裡要注意一點就是,如果最開始沒有設定風格,就應該預設個預設樣式,通過查詢本地是否儲存的有該資料,如果沒有則使用預設的樣式

html

1

doctype html

>

2<

html

>

3<

head

>

4<

meta

charset

="utf-8"

/>

5<

meta

name

="viewport"

content

="width=device-width, initial-scale=1"

>

6<

title

>一鍵換膚

title

>

7head

>89

<

link

rel="stylesheet"

type

="text/css"

:href

=name

id="one"

/>

10<

link

rel="stylesheet"

type

="text/css"

href

="基礎結構.css"

id="only"

/>

11<

script

src=""

>

script

>

12<

body

>

13<

div

id=""

>

14<

div

class

="all"

>

15<

div

class

="header"

>

16<

span

>頭部導航欄

span

>

17div

>

18<

div

class

="content"

>

19<

span

>中部內容區

span

>

20div

>

21<

div

class

="foot"

>

22<

span

>

span

><

br>

23<

span

>背景風格切換

span

><

br>

24<

button

type

="button"

id="maiden"

>少女系

button

>

25<

button

type

="button"

id="ocean"

>海洋系

button

>

26<

button

type

="button"

id="brown"

>淺棕系

button

>

27<

button

type

="button"

id="forest"

>森林系

button

>

28div

>

29div

>

30div

>

31body

>

32<

script

src="background.js"

>

script

>

3334

html

>

css(有幾套樣式,我這裡就只發一套,有強迫症的朋友可以自己改一下)

1

.header

5.content

9.foot

13.all

1718

button

23button:active

主體結構css

1

/*基本結構 */2

.all

7.header

14.content

21.foot

29.all

33button

js(寫的可能重複**比較多,沒有去更好的優化)

1

var list=[,,,]2//

提取3var name = localstorage.getitem("name"); 45

//判斷本地是否有儲存的資訊,如果沒有,則預設選擇

6if(name==undefined)

910 $('#one').attr("href",name);

1112

13 $('#maiden').click(() =>)

19 $('#ocean').click(() =>)

25 $('#brown').click(() =>)

31 $('#forest').click(() =>)

如何製作乙個簡單的機械臂

了解如何使用可通過外部電位器控制的伺服電機製作簡單的機械臂。機械人有多種形式,包括無人機 汽車 火星車,甚至步行者。讓機械人在其環境中移動非常重要,讓它與環境進行互動同樣重要。本文將向您展示如何製作乙個能夠通過外部電位器四處移動並指向物體的簡易機械臂。伺服電機 線性電位器 arduino uno開發...

如何在乙個成熟的應用內換膚?

全文無圖,請慎重閱讀,在16年10月我負責的應用實現了一次夜間模式,那次我基於各種調研結果自己寫了一套換膚框架,開源了一年,也有一些小夥伴用到了這套框架,能給大家提供點便利,還是挺開心的。不過本人懶癌已入膏肓,加上平時業務需求忙不過來,開源的框架的維護並沒做好,大家多多包涵。部分介面的layouti...

如何製作乙個vagrant box

因為要用的視窗應用,基於伺服器的各種box不能使用 曾經嘗試安裝桌面,沒有成功 所以試著基於ubuntu的虛擬機器建立自己的box。主要過程簡述如下 1 安裝virtualbox 2 安裝 vagrant root密碼 vagrant 使用者名稱 vagrant 使用者密碼 vagrant 4 完成...