简单的JavaScript实现开灯关灯效果 ↑_↑

50 阅读 0 评论 33 点赞

我是靠谱客的博主愉快水池，最近开发中收集的这篇文章主要介绍简单的JavaScript实现开灯关灯效果 ↑_↑，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

近期做网页设计作业，感觉各种视频网站上的关灯效果很人性化，所以简易的用JavaScript写了一个

附上全部代码

<html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>无标题文档</title>

         {
              var button = document.getElementById("bt"); //通过id获得button
              var type = document.body.className;           //获得html里body的CSS样式表

              if (type == "daytime")    //判断类的名称，如果类是"daytime"则点击button后，将类换为"night",背景的颜色就改变了
                {
                  document.body.className= "night";           //获得CSS样式表里的"night"类
                  button.value = "close light";                         //button显示为close night
                } else
                {
                  document.body.className = "daytime";     //获得CSS样式表里的"daytime"类
                  button.value = "open light";                         //button显示为open ligth
                }
        }

</script>

</head>

PS：如果网页中还要隐藏其它层，可以在JavaScript里面写入隐藏层和显示层

function Switch()

{
          var button = document.getElementById("bt");
          var img = document.getElementById("header");      //需要隐藏和显示层的id
          var type = document.body.classNname;
         if (type == "daytime")
            {
              document.body.className = "night";
              button.value = "close light";
              img.style.display = "block";           //显示该层
            } else
           {
              document.body.className = "daytime";
              button.value = "open light";
              img.style.display = "none";           //隐藏该层
           }
}