利用js實(shí)現(xiàn)簡(jiǎn)單開關(guān)燈代碼
更新時(shí)間：2021年11月23日 09:22:29 作者：L-L
這篇文章主要分享的是如何利用js實(shí)現(xiàn)簡(jiǎn)單開關(guān)燈代碼，下面文字圍繞js實(shí)現(xiàn)簡(jiǎn)單開關(guān)燈的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考以下，希望對(duì)大家又所幫助
body部分：
<button>開關(guān)燈</button>
script部分：
<script>
// window.onload 是窗口加載事件，可以實(shí)現(xiàn)將代碼寫到元素上面
window.addEventListener('load', function () {
var btn = document.querySelector('button');
// 定義一個(gè)變量，用來(lái)判斷燈的開關(guān)情況
var flag = 0;
btn.onclick = function () {
if (flag == 0) {
document.body.style.backgroundColor = 'black';
flag = 1;
} else {
document.body.style.backgroundColor = 'pink';
flag = 0;
}
}
})
</script>
如果script直接寫到button下面的話，
則采用以下代碼：
<script>
var btn = document.querySelector('button');
var flag = 0;
btn.onclick = function () {
if (flag == 0) {
document.body.style.backgroundColor = 'black';
flag = 1;
} else {
document.body.style.backgroundColor = 'pink';
flag = 0;
}
}
</script>
到此這篇關(guān)于 利用js實(shí)現(xiàn)簡(jiǎn)單開關(guān)燈代碼的文章就介紹到這了,更多相關(guān) js實(shí)現(xiàn)簡(jiǎn)單開關(guān)燈內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript文檔對(duì)象模型DOM，當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型，通過(guò)可編程的對(duì)象模型，JavaScript 獲得了足夠的能力來(lái)創(chuàng)建動(dòng)態(tài)的 HTML。下面來(lái)看看文章得詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了微信小程序 數(shù)據(jù)綁定詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了javascript 判斷是否是微信瀏覽器的方法的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了JavaScript?鍵盤事件的處理及屬性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了微信小程序 生命周期詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了JavaScript的提攜小技巧，如：過(guò)濾唯一值、短路求值、轉(zhuǎn)換Boolean型等等，想詳情了解的小伙伴請(qǐng)參考下面文章的具體內(nèi)容2021-09-09
這篇文章主要介紹了在js中修改html body的樣式，下面文章圍繞js修改html 和body樣式的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)大家有所幫助2021-11-11
微信小程序 搖一搖抽獎(jiǎng)簡(jiǎn)單實(shí)例實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序 搖一搖抽獎(jiǎng)簡(jiǎn)單實(shí)例實(shí)現(xiàn)代碼的相關(guān)資料,這里實(shí)現(xiàn)搖一搖抽獎(jiǎng)的功能，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了TypeScript枚舉類型，所謂的枚舉類型就是為一組數(shù)值賦予名字，下面我們來(lái)看看文章是怎么介紹的吧,需要的小伙伴也可以參考一下，希望對(duì)你有所幫助2021-12-12
這篇文章主要介紹了TypeScript 枚舉類型，TypeScript 在 ES 原有類型基礎(chǔ)上加入枚舉類型，使得在 TypeScript 中也可以給一組數(shù)值賦予名字，這樣對(duì)開發(fā)者比較友好，可以理解枚舉就是一個(gè)字典，文章內(nèi)容圍繞TypeScript 枚舉類型展開內(nèi)容,需要的朋友可以參考一下2021-10-10