javascript實現(xiàn)簡單的可隨機變色網(wǎng)頁計算器示例

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

這篇文章主要介紹了javascript實現(xiàn)簡單的可隨機變色網(wǎng)頁計算器,具有基本的四則運算與背景色隨機變換功能,需要的朋友可以參考下

本文實例講述了javascript實現(xiàn)簡單的可隨機變色網(wǎng)頁計算器。分享給大家供大家參考，具體如下：

該程序能實現(xiàn)簡單的加、減、乘、除、求余，頁面還添加了隨機變換顏色的功能。

運行效果圖如下：

完整實例代碼如下：

<!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實現(xiàn)，且功能強大，相信對于大家深入了解JavaScript數(shù)學運算及web設計有所幫助：

在線標準計算器：
http://tools.jb51.net/jisuanqi/jsq

在線科學計算器：
http://tools.jb51.net/jisuanqi/jsqkexue

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)組操作技巧總結》、《JavaScript排序算法總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript數(shù)學運算用法總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript查找算法技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: