html网页上按钮交替切换bottom shift代码

最新推荐文章于 2024-09-14 20:12:57 发布

原创最新推荐文章于 2024-09-14 20:12:57 发布 · 4.3k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的网页交互案例，通过两个按钮实现“开灯”与“关灯”的切换效果，并展示了如何利用JavaScript来控制按钮的显示与隐藏，同时提供了代码示例以便读者直接测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下代码实现了在网页上显示一个按钮，点击按钮时，“开灯”、“关灯”交替显示，

好处：这样的写法方便在不同的按钮下加上不同的的响应程序，如下在my_light_on_function()和my_light_off_function()中分别加入不同的程序即可。

<head>

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>

</head>

<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>

本程序可直接拷贝并测试效果。