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

更新时间：2016年12月30日 15:02:23 作者：aitaoke

这篇文章主要介绍了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='+'>&nbsp;+&nbsp;<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="&nbsp;=&nbsp;" 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.jb51.net/jisuanqi/jsq

在线科学计算器：
http://tools.jb51.net/jisuanqi/jsqkexue

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

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

您可能感兴趣的文章:

javascript实现前端成语点击验证优化
这篇文章主要介绍了javascript实现前端成语点击验证优化，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
关于JavaScript对象的动态选择及遍历对象
本文为大家介绍下JavaScript对象的两点：动态选择方法及属性、遍历对象属性和方法,需要的朋友可以参考下
2014-03-03
js实现砖头在页面拖拉效果
这篇文章主要为大家详细介绍了js实现砖头在页面拖拉效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
Js实现网页键盘控制翻页的方法
这篇文章主要介绍了Js实现网页键盘控制翻页的方法,较为详细的分析了Js实现网页键盘控制翻页的原理与具体实现方法,非常具有实用价值,需要的朋友可以参考下
2014-10-10
微信小程序全局配置及常用配置项详解
微信小程序中我们创建页面时会自动创建四个文件分别为js文件,wxml文件wxss文件最后还有我们今天的主角配置文件,下面这篇文章主要给大家介绍了关于微信小程序全局配置以及常用配置项的相关资料,需要的朋友可以参考下
2022-11-11
JavaScript学习笔记之DOM基础 2.4
DOM(Document Object Model)，即“文档对象模型”。基于语义的逻辑结构，DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型，下面小编把最近整理有关javascript笔记之DOM基础分享给大家，有需要的朋友可以参考下
2015-08-08
JavaScript实现开关等效果
本文给大家分享一段简单的代码基于js实现开关灯效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-09-09
Javascript下的urlencode编码解码方法附decodeURIComponent
而本文，就大概说说如何在js中通过系统自带的函数去解决这个问题。
2010-04-04
js判断某个方法是否存在实例代码
这篇文章主要介绍了js判断某个方法是否存在的实例代码,可用于检测js中的方法是否可用,具有一定参考借鉴价值,需要的朋友可以参考下
2015-01-01
一文带你快速学会JavaScript条件判断及高级用法
JavaScript支持其用于执行根据不同的条件不同的操作条件语句,下面这篇文章主要给大家介绍了关于如何在JavaScript中更好的使用条件判断的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09