javascript实现简单的可随机变色网页计算器示例

2019-11-19 18:11:06

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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>

PS：这里再为大家推荐两款本站的在线计算器，都是采用js实现，且功能强大，相信对于大家深入了解JavaScript数学运算及web设计有所帮助：

在线标准计算器：
http://tools.VeVB.COm/jisuanqi/jsq

在线科学计算器：
http://tools.VeVB.COm/jisuanqi/jsqkexue

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：jQuery Ajax 实现在html页面实时显示用户登录状态

下一篇：ionic2 tabs使用 Modal底部tab弹出框