一、计算方式
计算过程利用下拉菜单进行选择运算方式，输入方式则是输入到from表单的文本框中，代码分为JavaScriptt部分和HTML部分。
二、代码段
（一）JavaScript部分
<script type="text/javascript">function calc() {var oper1=document.getElementById("num1");//获取输入数据1var oper2=document.getElementById("num2");//获取输入数据2var o=document.getElementById("operator");//获取下拉了列表var op=o.options[o.selectedIndex].value;//在下拉列表中选中选择的值var res;//根据选项进行加减乘除运算switch (op) {case "+":res=change(oper1.value)+change(oper2.value);break;case "-":res=change(oper1.value)-change(oper2.value);break;case "*":res=change(oper1.value)*change(oper2.value);break;case "/":res=change(oper1.value)/change(oper2.value);break;}document.getElementById("anw").value=res;//将运算结果赋值到所设置好的anw文本框中}//因为在文本框中获取的数据是文本格式要转换成数字格式，利用自带函数paseFloatfunction change(x) {return parseFloat(x);}</script>avascript（二）HTML部分
<form action=""><input type="text" id="num1" placeholder="数据1"><select id="operator"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="*">*</option></select><input type="text" id="num2" placeholder="数据2">=<input type="text" placeholder="答案" id="anw"><input type="button" value="计算" onclick="calc()"></form>
（三）结合总体部分
// 这是总体的部分
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>计算器</title><!--javascript部分--><script type="text/javascript">function calc() {var oper1=document.getElementById("num1");//获取输入数据1var oper2=document.getElementById("num2");//获取输入数据2var o=document.getElementById("operator");//获取下拉了列表var op=o.options[o.selectedIndex].value;//在下拉列表中选中选择的值var res;//根据选项进行加减乘除运算switch (op) {case "+":res=change(oper1.value)+change(oper2.value);break;case "-":res=change(oper1.value)-change(oper2.value);break;case "*":res=change(oper1.value)*change(oper2.value);break;case "/":res=change(oper1.value)/change(oper2.value);break;}document.getElementById("anw").value=res;//将运算结果赋值到所设置好的anw文本框中}//因为在文本框中获取的数据是文本格式要转换成数字格式，利用自带函数paseFloatfunction change(x) {return parseFloat(x);}</script><!--HTML部分--></head><body><form action=""><input type="text" id="num1" placeholder="数据1"><select id="operator"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" id="num2" placeholder="数据2">=<input type="text" placeholder="答案" id="anw"><input type="button" value="计算" onclick="calc()"></form></body></html>二、展示结果
本文地址：https://31jz.com/jzjc/1092.html