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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
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 flush类输出缓冲剖析
2008/10/19 PHP
PHP 身份证号验证函数
2009/05/07 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
vue引用外部JS的两种种方法
2020/01/28 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
Python优先队列实现方法示例
2017/09/21 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
英语师范专业毕业生自荐信
2013/09/21 职场文书
总结表彰大会主持词
2014/03/26 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
诉讼授权委托书
2014/10/15 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
大学副班长竞选稿
2015/11/21 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
选购到合适的激光打印机
2022/04/21 数码科技
Java存储没有重复元素的数组
2022/04/29 Java/Android
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers