ESP8266 HTML按鈕的三種形式 隱藏和顯示
一，兩個按鈕隱藏一個
<html>
<head>
<script type="text/javascript"src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_f2fb5194.js"></script>
</head>
<body><center>
<button id="a">open</button>
<button id="b">close</button>
</center>
<script>
$("#b").hide();
$(document).ready(function()
{
$("#a").click(function()
{
$("#a").hide();
$("#b").show();
});
$("#b").click(function()
{
$("#b").hide();
$("#a").show();
}
);
});
</script>
</body>
</html>
二，兩個按鈕隱藏一個的另一種形式
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body><center>
<button class="btn1">隱藏</button>
<button class="btn0">顯示</button>
</center>
</body>
<script type="text/javascript">
var btn1 = document.getElementsByClassName('btn1')[0];
var btn0 = document.getElementsByClassName('btn0')[0];
btn0.style.display = 'none';
function out(){
btn1.onclick = function(){
btn1.style.display = 'none';
btn0.style.display = 'block';
btn0.onclick = function(){
btn1.style.display = 'block';
btn0.style.display = 'none';
out(); }}} out();
</script>
</html>
三，一個按鈕改變按鈕value
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>click count test</title>
<script type="text/javascript">
window.onload = function(){
var i = 1;
document.getElementById("btn").onclick = function(){
document.getElementById("log").innerHTML += i++;
if(i %2==0){
btn.value = "Open";}
if(i %2==1){
btn.value = "Close";}
}
}
</script>
</head>
<body><center>
<input type="button" id="btn" value="Close" style="font-size: 20px;"/>
<div id="log"type="text" ></div></center>
</body>
</html>