javascript实现简易计算器


Posted in Javascript onFebruary 01, 2017

前言

hello,大家好,学习一段时间了,学习了框架和后台的内容,为了防止前端的js和jq的熟练度不够,忘记很多算法和基础用法,会陆陆续续更新一些小的功能效果code,用于记录和积累,不足之处很多,封装性和代码冗余暂且不严格要求,尽力完善,保持更新..

简易加减乘除计算器,利用表单的value值取值,用原生js实现.可直接复制到编辑器,打开即可运行.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>加减乘除计算器</title> 
 <script type="text/javascript">
 function count(){ 
 var a = parseInt(document.getElementById("txt1").value);
 var b = parseInt(document.getElementById("txt2").value) ;
 var sign = document.getElementById("select").value;
 var result = 0;
  switch(sign){
   case "+": result = a+b;
   break;
   case "-": result = a-b;
   break;
   case "*": result = a*b;
   break;
   case "/": result = a/b;
   break;
   case "%": result = a%b;
   break;
   }
 document.getElementById("answer").value = result;
 }
 </script> 
 </head> 
 <body>
 <input type='text' id='txt1' /> 
 <select id='select'>
  <option value='+'>+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
  <option value="%">%</option>
 </select>
 <input type='text' id='txt2' /> 
  <input type='button' value=' = ' onclick="count()"/> 
  <!--通过 = 按钮来调用创建的函数,得到结果--> 
 <input type='text' id='answer' /> 
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
vue实现跨域的方法分析
May 21 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
javascript实现右下角广告框效果
Feb 01 #Javascript
基于javascript实现最简单选项卡切换
Feb 01 #Javascript
快速实现jQuery多级菜单效果
Feb 01 #Javascript
angular实现商品筛选功能
Feb 01 #Javascript
Bootstarp基本模版学习教程
Feb 01 #Javascript
angular实现表单验证及提交功能
Feb 01 #Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 #Javascript
You might like
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
python下读取公私钥做加解密实例详解
2017/03/29 Python
python中的set实现不重复的排序原理
2018/01/24 Python
python简单贪吃蛇开发
2019/01/28 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
python Xpath语法的使用
2020/11/26 Python
python matlab库简单用法讲解
2020/12/31 Python
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
前台文员我鉴定
2014/01/12 职场文书
班主任个人工作反思
2014/04/28 职场文书
小区推广策划方案
2014/06/06 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书