<!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. 七月SSL行业新闻回顾

    大事件一:被泄露的私钥和基于假私钥进行的撤回 上个月,我们报告说Spotify和Cisco在应用程序中捆绑了有效证书的私钥.这些证书将根据基准要求被撤销,但应用程序不是泄露私钥的唯一来源.Koen R ...

  2. Vue事件处理

    前面的话 Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念.实际上,所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上,它 ...

  3. Luogu P2807 三角形计数

    题目背景 三角形计数(triangle) 递推 题目描述 把大三角形的每条边n等分,将对应的等分点连接起来(连接线分别平行于三条边),这样一共会有多少三角形呢?编程来解决这个问题. 输入输出格式 输入 ...

  4. MySQL replication illegal mix of collations

    MySQL replication case 一则 转载:http://www.vmcd.org/2013/09/mysql-replication-case-%E4%B8%80%E5%88%99/ ...

  5. iconfont 使用

    阿里巴巴适量图库  http://www.iconfont.cn/ 官方帮助中有非常详细的操作指导 http://www.iconfont.cn/help/detail?spm=a313x.77810 ...

  6. CTF中图片隐藏文件分离方法总结

    0x00 前言 在安全的大趋势下,信息安全越来越来受到国家和企业的重视,所以CTF比赛场次越来越多,而且比赛形式也不断的创新,题目也更加新颖有趣,对选手的综合信息安全能力有一个较好的考验,当然更好的是 ...

  7. Android手机客户端测试点(全)

    网上看到一个整理比较完善的手机客户端测试:

  8. 深入认识XmlReader

      深入认识XmlReader 摘要 XmlReader类是组成.NET的关键技术之一,极大地方便了开发人员对Xml的操作.通过本文您将对XmlReader有一个很好的认识,并将其应用到实际开发中. ...

  9. Ecplise插件安装方法

    eclipse3.5以前: 安装Eclipse插件无非两种方式: 1.直接copy插件到features/plugins目录 2.在links目录下创建链接文件 eclipse3.5及以后版本: 1. ...

  10. Spring mvc登录拦截器

    自己实现的第一个Spring mvc登录拦截器 题目要求:拒绝未登录用户进入系统,只要发现用户未登录,则将用户请求转发到/login.do要求用户登录 实现步骤: 1.在spring的配置文件中添加登 ...