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 相关文章推荐
javascript 继承实现方法
Aug 26 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
jQuery解决iframe高度自适应代码
Dec 20 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
Vuex中实现数据状态查询与更改
Nov 08 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开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
jQuery中调用WebService方法小结
2011/03/28 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
Python中有几个关键字
2020/06/04 Python
python 装饰器的使用示例
2020/10/10 Python
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
为什么使用接口?
2014/08/13 面试题
编程实现去掉XML的重复结点
2014/05/28 面试题
销售主管岗位职责范本
2014/02/14 职场文书
毕业自我鉴定书
2014/03/24 职场文书
奉献演讲稿范文
2014/05/21 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
助学感谢信范文
2015/01/21 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL