快捷導(dǎo)航

JavaScript實(shí)現(xiàn)開關(guān)等效果

更新時(shí)間：2017年09月08日 11:42:13 作者：ruirui_1996

本文給大家分享一段簡(jiǎn)單的代碼基于js實(shí)現(xiàn)開關(guān)燈效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧

廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>開關(guān)燈</title>
 <style type="text/css">
  html, body {
   margin: 0px;
   padding: 0px;
   width: 100%;
   height: 100%;
   cursor: pointer;
   background-color: white;
  }
 </style>
</head>
<body id="bodyEle">
<script type="text/javascript">
 var oBody = document.getElementById("bodyEle");
 oBody.onclick = function () {
  var bg = this.style.backgroundColor;
  switch (bg) {
   case "white":
    this.style.backgroundColor = "red";
    break;
   case "red":
    this.style.backgroundColor = "black";
    break;
   default:
    this.style.backgroundColor = "white";
  }

 }
</script>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的JavaScript實(shí)現(xiàn)開關(guān)等效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

用云開發(fā)Cloudbase實(shí)現(xiàn)小程序多圖片內(nèi)容安全監(jiān)測(cè)的代碼詳解
這篇文章主要介紹了用云開發(fā)Cloudbase實(shí)現(xiàn)小程序多圖片內(nèi)容安全監(jiān)測(cè),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06
微信小程序 wx:for 與 wx:for-items 與 wx:key的正確用法
這篇文章主要介紹了微信小程序 wx:for 與 wx:for-items 與 wx:key的正確用法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
???????基于el-table和el-pagination實(shí)現(xiàn)數(shù)據(jù)的分頁效果流程詳解
本文主要介紹了???????基于el-table和el-pagination實(shí)現(xiàn)數(shù)據(jù)的分頁效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-11-11
ES6解構(gòu)賦值實(shí)例詳解
這篇文章主要介紹了ES6解構(gòu)賦值,結(jié)合實(shí)例形式較為詳細(xì)的分析了ES6結(jié)構(gòu)賦值的基本概念、原理與使用方法,需要的朋友可以參考下
2017-10-10
微信小程序使用Vant Weapp組件庫的方法步驟
這篇文章主要給大家介紹了關(guān)于微信小程序使用Vant Weapp組件庫的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
微信小程序如何獲取圖片寬度與高度
這篇文章主要給大家介紹了關(guān)于微信小程序如何獲取圖片寬度與高度的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
簡(jiǎn)單的JavaScript互斥鎖分享
這篇文章主要介紹了簡(jiǎn)單的JavaScript互斥鎖的相關(guān)資料,需要的朋友可以參考下
2014-02-02
Bootstrap 源代碼分析(未完待續(xù))
這篇文章主要為大家詳細(xì)分析了Bootstrap部分源代碼，先提供給大家學(xué)習(xí)，感興趣的小伙伴們可以參考一下
2016-08-08
在javascript中如何得到中英文混合字符串的長(zhǎng)度
本文為大家介紹下Javascript中如何得到中英文混合字符串的長(zhǎng)度，下面有個(gè)不錯(cuò)的教程，感興趣的朋友可以參考下
2014-01-01
JS中實(shí)現(xiàn)replaceAll的方法(實(shí)例代碼)
本文是對(duì)JS中實(shí)現(xiàn)replaceAll的方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11