html5 javascript 小型计算器

<!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 小型计算器的更多相关文章

微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...
经典 HTML5 & Javascript 俄罗斯方块游戏
Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...
HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% // ...
HTML5 JavaScript实现图片文字识别与提取
8月底的时候,@阿里巴巴推出了一款名为“拯救斯诺克”的闯关游戏,作为前端校园招聘的热身,做的相当不错,让我非常喜欢.后来又传出了一条消息,阿里推出了A-star(阿里星)计划,入职阿里的技术培训生, ...
【教程】HTML5+JavaScript编写flappy bird
作者: 风小锐新浪微博ID:永远de风小锐 QQ:547953539 转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下大学立即要毕业了. ...
html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。
html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素. 各版本html5shiv.js CDN网址:https://ww ...
自己做的javascript简易计算器
html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
HTML5+JavaScript动画基础完整版中文pdf扫描版
<HTML5+JavaScript动画基础>包括了基础知识.基础动画.高级动画.3D动画和其他技术5大部分,分别介绍了动画的基本概念.动画的JavaScript基础.动画中的三角学.渲染技 ...
[HTML] 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

随机推荐

vue学习笔记（1）—— 组件化实现todoList
一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install ...
mysql metadata lock
想必玩过mysql的人对Waiting for table metadata lock肯定不会陌生,一般都是进行alter操作时被堵住了,导致了我们在show processlist 时,看到线程的状 ...
关于CGI：Tomcat、PHP、Perl、Python和FastCGI之间的关系
如前文所述,Web服务器是一个很简单的东西,并不负责动态网页的构建,只能转发静态网页.同时Apache也说,他能支持perl,生成动态网页.这个支持perl,其实是apache越位了,做了一件额外的事 ...
Navicat提示Access violation at address 004E9844 in module ‘comctl32.dll’
内存越界问题,重新注册下Windows的动态链接库,首先“开始”—“cmd”,在打开的dos窗口中运行“for %1 in (%windir%\system32\*.dll) do regsvr32. ...
WSGIweb框架--1
from multiprocessing import Process import re import sys import socket #设置静态文件根目录 HTML_ROOT_DIR = '. ...
eclipse中使用Maven管理java工程设置jdk版本为jdk1.8
使用Maven管理Java工程时,maven可以自动下载工程中依赖的jar包,这对于大型的项目非常方便.但在初次使用eclipse新建maven工程时遇到一些问题,我的jdk安装的是1.8版本,在配置 ...
谨慎使用递增/递减运算符（C++）
递增++和递减运算符--不论看起来还是用起来,都感觉是十分简单而又优雅的,然而其中却藏有无法受控制的陷阱,我们必须小心的避免错误的用法而出现的不可控的情况发生. 比方说:x = 2* x++ *(3 ...
malloc/free 的使用要点
函数malloc的原型如下: void * malloc(size_t size); 用malloc申请一块长度为length的整数类型的内存,程序如下: int *p = (int *)mall ...
Spring Boot之Hello World
Spring Boot简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不 ...
Eclipse常用快捷键和调试方法
原文链接:http://my.oschina.net/u/1054538/blog/741561 常用快捷键 Eclipse最全快捷键,熟悉快捷键可以帮助开发事半功倍,节省更多的时间来用于做有意义的事 ...

html5 javascript 小型计算器

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

随机推荐

热门专题