JavaScript实现简单的计算器


Posted in Javascript onJanuary 16, 2020

本文实例为大家分享了JavaScript实现简单的计算器的具体代码,供大家参考,具体内容如下

整个计算器实现由html文件、js文件和css样式表三部分组成
整体效果:body里放俩div,一个大的包一个小的,小的放键盘,键盘div里放键盘。

JavaScript实现简单的计算器

html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>计算器</title>
 <link rel="stylesheet" href="css/jsq_css.css">
</head>
 
<body>
 <div class="bor">
 <input type="text" class="s_text" οnfοcus="this.blur();" value="0" id="result">
 <div class="main">
  <li οnclick="command(7);">7</li>
  <li οnclick="command(8);">8</li>
  <li οnclick="command(9);">9</li>
  <li id="j_div" οnclick="tools('/','g')">÷</li>
  <li οnclick="command(4);">4</li>
  <li οnclick="command(5);">5</li>
  <li οnclick="command(6);">6</li>
  <li id="j_mul" οnclick="tools('*','g')">×</li>
  <li οnclick="command(1);">1</li>
  <li οnclick="command(2);">2</li>
  <li οnclick="command(3);">3</li>
  <li id="j_sub" οnclick="tools('-','g');">-</li>
  <li οnclick="command(0)";>0</li>
  <li id="j_c"οnclick="clearzero('j')">c</li>
  <li id="j_dy"οnclick="equal('j');">=</li>
  <li id="j_add" οnclick="tools('+','g')";>+</li>
 
  </ul>
 </div>
 </div>
</body>
</html>

css:

*{margin: 0;padding: 0}
li{list-style: none}
 
.bor{margin: 0 auto;width: 400px;height: 520px;border: 2px solid #000;
margin-top: 50px;overflow: hidden;text-align: center;}
.s_text{margin: 0 auto;width: 330px;height: 80px;margin-top: 15px;
border: 2px solid #000000;font-size: 30px;padding-left: 20px;}
.main{margin: 0 auto;width: 350px;height: 400px;margin-top: 15px;}
.main ul{display: flex;height: 100%;justify-content: space-between;flex-wrap: wrap;}
.main ul li{width: 80px;height: 80px;border: 1px solid #000000;
text-align: center; line-height:80px;font-size: 36px;cursor: pointer ;}
.main ul li:hover{background: #eeeeee;}

js:(将这段代码写在body最下面) 

<script type="text/javascript">
 var resultDom = document.getElementById("result");
 var operate = true; //操作符加锁
 var afequ = true;
 //点击计算器执行函数(点数字的时候)
 function command(num){
  //点击等号之后要进行一次清空
  if(!afequ) {
  clearzero();
  }
  //获取输入框中value的值
  var str = resultDom.value;//在这里加一个判断, 如果第一位是0, 就用""填充
  str = (str == "0" ? "":str);//条件操作符 str在判断无输入或者0的时候 都算作是0
  str += num; //拼接数字, 然后赋值给文本框
  resultDom.value = str;//.value获取文本框中的值
  operate = true; //锁住操作符
 }
 //四则运算
 function tools(p,m){
  if(operate){
  var num = resultDom.value;
  num = (num == "0" ? "":num);
  resultDom.value = num + p;
  operate = false;
  }
 }
 //得出最后的结果
 function equal(m){
  var result = resultDom.value;
  var r = eval(result); //eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行
  resultDom.value =r;
 }
 //c归零的
 function clearzero(){
  resultDom.value=0;
 }
 
</script>

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

Javascript 相关文章推荐
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
js面向对象之实现淘宝放大镜
Jan 15 #Javascript
js实现简单的打印表格
Jan 15 #Javascript
js实现图片实时时钟
Jan 15 #Javascript
js实现中文实时时钟
Jan 15 #Javascript
JS实现音量控制拖动
Jan 15 #Javascript
基于vue.js实现购物车
Jan 15 #Javascript
原生js+css调节音量滑块
Jan 15 #Javascript
You might like
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
javascript 继承实现方法
2009/08/26 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
Fiddler如何抓取手机APP数据包
2016/01/22 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python同时迭代多个序列的方法
2020/07/28 Python
python中字典增加和删除使用方法
2020/09/30 Python
python switch 实现多分支选择功能
2020/12/21 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
会计电算化个人求职信范文
2014/01/24 职场文书
食品流通安全承诺书
2014/05/22 职场文书
博士生导师推荐信
2014/07/08 职场文书
社区活动策划方案
2014/08/21 职场文书
金秋助学感谢信
2015/01/21 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书