1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>计算机</title>
  6. </head>
  7.  
  8. <body>
  9. <input id="firstnumber" type="text" placeholder="请输入第一个值"/>
  10. <select id="choice" name="choice" >
  11. <option value=1>+</option>
  12. <option value=2>-</option>
  13. <option value=3>*</option>
  14. <option value=4>/</option>
  15. </select>
  16. <input id="secondnumber" type="text" placeholder="请输入第二个值"/>
  17. <input type="button" value="计算" onClick="show();"/>
  18. <label id="result"></label>
  19.  
  20. <script type="text/javascript">
  21. function show(){
  22. var first = parseInt(document.getElementById("firstnumber").value);
  23. var second =parseInt(document.getElementById("secondnumber").value);
  24. var chioce = document.getElementById("choice");
  25. //可以获取下拉列表中选中的值
  26. var symbol = chioce.options[chioce.selectedIndex].text;
  27. var result;
  28. if(symbol=='+'){
  29. result = first+second;
  30. } else if(symbol=='-'){
  31. result = first-second;
  32. }else if(symbol == '*'){
  33. result = first*second;
  34. } else if(symbol == '/'){
  35. result = first/second;
  36. }
  37. //可以将值放入标签里面
  38. document.getElementById("result").innerHTML=result;
  39. }
  40. </script>
  41. </body>
  42. </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. 读书笔记(一)—— 浅析浏览器渲染过程和html中的文件加载

    在构建页面时,我们会在html中载入一个或多个css和js文件.或许大家都已经习惯了"最佳实践"中,css文件应该放在<head>标签中引入,而js文件则是放在< ...

  2. WIN10-64+CUDA8.0+OpenCV3.0+VS2015配置

    在网上参考了各位前辈的攻略后,捣鼓了两天总算配置成功了. 目前网上多的还是ubuntu上配置CUDA的教程比较多比较详尽,但是我现在就是想在windows10上跑啊,就是想用CUDA啊... 1.CU ...

  3. Jdbc模版式写法与Spring-JdbcTemplate的比较

    一.Jdbc模版式写法: [流程] 加载驱动 获取数据库链接 创建Statement对象(用于发送sql语句) 向数据库发送sql语句,获取数据库返回的结果集 从结果集中获取数据 释放资源 上述部分用 ...

  4. web前端+javascript+h5电子书籍和实战分享

    有很多前端伙伴们学习前端很多了,但是如何能成为优秀的程序员呢,前端必学的知识点相信学习前端的伙伴们心里都非常清楚.主要的三要素包括HTML.CSS和JavaScript.那么学好JavaScript是 ...

  5. DOS批处理中%cd%和%~dp0的区别[forward]

    DOS批处理中%cd%和%~dp0的区别   在DOS的批处理中,有时候需要知道当前的路径. 在DOS中,有两个环境变量可以跟当前路径有关,一个是%cd%, 一个是%~dp0.      这两个变量的 ...

  6. 写java代码遇到的一些问题

    记录一些做论文实验写代码时遇到的问题. 数据库SQL语句方面: 1.java通过JDBC连接MySql数据库方法 参见:http://hzy3774.iteye.com/blog/1689525 2. ...

  7. DVWA笔记之一:brute Force

    1.Low 级别 burpsuite抓包 low级别是使用GET请求进行登录,将其发送到Intruder中,并增加password变量 之后选择字典开始攻击. 暴力破解完成后,查看结果RESULT,根 ...

  8. SDWebImage4.0.0 源码解析

    在开发iOS的客户端应用时,经常需要从服务器下载图片,虽然系统提供了下载工具:NSData.NSURLSession等等方法,但是考虑到图片下载过程中,需要考虑的因素比较多,比如:异步下载.图片缓存. ...

  9. easyui+ztree 后台管理系统模板

    用easyui+ztree做了个后台管理系统模板,效果图: 下载地址: csdn:http://download.csdn.net/detail/jackpay/6744505 github:http ...

  10. JavaScript入门(三)

    循环结构的执行步骤 1.声明循环变量: 2.判断循环条件: 3.执行循环体操作: 4.更新循环变量: 然后循环执行2~4,直到条件不成立时,跳出循环. [While循环] while循环()中的表达式 ...