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 相关文章推荐
jquery下json数组的操作实现代码
Aug 09 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
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
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Python实现一个简单的验证码程序
2017/11/03 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
python使用smtplib模块发送邮件
2020/12/17 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
刊首寄语大全
2014/04/11 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
2015新年寄语大全
2014/12/08 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
python数字转对应中文的方法总结
2021/08/02 Python