js开关灯小应用-js教程-PHP中文网

js中判断的应用【开关灯】

首页

web前端

js教程

js开关灯小应用

Sep 08, 2017 am 11:20 AM

javascript 应用

js中判断的应用【开关灯】

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;开关灯&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            html, body {            
            margin: 0px;            
            padding: 0px;            
            width: 100%;            
            height: 100%;            
            cursor: pointer;            
            background-color: white;        }
        &lt;/style&gt;
    &lt;/head&gt;                
      &lt;body id=&quot;bodyEle&quot;&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
        var oBody = document.getElementById(&quot;bodyEle&quot;);
        oBody.onclick = function () {
            var bg = this.style.backgroundColor;        
            switch (bg) {            
            case &quot;white&quot;:                
            this.style.backgroundColor = &quot;red&quot;;                
            break;            
            case &quot;red&quot;:                
            this.style.backgroundColor = &quot;black&quot;;                
            break;            
            default:                
            this.style.backgroundColor = &quot;white&quot;;
            }
        }
       &lt;/script&gt;
     &lt;/body&gt;
&lt;/html&gt;