当前位置: 首页 > 编程笔记 >

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

楚煜
2023-03-14
本文向大家介绍javascript实现简单的可随机变色网页计算器示例,包括了javascript实现简单的可随机变色网页计算器示例的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了javascript实现简单的可随机变色网页计算器。分享给大家供大家参考,具体如下:

该程序能实现简单的加、减、乘、除、求余,页面还添加了随机html" target="_blank">变换颜色的功能。

运行效果图如下:

完整实例代码如下:

<!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实现简单计算器的使用技巧和注意事项,需要的朋友参考一下 适合初学者参考的简易计算器,里面没有太多的难以理解的方法,使用的是最基础的JS语法解决式子的运算问题,同时处理了式子中的运算优先级。 实现思路 1、通过绑定点击事件实现待计算式子的输入 2、遍历原式子,读取式子中乘除运算符的位置 3、优先处理乘除取余运算 4、处理加减

  • 本文向大家介绍php编程实现简单的网页版计算器功能示例,包括了php编程实现简单的网页版计算器功能示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了php编程实现简单的网页版计算器功能。分享给大家供大家参考,具体如下: 如何通过php代码来实现一个网页版的计算器的简单功能?下面就是通过php基础知识来做的网页版计算器,功能只有“加减剩除求余”,其他的一些计算功能可扩展。 实现简单计算器的

  • 本文向大家介绍Javascript 实现简单计算器实例代码,包括了Javascript 实现简单计算器实例代码的使用技巧和注意事项,需要的朋友参考一下 效果图: 刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵。 代码: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 本文向大家介绍js实现简单计算器,包括了js实现简单计算器的使用技巧和注意事项,需要的朋友参考一下 参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出:   1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如”0123“,由于能力有

  • Python3 实例 以下代码用于实现简单计算器实现,包括两个数基本的加减乘除运输: 实例(Python 3.0+)# Filename : test.py # author by : www.runoob.com # 定义函数 def add(x, y): """相加""" return x + y def subtract(x, y): """相减""" return x - y def mu

  • 本文向大家介绍javascript实现的简单计时器,包括了javascript实现的简单计时器的使用技巧和注意事项,需要的朋友参考一下 最近写了很多微信端的互动小游戏,比如下雪花 限时点击 赢取奖品,限时拼图,限时答题等,都是些限时‘游戏'(其实算不上游戏,顶多算是具有一点娱乐性的小互动而已) 上面出现了4个限时,对,没错,这里记录的就是最近写的 ‘计时器' ... 恩 , 计时器 就一个setI