O efeito final é como mostrado na Figura 2. Há um bug: o resultado de clicar em % após o número inteiro estiver correto. Se % for clicado após decimal, o resultado estará errado! O resto é normal, por favor, dê -me alguns conselhos: o valor da entrada é do tipo de string. Como lidar corretamente a parte se parte na Figura 1 abaixo no JS? ?
Figura 1
Figura 2
O código HTML é o seguinte
<body> <div id = "calculadora"> <div> <pan> calculadora simples </span> <pan> @walker </span> </div> <div id = "shuru"> <!-barra de entrada de tela-> <div> <bump type = "text" id = "screenname" name = "screenname"> <//<//> <lig = "iD" iD = "screenname" = "screenname"> <//</> </idi-> <liv = "text" id = "screenname =" screenname "> <//<//> </ig =" iD ". type = "Button" id = "7" onclick = "jsq (this.id)" value = "7"> <input type = "button" id = "8" onclick = "jsq (this.id)" value = "8"> <input type = "Button" Id = "9" OnClick = "JSQ (this.id)" Value = "" " ONCLICK = "tuige ()" value = "back"> <input type = "button" id = "c" onclick = "clearnum ()" value = "c" style = "margem-right: 0px"> <!-Segunda linha-> <input type = "" Id = "4" OnClick = "JSQ (este.id)" ONCLICK = "JSQ (this.id)" value = "5"> <input type = "button" id = "6" onclick = "jsq (this.id)" value = "6"> <input type = "button" ID = "*" OnClick = "JSQ (this.id)" = "x" "> <input =" "" style = "Margin-right: 0px"> <!-Terceira linha-> <input type = "button" id = "1" onclick = "jsq (this.id)" value = "1"> <input type = "button" id = "2" onclick = "jsq (this.id)" = "2" "> <input =" "" value = "3"> <input type = "button" id = "+" onclick = "jsq (this.id)" value = "+"> <input type = "button" id = "-" onclick = "jsq (this.id)" value = "-" style = "margin-right: 0px"> <!-Fourth-> <brot) ONCLICK = "JSQ (this.id)" value = "0"> <input type = "button" id = "00" onclick = "jsq (this.id)" value = "00"> <input type = "Button" id = "." ONCLICK = "JSQ (this.id)" value = "."> <input type = "button" id = "%" onclick = "jsq (this.id)" value = "%"> <input type = "button" id = "eva" onclick = "eva ()" value = "=" style = "margin-right: 0px" <pan> <a href = "#" target = "_ blank"> feedback </a> </span> </div> </div> </body>
O código CSS é o seguinte:
<Toy> /*Redefinição básica* /*{margem: 0; preenchimento: 0; Timing de caixa: caixa de fronteira; Fonte: 14px Arial, sans-serif;} html {altura: 100%; Background-Color: Lightslategrey;}#calculadora {margin: 15px Auto; Largura: 330px; Altura: 400px; borda: 1px LightGray sólido; Background-Color: Darkgrey; preenchimento: 15px;}/*logo*/. logo {altura: 20px;}. logo .name {float: esquerda; altura de linha: 30px;}. logo .verson {float: certo; altura de linha: 30px;}/*tela*/#shuru {margin-top: 15px;}. tela {margin-top: 5px; Largura: 300px; Altura: 40px; Alinhamento de texto: à direita; Right-right: 10px; Size da fonte: 20px;}#chaves {borda: 1px Solid LightGray; Altura: 223px; Margin-top: 25px; preenchimento: 8px;}#chaves .Last {margem-direita: 0px;}. Footer {margin-top: 20px; Altura: 20px;}. Footer .link {float: direita;}#Keys .Buttons {float: esquerda; Largura: 42px; Altura: 36px; Alinhamento de texto: centro; Background-Color: LightGray; Margem: 0 17px 20px 0;} </style>O código JavaScript é o seguinte:
<Cript> var num = 0; // Defina os dados da primeira função de entrada jsq (num) {// obtenha a entrada atual se (num == "%") {document.getElementById ('screenname'). Value = math.round (document.getElementById ('nome da tela'). Value)/100; } else {document.getElementById ('nome da tela'). value += document.getElementById (num) .Value; }} função eva () {// calcule o document.getElementById ("nome da tela"). } function clearnum () {// clear 0 document.getElementById ("nome da tela"). value = null; document.getElementById ("nome da tela"). Focus (); } function tuige () {// backspace var = document.getElementById ("nome da tela"); arr.Value = arr.value.substring (0, arr.value.length - 1); } </script>O artigo acima JavaScript implementa o efeito simples da calculadora [recomendado] é todo o conteúdo que eu compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.