css部分
html,body{
width:100%;
height:100%;
}
html部分
<input type="button"value="點(diǎn)我變紅"
onclick="document.body.style.background=`red`">
<input type="button"value="點(diǎn)我變綠"
onclick="document.body.style.background=`green`">
<input type="button"value="點(diǎn)我變藍(lán)"
onclick="document.body.style.background=`blue`">
<input type="button"value="點(diǎn)我變白"
onclick="document.body.style.background=`#fff`">
<input type="button"value="點(diǎn)我變黑"
onclick="document.body.style.background=`reb(0,0,0)`">
注釋
- input是一個(gè)標(biāo)簽跷敬，type="button"指它是一個(gè)按鈕，value是這個(gè)按鈕的內(nèi)容
- onclick是點(diǎn)擊热押，點(diǎn)擊后會(huì)執(zhí)行后面的代碼
- style是樣式西傀，background是背景
版本二（函數(shù)式寫法）
css部分
html,body{
width:100%;
height:100%;
}
HTML部分
<button id="redBtn">紅色</button>
JS部分
var redBtn=document.getElementByld("redBtn");
redBtn.onclick=function(){
document.body.style.background="red"
}
注釋內(nèi)容
- var redBtn是聲明一個(gè)變量斤寇，相當(dāng)于給按鈕起個(gè)名字存起來(lái)
- 我們把要執(zhí)行的代碼放在function中存起來(lái)
- 當(dāng)我們點(diǎn)擊這個(gè)按鈕的時(shí)候，才會(huì)執(zhí)行function中的代碼
