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

来源：互联网发布：centos破解wifi密码编辑：程序博客网时间：2024/06/18 11:33

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

好处：这样的写法方便在不同的按钮下加上不同的的响应程序，如下在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>

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

0 0