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效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
做一个有下拉功能的留言版
2006/10/09 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
js精度溢出解决方案
2012/12/02 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
python 实现绘制整齐的表格
2019/11/18 Python
python和JavaScript哪个容易上手
2020/06/23 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
小学课外阅读总结
2014/07/09 职场文书
离职感谢信
2015/01/21 职场文书
会计出纳岗位职责
2015/03/31 职场文书
民事调解书范文
2015/05/20 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
redis内存空间效率问题的深入探究
2021/05/17 Redis