<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>计算机</title>

</head>

<body>

   <input id="firstnumber" type="text" placeholder="请输入第一个值"/>

   <select id="choice" name="choice" >

   <option value=1>+</option>

   <option value=2>-</option>

   <option value=3>*</option>

   <option value=4>/</option>

   </select>

   <input id="secondnumber" type="text" placeholder="请输入第二个值"/>

   <input type="button" value="计算" onClick="show();"/>

   <label id="result"></label>

   <script type="text/javascript">

   function show(){

       var first = parseInt(document.getElementById("firstnumber").value);

       var second =parseInt(document.getElementById("secondnumber").value);

       var chioce = document.getElementById("choice");

       //可以获取下拉列表中选中的值

       var symbol = chioce.options[chioce.selectedIndex].text;

       var result;

       if(symbol=='+'){

          result = first+second;

      }    else if(symbol=='-'){

          result = first-second;

      }else if(symbol == '*'){

          result = first*second;

      }  else if(symbol == '/'){

          result = first/second;

      }

      //可以将值放入标签里面

      document.getElementById("result").innerHTML=result;

   }

   </script>

</body>

</html>

效果图：

aaarticlea/png;base64,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" alt="" />
 
 
 
 
 

html5 javascript 小型计算器的更多相关文章

  1. 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

    在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

  2. 经典 HTML5 & Javascript 俄罗斯方块游戏

    Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...

  3. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  4. HTML5 JavaScript实现图片文字识别与提取

    8月底的时候,@阿里巴巴 推出了一款名为“拯救斯诺克”的闯关游戏,作为前端校园招聘的热身,做的相当不错,让我非常喜欢.后来又传出了一条消息,阿里推出了A-star(阿里星)计划,入职阿里的技术培训生, ...

  5. 【教程】HTML5+JavaScript编写flappy bird

         作者: 风小锐      新浪微博ID:永远de风小锐      QQ:547953539      转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下 大学立即要毕业了. ...

  6. html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。

    html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素. 各版本html5shiv.js CDN网址:https://ww ...

  7. 自己做的javascript简易计算器

    html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  8. HTML5+JavaScript动画基础 完整版 中文pdf扫描版

    <HTML5+JavaScript动画基础>包括了基础知识.基础动画.高级动画.3D动画和其他技术5大部分,分别介绍了动画的基本概念.动画的JavaScript基础.动画中的三角学.渲染技 ...

  9. [HTML] 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

    在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

随机推荐

  1. nopCommerce 3.9 大波浪系列 之 微信公众平台登录插件

    一.简介 插件源码下载:点击下载 微信公众平台网站授权帮助地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp142114084 ...

  2. NYOJ 5 Binary String Matching

    Binary String Matching 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 Given two strings A and B, whose alp ...

  3. cache buffer

    //本文基本上是摘要了网络上各位大神对cache.buffer的总结,由于是800年前保存在本地,所以也已经忘了出处了.感谢各位大神. //本文对这2个概念的理解尚浅,如果愿意补充那就再好不过了.  ...

  4. Linux - 简明Shell编程15 - 调试（Debug）

    脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 #!/bin/bash -x for filename ...

  5. 借助AMD来解决HTML5游戏开发中的痛点

    借助AMD来解决HTML5游戏开发中的痛点 游戏开发的痛点 现在,基于国内流行引擎(LayaAir和Egret)和TypeScript的HTML5游戏开发有诸多痛点: 未采用TypeScript编译器 ...

  6. 用netstat查看网络状态详解

    --用netstat查看网络状态详解 -----------------------------2014/06/11 一.Linux服务器上11种网络连接状态:                     ...

  7. 模拟controfile丢失与重建

    --模拟controlfile丢失与重建 ----------------------------------------------------------------2013/09/21 1. 关 ...

  8. JS数组操作中的经典算法

    冒泡排序<script type="text/javascript"> var arr = [3,7,6,2,1,5]; 定义一个交换使用的中间变量var temp = ...

  9. C# foreach循环较for循环的优势与劣势

    一.foreach循环的优势 C#支持foreach关键字,foreach在处理集合和数组相对于for存在以下几个优势: 1.foreach语句简洁 2.效率比for要高(C#是强类型检查,for循环 ...

  10. msbuildtoolspath is not specified for the toolsversion xx

    本地先是安装的vs2015,由于项目需求又安装了vs2008,在用vs2008打开.csproj工程文件,出现了上图的错误. 这一般是由于安装了vs2015和vs2008冲突产生的问题. 解决方案: ...