Home >Web Front-end >HTML Tutorial >[java code library]-Simple calculator (first type)_html/css_WEB-ITnose
[java code library]-Simple calculator (first type)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:02:131422browse
Simple calculator (the effect is as shown in the picture)
The first solution: use Javascript html to complete the calculator, support -*/, and the result shows that the input input field is not allowed to be used (Consider using "span")
<html> <head> <title>简易计算器</title> <script language="javascript">//易错：不是"text/javascript" function doCal(){ //alert(document.getElementByName("value1").length);//易错：getElementByName,首字母大写，不是byName //alert(document.getElementByName("value1")[0].value);//易错：getElementByName，返回一个集合，应该用[0]表示需要获得第几个元素 var value1=parseInt(document.getElementById("value1").value);//易错：易错：getElementById首字母大写，不是byId var flag=document.getElementById("flag").value; var value2=parseInt(document.getElementById("value2").value);//易错：getElementBy返回是String类型，应该通过parseInt转换为Int类型 //alert(value1+","+flag+","+value2);//多打印东西出来，用于检验 var s=0; switch(flag){ case "+"://易错：语法，别忘记加冒号 s=value1+value2; break;//易错：语法，别忘记加break；跳出选择 case "-": s=value1-value2; break; case "*": s=value1*value2; break; case "/": s=value1/value2; } //使运算结果显示在浏览器中，注意=右侧为string类型 document.getElementById("span_result").innerHTML="<font size='16' color='red'>"+s+"</font>" } //alert(document.getElementByName(value1).value); </script> </head> <body> <h1>简易计算器</h1> <hr> <input type="text" name="value1" id="value1"> <select name="flag" id="flag">//注意select-option的用法 <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" name="value2" id="value2"> <!-- <button type="button" onclick="doCal()">点击这里</button> --> <input type="button" value="=" onclick="doCal()">//button的onclick事件 <!-- <input type="text" name="result" id="result"> --> <span id="span_result"></span>//通过span显示结果 </body></html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn