El efecto final es el que se muestra en la Figura 2. Hay un error: el resultado de hacer clic en % después del número entero es correcto. Si se hace clic en % después de decimal, ¡el resultado será incorrecto! El resto son normales, por favor dame algunos consejos: el valor de la entrada es de tipo de cadena. ¿Cómo manejar correctamente la parte IF en la Figura 1 a continuación en JS? ?
Figura 1
Figura-2
El código HTML es el siguiente
<body> <div id = "calculator"> <div> <span> calculadora simple </span> <span> @walker </span> </div> <div id = "shuru"> <!-Barra de entrada de pantalla-> <div> <input type = "text" id = "screenName" name = "screenName"> </div> </div> <divi = "keys"> <!-j-j-J-> <1 inport type = "botón" id = "7" onClick = "jsq (this.id)" value = "7"> <input type = "button" id = "8" onClick = "jsq (this.id)" valor = "8"> <input type = "botón" id = "9" oncclick = "jsq (this.id)" valor = "9"> <input type = "button" back "id =" back "back" value = "back"> <input type = "Botton" id = "c" onClick = "clearnum ()" value = "c" style = "margin-right: 0px"> <!-Segundo fila-> <input type = "botón" id = "4" onClick = "jsq (this.id)" value = "4"> <input type = "bootle" id = "5" onClick = "jsq (jsq (this.id)" 5.id) <input type = "Button" id = "6" onClick = "jsq (this.id)" valor = "6"> <input type = "button" id = "*" onClick = "jsq (this.id)" value = "x"> <input type = "botón" id = "/" onClick = "jsq (this.id)" Valor = "estilo =" margen-right: 0pX " type = "botón" id = "1" onClick = "jsq (this.id)" value = "1"> <input type = "button" id = "2" onClick = "jsq (this.id)" valor = "2"> <input type = "botón" id = "3" onClick = "jsq (this.id)" valor = "3"> <input type = "button" id = "id =" Id = "Id =" Id = "ID" "" onclick="jsq(this.id)" value="+"> <input type="button" id="-" onclick="jsq(this.id)" value="-" style="margin-right:0px"> <!--Fourth row--> <input type="button" id="0" onclick="jsq(this.id)" value="0"> <input type="button" id="00" onClick = "jsq (this.id)" value = "00"> <input type = "botón" id = ". onClick = "jsq (this.id)" value = "."> <input type = "button" id = "%" onClick = "jsq (this.id)" value = "%"> <input type = "button" id = "eva" onClick = "eva ()" value = "=" estilo = "margin-dight: 0px"> </piv> <viv> <pan> bienvenido a javaScript a javaScript a javaScript a javaScript a javaScript a javaScript a javaScripción <a href = "#" target = "_ en blanco"> retroalimentación </a> </span> </div> </div> </body>
El código CSS es el siguiente:
<syle> /*restablecimiento básico* /*{margen: 0; relleno: 0; dimensionamiento de la caja: border-box; Font: 14px arial, sans-serif;} html {altura: 100%; Color de fondo: LightsLategrey;}#Calculator {margen: 15px Auto; Ancho: 330px; Altura: 400px; Border: 1px Solid LightGray; Color de fondo: Darkgrey; Pading: 15px;}/*logotipo*/. logo {altura: 20px;}. logotipo .name {float: izquierda; Línea-aguja: 30px;}. logo .verson {float: right; Line-Height: 30px;}/*pantalla*/#shuru {margin-top: 15px;}. pantalla {margin-top: 5px; Ancho: 300px; Altura: 40px; Text-Align: Right; Right de relleno: 10px; Font-size: 20px;}#teclas {border: 1px sólido lightgray; Altura: 223px; margen-top: 25px; Pading: 8px;}#teclas .last {margin-right: 0px;}. pie de página {margin-top: 20px; altura: 20px;}. pie de página .link {float: right;}#teclas .buttons {float: izquierda; Ancho: 42px; Altura: 36px; Text-Align: Center; Color de fondo: LightGray; margen: 0 17px 20px 0;} </ystye>El código JavaScript es el siguiente:
<script> var num = 0; // Defina los datos de la primera función de entrada JSQ (num) {// Obtenga la entrada actual if (num == "%") {document.getElementById ('screenName'). Value = math.round (document.getElementById ('screenName'). Value)/100; } else {document.getElementById ('screenName'). value += document.getElementById (num) .Value; }} function eva () {// Calcule el resultado de entrada documento.getElementById ("screenName"). value = eval (document.getElementById ("screenName"). valor); } función clearNum () {// claro 0 document.getElementById ("screenName"). value = null; document.getElementById ("ScreenName"). Focus (); } function tuige () {// backspace var arr = document.getElementById ("ScreenName"); arr.Value = arr.value.substring (0, arr.value.length - 1); } </script>El artículo anterior JavaScript implementa el efecto de calculadora simple [recomendado] es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.