编程 Javascript

JavaScript实现开关等效果

Posted in Javascript onSeptember 08, 2017

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>开关灯</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>

总结

以上所述是小编给大家介绍的JavaScript实现开关等效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

JavaScript实现开关等效果

- Author -

ruirui_1996

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript编程开发中的五个实用小技巧

Jul 22 Javascript

jquery加载页面的方法(页面加载完成就执行)

Jun 21 Javascript

基于jquery ajax 用户无刷新登录方法详解

Apr 28 Javascript

js完美的div拖拽实例代码

Jan 22 Javascript

如何使用jQuery技术开发ios风格的页面导航菜单

Jul 29 Javascript

jQuery滚动加载图片实现原理

Dec 14 Javascript

AngularJs中route的使用方法和配置

Feb 04 Javascript

Centos6.8下Node.js安装教程

May 12 Javascript

Vue.js简易安装和快速入门（第二课）

Oct 17 Javascript

node中IO以及定时器优先级详解

May 10 Javascript

vue实现简单全选和反选功能

Sep 15 Javascript

nestjs中异常过滤器Exceptionfilter的具体使用

Feb 07 Javascript

浅谈React Native 中组件的生命周期

Sep 08 #Javascript

Vue仿手机qq的实例代码(demo)

Sep 08 #Javascript

关于Ajax的原理以及代码封装详解

Sep 08 #Javascript

vue父子组件的嵌套的示例代码

Sep 08 #Javascript

jQuery选择器中的特殊符号处理方法

Sep 08 #jQuery

通过button将form表单的数据提交到action层的实例

Sep 08 #Javascript

Vue 多层组件嵌套二种实现方式(测试实例)

Sep 08 #Javascript