JavaScript实现随机变色网页计算器示例
本文介绍了一个基于JavaScript的简单网页计算器,支持加减乘除及求余运算。该示例的特色在于页面具备随机变换背景颜色的功能,旨在帮助开发者理解JavaScript在数学运算及Web基础设计中的应用。
JavaScript实现随机变色网页计算器示例
本文通过具体实例,展示了如何使用JavaScript构建一个具备随机变色功能的简易网页计算器。
该程序实现了基础的加、减、乘、除以及求余运算,并在界面中集成了随机变换背景颜色的功能。
运行效果如下图所示:

完整的实现代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Day 2 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" 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 '/':
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" id="idbgc">
<h1>simple web calculator</h1>
<form name="form" action="">
<input type=text name="number1" style="width:80px ">
<select name="selection">
<option value='+'> + <option>
<option value='-'>-<option>
<option value='*'>*<option>
<option value='/'>/<option>
<option value='%'>%<option>
</select>
<input type=text name="number2" style="width:80px ">
<input type="button" value=" = " onclick="calculator(),changeBgcolor()">
<input type=text name="result" style="width:80px "><br>
<input type="reset" value="reset" onclick="changeBgcolor()">
</form>
</BODY>
</HTML>
此外,推荐参考本站提供的两款在线计算器工具,它们同样基于JavaScript开发,功能更为完善,有助于深入理解JavaScript数学运算及Web设计技巧:
在线标准计算器: http://tools.jb51.net/jisuanqi/jsq
在线科学计算器: http://tools.jb51.net/jisuanqi/jsqkexue
如需了解更多JavaScript相关内容,建议查阅本站相关专题,包括《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》以及《JavaScript错误与调试技巧总结》。
希望本文所述内容能对您的JavaScript程序设计学习有所帮助。
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
