javascript - 隐藏计算器的所有按钮

标签 javascript html css

我需要一个按钮，使计算器上的所有按钮都消失，当我单击时，它会显示和隐藏这些按钮

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.:: Calculadora Janson ::.</title>
<style>

#botao {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	padding: 10px 30px;
	cursor:pointer;

	background-color:#66CCFF;
	width:40px;
	font-weight:bold;
	border:1px solid #333333;

	background: -moz-linear-gradient(
		top,
		#fa0004 0%,
		#fa0004 45%,
		#fa0004);

	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#fa0004),
		color-stop(0.45, #fa0004),
		to(#fa0004));


	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #fa0004;
	-moz-box-shadow:
		0px 1px 0px rgba(000,000,000,0.2),
		inset 0px 1px 0px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 0px rgba(000,000,000,0.2),
		inset 0px 1px 0px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 0px rgba(000,000,000,0.2),
		inset 0px 1px 0px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.3),
		0px 0px 0px rgba(255,255,255,0);
}





}

.text {
	width:100px;
	text-align:right;
	background-color:#D9EEF9;
	font-weight:bold;
}
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

#ajuda {
	width:400px;
	height:300px;
	margin:0 auto;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
}
</style>

<script>
	
	function calc(valor) {
		
		s = document.getElementById('res').value;
		document.getElementById('res').value = s + valor;
	}
	
	function sinal(oper) {
		si = document.getElementById('res').value;
		document.getElementById('res').value = si + oper + " ";
	}
	
	function calcula() {
		vet = document.getElementById('res').value;
		vet2 = vet.split(' ');
		switch(vet2[1]) {
			case 'X':
				resultado = vet2[0] * vet2[2];
				break;
			case '÷':
				resultado = vet2[0] / vet2[2];
				break;
			case '+':
				resultado = parseFloat(vet2[0]) + parseFloat(vet2[2]);
				break;
			case '-':
				resultado = vet2[0] - vet2[2];
				break;
			case "v":
				resultado = Math.sqrt(vet2[0]);
				break;
			case 'Log':
				resultado = Math.LOG10E*Math.log(vet2[0]);
				break;
			case '^':
				resultado = Math.pow(vet2[0], vet2[2]);
				break;

		}
		document.getElementById('res').value = resultado;
		return true;
	}
	
	function limpa() {
		document.getElementById('res').value = "";
	}


	function limpaBotoes() {
		document.getElementById('res').value = "";
	}
	
	function porcento() {
		vet = document.getElementById('res').value;
		vet2 = vet.split(' ');
		if(vet2[1] == 'X')
			document.getElementById('res').value = (vet2[0] * vet2[2])/100;
		else if(vet2[1] == '+')
			document.getElementById('res').value = parseFloat((vet2[0] * vet2[2])/100) + parseFloat(vet2[0]);
		else if(vet2[1] == '-')
			document.getElementById('res').value = parseFloat(vet2[0]) - parseFloat((vet2[0] * vet2[2])/100);
	}

	// função apenas para gerar o help da calculadora
	function help() {
		document.getElementById('ajuda').innerHTML = "<u>Para as operações básicas usa-se da seguinte forma:</u> <br>"  
							   + "     Ex: 3 + 2 = 5 <br>"
							   + "     Ex: 3 - 2 = 1 <br>"
							   + "     Ex: 3 x 2 = 6 <br>"
							   + "     Ex: 3 ÷ 2 = 1.5 <br>"
							   + "<u>Para operações de porcentagem:</u><br>"
							   + "     Ex: 25 x 10 % = 2.5 <br>"
							   + "     Ex: 25 + 10 % = 27.5 <br>"
							   + "     Ex: 25 - 10 % = 22.5 <br>"
							   + "<u>Para logaritmo:</u> <br>"
							   + "     Ex: 2 log = 0.3010...<br>"
							   + "<u>Para raiz quadrada:</u> <br>"
							   + "     Ex: 16 √¯ = 4 <br>"
							   + "<u>Potenciação:</u> <br>"
							   + "     Ex: 2 x² 2 = 4 <br>"
							   + "     Ex: 2 x³ 3 = 8 <br><br>"
							   + "<u>OBS: Essa versão ainda não calcula expressão linear como nos ex:</u> <br>"
							   + "     3 + 5 + 2 x 2 <br>"
							   + "     4 + 2 - 7 ÷ 2";
													  
		setTimeout("limpaajuda()",15000);
	}
	function limpaajuda() {
		document.getElementById('ajuda').innerHTML = "";
	}


