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实现用一个DIV来包装文本元素节点
Sep 09 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
详解Angular 4.x Injector
May 04 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
vue实现简单全选和反选功能
Sep 15 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
XAMPP安装与使用方法详细解析
2013/11/27 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
python实现360的字符显示界面
2014/02/21 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python算法题 链表反转详解
2019/07/02 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python设置随机种子实例讲解
2019/09/12 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
J2EE中的容器都包括哪些
2013/08/21 面试题
毕业生个人求职的自我评价
2013/10/28 职场文书
六查六看剖析材料
2014/02/15 职场文书
本科应届生求职信
2014/08/05 职场文书
房产协议书范本2014
2014/09/30 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
党员剖析材料范文
2014/12/18 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis