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='+'> + <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.jb51.net/jisuanqi/jsq

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

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

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

赞 (0)

相关推荐

  • 使用jsp调用javabean实现超简单网页计算器示例

    使用jsp调用javabean实现超简单网页计算器示例

    以下是代码: Calculator.java 复制代码 代码如下: package com.amos.model; import java.math.BigDecimal; /** * @ClassName: Calculator * @Description: 计算器 * @author: amosli * @email:amosli@infomorrow.com * @date Mar 20, 2014 1:04:59 AM  */ public class Calculator {    

  • JS 实现计算器详解及实例代码（一）

    JS 实现计算器详解及实例代码（一）

    Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器 自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板

  • Javascript 实现计算器时间功能详解及实例（二）

    Javascript 实现计算器时间功能详解及实例（二）

    Javascript 计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) Javascript计算器 -> 添加时间在屏显区左上角添加时间显示 效果图如下: 代码 初始化 // 计算器初始化 Calculator.prototype.init = function () { this.addTdClick(); // 时间显示 this.showDate(); }; 时间显示 // 在屏显区左上角显示时间日期 Calculator

  • 网页计算器 一个JS计算器

    一个挺小的JavaScript网页计算器,界面美化的我想还是不错的,毕竟在没有使用任何图片修饰的情况下,很好看,而且功能挺实用,可以完成基本的数学算数运算,点击"运行代码"可以运行一下看效果. 计算器 button {width:40; border: 1 solid #808080;background-color: #FFFFFF}   &nbsp ← 1 2 3 + 4 5 6 - 7 8 9 × C 0 = ÷ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 简单实现JS计算器功能

    简单实现JS计算器功能

    该计算器功能: 1.校验:小数点,重复计算,以及大量更符合用户体验的操作. 2.能够从键盘输入. 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type

  • node.js+express制作网页计算器

    环境: 主机:WIN10 express安装: 1.安装express-generator 输入命令: npm install -g express-generator 2.安装express 输入命令: npm install -g express 3.验证是否安装成功 输入命令:express -V 查看帮助:express --help 建立工程: express -e calculator cd calculator && npm install 运行默认网页: 输入命令:npm

  • js实现简单的计算器功能

    话不多说,请看示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的计算器</title> <style> * { margin: 0 auto; padding: 0px; } html, body { width: 100%; height: 100%; } a { text-

  • html+js实现简单的计算器代码(加减乘除)

    html+js实现简单的计算器代码(加减乘除)

    html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&

  • javascript实现简易计算器的代码

    javascript实现简易计算器的代码

    今天闲来无聊,想写点什么,突然想到用javascript写一个计算器.程序还存在很多的Bug,先在这里记录一下,以后慢慢更正. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

  • js实现简单计算器

    js实现简单计算器

    参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html

  • 基于JSP实现一个简单计算器的方法

    本文实例讲述了基于JSP实现一个简单计算器的方法.分享给大家供大家参考.具体实现方法如下: index.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>  <%  String path = request.getContextPath();  String basePath = request.getSch

  • 使用JSP制作一个超简单的网页计算器的实例分享

    使用JSP制作一个超简单的网页计算器的实例分享

    实现一个简单的计算器程序,要求:使用jsp+javabean模式实现. 项目源代码如下: 文件:calculator.jsp <%@ page language="java" pageEncoding="UTF-8"%> <%@ page isErrorPage="true"%> <%@ page errorPage="calculator.jsp" %> <%@ taglib uri

随机推荐