// the fuction to hide the buttons 
var hidden = false;
function action()
{
    function action() {
        hidden = !hidden;
        if(hidden) {
            document.getElementById('botao').style.visibility = 'hidden';
        } else {
            document.getElementById('botao').style.visibility = 'visible';
        }
    }

}


</script>


</head>

<body>

<table width="203" height="269" border="9" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="186" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="97"><span class="style1">Quelipe</span></td>
          <td width="89" class="style1"></td>
        </tr>
      </table></td>
  </tr>
  <tr valign="top">
    <td bgcolor="#EFEFEF"><br />
      <table width="159" border="0" align="center">
      <tr>
        <td height="33" colspan="4"><label><input name="res" type="text" id="res" size="20" class="text" disabled="disabled"/></label></td>
      </tr>
      <tr>
        <td><label><input type="button" name="button15" value="%" id="botao" onclick="porcento()"/></label></td>
        <td><label><input type="button" name="button17" value="√¯" id="botao" onclick="sinal(' v');"/></label></td>
        <td><label><input type="button" name="button18" value="Log" id="botao" onclick="sinal(' Log');"/></label></td>
        <td><input type="button" name="button19" value="X²" onclick="sinal(' ^');" id="botao" /></td>
      </tr>
      <tr>
        <td width="38"><label><input type="button" name="button" value="7" onclick="calc('7');" id="botao" accesskey="7"/></label></td>
        <td width="36"><input type="button" name="button2" value="8" onclick="calc('8');" id="botao"/></td>
        <td width="36"><input type="button" name="button3" value="9" onclick="calc('9');" id="botao"/></td>
        <td width="24"><input type="button" name="button4" value="÷" onclick="sinal(' ÷');" id="botao"/></td>
      </tr>
      <tr>
        <td><input type="button" name="button5" value="4" onclick="calc('4');" id="botao"/></td>
        <td><input type="button" name="button6" value="5" onclick="calc('5');" id="botao"/></td>
        <td><input type="button" name="button7" value="6" onclick="calc('6');" id="botao"/></td>
        <td><input type="button" name="button8" value="x" onclick="sinal(' X');" id="botao"/></td>
      </tr>
      <tr>
        <td><input type="button" name="button9" value="1" onclick="calc('1');" id="botao"/></td>
        <td><input type="button" name="button10" value="2" onclick="calc('2');" id="botao"/></td>
        <td><input type="button" name="button11" value="3" onclick="calc('3');" id="botao"/></td>
        <td><input type="button" name="button16" value="- " onclick="sinal(' -');" id="botao"/></td>
      </tr>
      <tr>
        <td><label><input type="button" name="button13" value="CE" onclick="limpa()" id="botao"/></label></td>
        <td><input type="button" name="button14" value="0" onclick="calc('0');" id="botao"/></td>
        <td><input type="submit" name="Submit162" value="=" onclick="calcula()" id="botao"/></td>
        <td><input type="button" name="button12" value="+" onclick="sinal(' +');" id="botao"/></td>
      </tr>
      <tr>
        <td> </td>
        <td><label><input type="submit" name="Submit" value="." id="botao" onclick="calc('.');"/></label></td>
        <td><label><input type="submit" name="Submit2" value="Help" id="botao" onclick="help();"/></label></td>
        <td> </td>
      </tr>
    </table>

	</td>
  </tr>
</table>


<input type="button" id="toggler" value="Toggler" onClick="action();" />
<p> </p>
<div id="ajuda">
 
</div>
</body>
</html>

我试图用按钮 ID 的“函数 action()”隐藏所有内容，但没有任何改变

