该程序能实现简单的加、减、乘、除、求余,页面还添加了随机变换颜色的功能。
运行效果图如下:
完整实例代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 2 </TITLE> <META CONTENT="EditPlus"> <META CONTENT=""> <META CONTENT=""> <META CONTENT=""> <script> function calculator(){ var selection=document.form.selection.value; var numb1=document.form.number1.value; var numb2=document.form.number2.value; var relnum=""; switch(selection){ case "+": relnum=parseFloat(numb1)+parseFloat(numb2); break; case '-': relnum=numb1 - numb2; break; case '*': relnum=numb1 * numb2; break; case 'https://www.jb51.net/': if(numb2==0) alert("wrong input! "); relnum=numb1 / numb2; break; case '%': relnum=numb1 % numb2; break; } document.form.result.value=relnum; } function sound(){ document.all.sound.src="clock.wav"; } function changeBgcolor(){ var bgc=document.getElementById("idbgc"); var rand=""; for(var i=0;i<6;i++){ rand+=Math.round(Math.random()*9) } bgc.style.backgroundColor='#'+rand; } </script> </HEAD> <BODY bgcolor="aliceblue"> <h1>simple web calculator</h1> <form action=""> <input type=text> <select> <option value='+'> + <option> <option value='-'>-<option> <option value='*'>*<option> <option value='https://www.jb51.net/'>/<option> <option value='%'>%<option> </select> <input type=text> <input type="button" value=" = "> <input type=text><br> <input type="reset" value="reset"> </form> </BODY> </HTML>
PS:这里再为大家推荐两款本站的在线计算器,都是采用js实现,且功能强大,相信对于大家深入了解JavaScript数学运算及web设计有所帮助:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》