模拟某些网站的开关灯案例

原理简介: 利用鼠标的单击onclick事件触发上面的JS开关灯函数通过改变网页背景的css样式达到改变html背景颜色的效果

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title></title>
     <style type="text/css">
         .dark
         {
             background-color: Black;
         }
         .bright
         {
             background-color: White;
         }
    </style>
    <script type="text/javascript">
          function switch_on() {    //函数开灯
             document.body.className = "bright";  //调用样式表中的.bright 背景样式,使网页背景变亮
         }
          function switch_off() {   //函数关灯
             document.body.className = "dark"; //调用样式表中的.dark 背景样式,使网页背景变黑
         }    
    </script>
 </head>
 <body>
     <input type="button" value="开灯" onclick="switch_on()" />
     <input type="button" value="关灯" onclick="switch_off()" />
 </body>
 </html>