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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
理解Javascript图片预加载
Feb 23 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
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
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
python魔法方法-属性访问控制详解
2016/07/25 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python移位运算的实现
2019/07/15 Python
django页面跳转问题及注意事项
2019/07/18 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
数控专业个人求职信范例
2013/11/29 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
新党章的学习心得体会
2014/11/07 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript