Heim >Web-Frontend >HTML-Tutorial >[java代码库]-简易计算器（第一种）_html/css_WEB-ITnose
[java代码库]-简易计算器（第一种）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:02:131398Durchsuche
简易计算器（效果如图所示）
第一种方案：采用Javascript+html完成计算器，支持+-*/，结果显示不允许使用input输入域（可以考虑使用《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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目续_html/css_WEB-ITnoseNächster Artikel：火狐和IE之间的7个JavaScript差异_html/css_WEB-ITnose