近期做网页设计作业，感觉各种视频网站上的关灯效果很人性化，所以简易的用JavaScript写了一个
附上全部代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#choose{
margin:200px 200px;
}
.daytime{
background: #0D0D0D;
}
.nigth{
background: #FFF;
}
</style>
<script language="javascript" type="text/javascript">
function Switch()
{
var button = ElementById("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>
<body>
<div id="choose">
<input id="bt" type="button" value="close light" οnclick="Switch()" />
</div>
</body>
</html>
PS：如果网页中还要隐藏其它层，可以在JavaScript里面写入隐藏层和显示层
function Switch()
{
var button = ElementById("bt");
var img = ElementById("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"; //隐藏该层
}
}
本文发布于:2024-02-05 04:05:10，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170723674562913.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