最佳答案

  • 用具有相同值的类属性替换所有附加到按钮的 ID 编号。ID 编号是分配给唯一元素的编号
  • 声明一个 Action 函数，而不是带有重复的 action() 的嵌套函数
  • 而不是添加隐藏的变量并测试该变量。您可以添加添加或删除 css 类的切换效果。此类将更改不透明度:0。
  • 如果 toggle() 方法返回 true，只需禁用该按钮。您可以使用显示:无。然而，有了这个属性，计算器的维度将会改变，因为元素在隐藏时不会在 dom 中。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>.:: Calculadora Janson ::.</title>
  <style>
  .botao {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #ffffff;
      padding: 10px 30px;
      cursor: pointer;
      background-color: #66CCFF;
      width: 40px;
      font-weight: bold;
      border: 1px solid #333333;
      background: -moz-linear-gradient( top, #fa0004 0%, #fa0004 45%, #fa0004);
      background: -webkit-gradient( linear, left top, left bottom, from(#fa0004), color-stop(0.45, #fa0004), to(#fa0004));
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      border: 1px solid #fa0004;
      -moz-box-shadow: 0px 1px 0px rgba(000, 000, 000, 0.2), inset 0px 1px 0px rgba(255, 255, 255, 0.7);
      -webkit-box-shadow: 0px 1px 0px rgba(000, 000, 000, 0.2), inset 0px 1px 0px rgba(255, 255, 255, 0.7);
      box-shadow: 0px 1px 0px rgba(000, 000, 000, 0.2), inset 0px 1px 0px rgba(255, 255, 255, 0.7);
      text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.3), 0px 0px 0px rgba(255, 255, 255, 0);
    }
    
    .hide {
      opacity: 0;
    }
  }
  .text {
    width: 100px;
    text-align: right;
    background-color: #D9EEF9;
    font-weight: bold;
  }
  .style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
  }
  #ajuda {
    width: 400px;
    height: 300px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
  }
  </style>

  <script>
    function calc(valor) {

      s = document.getElementById('res').value;
      document.getElementById('res').value = s + valor;
    }

    function sinal(oper) {
      si = document.getElementById('res').value;
      document.getElementById('res').value = si + oper + " ";
    }

    function calcula() {
      vet = document.getElementById('res').value;
      vet2 = vet.split(' ');
      switch (vet2[1]) {
        case 'X':
          resultado = vet2[0] * vet2[2];
          break;
        case '÷':
          resultado = vet2[0] / vet2[2];
          break;
        case '+':
          resultado = parseFloat(vet2[0]) + parseFloat(vet2[2]);
          break;
        case '-':
          resultado = vet2[0] - vet2[2];
          break;
        case "v":
          resultado = Math.sqrt(vet2[0]);
          break;
        case 'Log':
          resultado = Math.LOG10E * Math.log(vet2[0]);
          break;
        case '^':
          resultado = Math.pow(vet2[0], vet2[2]);
          break;

      }
      document.getElementById('res').value = resultado;
      return true;
    }

    function limpa() {
      document.getElementById('res').value = "";
    }


    function limpaBotoes() {
      document.getElementById('res').value = "";
    }

    function porcento() {
      vet = document.getElementById('res').value;
      vet2 = vet.split(' ');
      if (vet2[1] == 'X')
        document.getElementById('res').value = (vet2[0] * vet2[2]) / 100;
      else if (vet2[1] == '+')
        document.getElementById('res').value = parseFloat((vet2[0] * vet2[2]) / 100) + parseFloat(vet2[0]);
      else if (vet2[1] == '-')
        document.getElementById('res').value = parseFloat(vet2[0]) - parseFloat((vet2[0] * vet2[2]) / 100);
    }

    // função apenas para gerar o help da calculadora
    function help() {
      document.getElementById('ajuda').innerHTML = "<u>Para as operações básicas usa-se da seguinte forma:</u> <br>" +
        "     Ex: 3 + 2 = 5 <br>" +
        "     Ex: 3 - 2 = 1 <br>" +
        "     Ex: 3 x 2 = 6 <br>" +
        "     Ex: 3 ÷ 2 = 1.5 <br>" +
        "<u>Para operações de porcentagem:</u><br>" +
        "     Ex: 25 x 10 % = 2.5 <br>" +
        "     Ex: 25 + 10 % = 27.5 <br>" +
        "     Ex: 25 - 10 % = 22.5 <br>" +
        "<u>Para logaritmo:</u> <br>" +
        "     Ex: 2 log = 0.3010...<br>" +
        "<u>Para raiz quadrada:</u> <br>" +
        "     Ex: 16 √¯ = 4 <br>" +
        "<u>Potenciação:</u> <br>" +
        "     Ex: 2 x² 2 = 4 <br>" +
        "     Ex: 2 x³ 3 = 8 <br><br>" +
        "<u>OBS: Essa versão ainda não calcula expressão linear como nos ex:</u> <br>" +
        "     3 + 5 + 2 x 2 <br>" +
        "     4 + 2 - 7 ÷ 2";

      setTimeout("limpaajuda()", 15000);
    }

    function limpaajuda() {
      document.getElementById('ajuda').innerHTML = "";
    }

    function action() {
      var all_btn = document.getElementsByClassName('botao');
      for (var x = 0; x < all_btn.length; ++x) {
        all_btn[x].classList.toggle('hide') ? all_btn[x].disabled = true : all_btn[x].disabled = false;
      }

    }
  </script>


