本文介绍了一个简单的网页交互案例，通过两个按钮实现“开灯”与“关灯”的切换效果，并展示了如何利用JavaScript来控制按钮的显示与隐藏，同时提供了代码示例以便读者直接测试。
以下代码实现了在网页上显示一个按钮，点击按钮时，“开灯”、“关灯”交替显示，
好处：这样的写法方便在不同的按钮下加上不同的的响应程序，如下在my_light_on_function()和my_light_off_function()中分别加入不同的程序即可。
<head>
<script type="text/javascript">
function my_light_on_function(){
}
function my_light_off_function(){
}
</script>
/*开关按钮都设置成一样的样式，包括位置和形状大小等，体现一致性*/
<style>
/*开灯按钮*/
.light_on {
width: 100px;
height: 70px;
font-size:20px;
position:absolute;
top:20px;
left:450px;
}
/*关灯按钮*/
.light_off {
width: 100px;
height: 70px;
font-size:20px;
position:absolute;
top:20px;
left:450px;
}
</style>
<body>
<input class="light_off" type="submit" id="light_off" onclick=
"document.getElementById('light_on').style.display='inline';document.getElementById('light_off').style.display='none';my_light_off_function();show()" value="关灯"/>
<input class="light_on" type="submit" id="light_on" onclick=
"document.getElementById('light_on').style.display='none';document.getElementById('light_off').style.display='inline';my_light_on_function();show()" value="开灯"/>
</body>
本程序可直接拷贝并测试效果。
扫一扫
2276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
