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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
JavaScript DOM 添加事件
Feb 14 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
jsTree使用记录实例
Dec 01 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 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
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中title()方法的使用简介
2015/05/20 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
12步教你理解Python装饰器
2016/02/25 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python将txt文件读取为字典的示例
2018/12/22 Python
Django 路由层URLconf的实现
2019/12/30 Python
经典c++面试题二
2015/08/14 面试题
毕业生就业推荐信范文
2013/12/01 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
小学教师培训感言
2014/02/11 职场文书
给校长的建议书400字
2014/05/15 职场文书
法务专员岗位职责
2015/02/14 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js