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代码
Dec 15 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
vue 中固定导航栏的实例代码
Nov 01 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
php学习之简单计算器实现代码
2011/06/09 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
PHP输出日历表代码实例
2015/03/27 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
读jQuery之一(对象的组成)
2011/06/11 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
酒店经理职责
2014/01/30 职场文书
在校实习生求职信
2014/06/18 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL
mysql sock文件存储了什么信息
2022/07/15 MySQL
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技