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


Posted in Javascript onDecember 30, 2016

本文实例讲述了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>
Javascript 相关文章推荐
js模拟类继承小例子
Jul 17 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 #Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 #Javascript
jQuery中页面返回顶部的方法总结
Dec 30 #Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 #Javascript
JS实现全屏的四种写法
Dec 30 #Javascript
js设置文字颜色的方法示例
Dec 30 #Javascript
Node.js的Mongodb使用实例
Dec 30 #Javascript
You might like
咖啡的种类和口感
2021/03/03 新手入门
php-redis中的sort排序函数总结
2015/07/08 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python制作简单五子棋游戏
2019/06/18 Python
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
举例说明类变量和实例变量的区别
2016/06/30 面试题
总经理助理岗位职责
2013/11/08 职场文书
教师旷工检讨书
2014/01/18 职场文书
社区庆八一活动方案
2014/02/02 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
职务说明书范文
2014/05/07 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
2019年思想汇报
2019/06/20 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS