当前位置：首页 > 资讯 > 技术文档

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

时间：2020-09-15 14:09 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例讲述了javascript实现简单的可随机变色网页计算器。分享给大家供大家参考，具体如下：该程序能实现简单的加、减、乘、除、求余，页面还添加了随机变换颜色的功能。运行效果图如下： [img]http://files.jb51.net/file_images/article/201612/20161230151640480.png?20161130151657[/img] 完整实例代码如下：

<!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>

[b]PS：这里再为大家推荐两款本站的在线计算器，都是采用js实现，且功能强大，相信对于大家深入了解JavaScript数学运算及web设计有所帮助：[/b] [b]在线标准计算器： [/b][url=http://tools.jb51.net/jisuanqi/jsq]http://tools.jb51.net/jisuanqi/jsq[/url] [b]在线科学计算器： [/b][url=http://tools.jb51.net/jisuanqi/jsqkexue]http://tools.jb51.net/jisuanqi/jsqkexue[/url] 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/278.htm]JavaScript数组操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/148.htm]JavaScript排序算法总结[/url]》、《[url=http://www.1sucai.cn/Special/281.htm]JavaScript遍历算法与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/119.htm]JavaScript数学运算用法总结[/url]》、《[url=http://www.1sucai.cn/Special/297.htm]JavaScript数据结构与算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/472.htm]JavaScript查找算法技巧总结[/url]》及《[url=http://www.1sucai.cn/Special/439.htm]JavaScript错误与调试技巧总结[/url]》希望本文所述对大家JavaScript程序设计有所帮助。

全部评论(0)

上一篇：js实现模拟计算器退格键删除文字效果的方法
下一篇：javascript实现输出指定行数正方形图案的方法

资讯排行榜
更多>>