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 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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学习之 认清变量的作用范围
2010/01/26 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
jcrop基本参数一览
2013/07/16 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
浅谈vue项目打包优化策略
2018/09/29 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
Python 判断是否为质数或素数的实例
2017/10/30 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Python chardet库识别编码原理解析
2020/02/18 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
python 从list中随机取值的方法
2020/11/16 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
Windows和Linux动态库应用异同
2016/07/28 面试题
2015幼儿园新学期寄语
2015/02/27 职场文书
教导处教学工作总结
2015/08/12 职场文书
初中信息技术教学反思
2016/02/16 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
python中的sys模块和os模块
2022/03/20 Python