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