</head>

<body>

  <table width="203" height="269" border="9" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td>
        <table width="186" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="97"><span class="style1">Quelipe</span></td>
            <td width="89" class="style1"></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr valign="top">
      <td bgcolor="#EFEFEF"><br />
        <table width="159" border="0" align="center">
          <tr>
            <td height="33" colspan="4"><label><input name="res" type="text" id="res" size="20" class="text" disabled="disabled"/></label></td>
          </tr>
          <tr>
            <td><label><input type="button" name="button15" value="%" class="botao" onclick="porcento()"/></label></td>
            <td><label><input type="button" name="button17" value="√¯" class="botao" onclick="sinal(' v');"/></label></td>
            <td><label><input type="button" name="button18" value="Log" class="botao" onclick="sinal(' Log');"/></label></td>
            <td><input type="button" name="button19" value="X²" onclick="sinal(' ^');" class="botao" /></td>
          </tr>
          <tr>
            <td width="38"><label><input type="button" name="button" value="7" onclick="calc('7');" class="botao" accesskey="7"/></label></td>
            <td width="36"><input type="button" name="button2" value="8" onclick="calc('8');" class="botao" /></td>
            <td width="36"><input type="button" name="button3" value="9" onclick="calc('9');" class="botao" /></td>
            <td width="24"><input type="button" name="button4" value="÷" onclick="sinal(' ÷');" class="botao" /></td>
          </tr>
          <tr>
            <td><input type="button" name="button5" value="4" onclick="calc('4');" class="botao" /></td>
            <td><input type="button" name="button6" value="5" onclick="calc('5');" class="botao" /></td>
            <td><input type="button" name="button7" value="6" onclick="calc('6');" class="botao" /></td>
            <td><input type="button" name="button8" value="x" onclick="sinal(' X');" class="botao" /></td>
          </tr>
          <tr>
            <td><input type="button" name="button9" value="1" onclick="calc('1');" class="botao" /></td>
            <td><input type="button" name="button10" value="2" onclick="calc('2');" class="botao" /></td>
            <td><input type="button" name="button11" value="3" onclick="calc('3');" class="botao" /></td>
            <td><input type="button" name="button16" value="- " onclick="sinal(' -');" class="botao" /></td>
          </tr>
          <tr>
            <td><label><input type="button" name="button13" value="CE" onclick="limpa()" class="botao"/></label></td>
            <td><input type="button" name="button14" value="0" onclick="calc('0');" class="botao" /></td>
            <td><input type="submit" name="Submit162" value="=" onclick="calcula()" class="botao" /></td>
            <td><input type="button" name="button12" value="+" onclick="sinal(' +');" class="botao" /></td>
          </tr>
          <tr>
            <td> </td>
            <td><label><input type="submit" name="Submit" value="." class="botao" onclick="calc('.');"/></label></td>
            <td><label><input type="submit" name="Submit2" value="Help" class="botao" onclick="help();"/></label></td>
            <td> </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>


  <input type="button" id="toggler" value="Toggler" onClick="action();" />
  <p> </p>
  <div id="ajuda">

  </div>
</body>

</html>

    • 关于javascript - 隐藏计算器的所有按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43289455/

    上一篇：css - block 元素在另一个 block 元素中的盒模型

    下一篇：javascript - jQuery:隐藏元素在悬停时向下移动？

    相关文章：

    jquery - 构建 iPhone/移动 Web 应用程序的架构

    html - 最小化页面时如何在CSS中修复菜单栏和容器

    javascript - 导航的事件类

    javascript - this.transitionToRoute 在没有参数的情况下不起作用

    html - CSS - 100vh 响应式图像

    php - 如果页面包含 2 个提交按钮，如何构建页面

    jQuery 删除元素 (LinkedIn)

    html - 类别树的位置和 float 问题？

    javascript - 两个重叠圆圈的颜色

    javascript - 单击生成的按钮，而循环不起作用

    ©2024 IT工具网  联系我们