JS制作简易计算器的实例代码
做一个简易计算器，效果图片
c表示清空，为一个空字符串
+/-表示该值为正还是负
%表示当前值/100
←表示退格，往前删除一个值
eval 函数是能够计算出字符串表达式或者语句的结果，把结果求出来。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
margin:20px auto;
width:420px;
height:490px;
background-color:#E8E8E8;
border:1px solid #ccc;
border-radius:5px;
}
.div2{
width:410px;
height:60px;
border:1px solid #ccc;
margin:5px auto;
border-radius:5px;
text-align:right;
font-size:30px;
background-color:white;
padding-top:10px;
}
.div3{
width:410px;
height:60px;
margin:5px auto;
float:left;
}
.div13{
float:left;
width:70px;
height:60px;
border:1px solid #ccc;
background-color: ghostwhite;
margin-left:8px;
text-align:center;
font-size:30px;
color:deepskyblue;
border-radius:5px;
cursor:default;
padding-top:10px;
box-shadow:4px 3px 3px #CCCCCC;
}
.div133{width:160px;}
.top{margin-top:10px;margin-left:10px;}
.color{color:black;}
.top1{margin-top:20px;margin-left:10px;}
.top2{margin-top:30px;margin-left:10px;}
.top3{margin-top:40px ;margin-left:10px;}
.div23{float:left;}
.div33{float:left;}
</style>
</head>
<body>
<div id="div1">
<div class="div2" id="input"><b>0</b></div>
<div class="div3">
<div class="div13" onclick="w(' ')"><b>C</b></div>
<div class="div13"onclick="w('opposite')"><b>+/-</b></div>
<div class="div13" onclick="w('percent')"><b>%</b></div>
<div class="div13 div133" onclick="w('backspace')"><b>←</b></div>
</div>
<div class="div3">
<div class="div13 top color" onclick="a('7')"><b>7</b></div>
<div class="div13 top color" onclick="a('8')"><b>8</b></div>
<div class="div13 top color" onclick="a('9')"><b>9</b></div>
<div class="div13 top " onclick="a('+')"><b>+</b></div>
<div class="div13 top " onclick="a('-')"><b>-</b></div>
</div>
<div class="div3">
<div class="div13 top1 color" onclick="a('4')"><b>4</b></div>
<div class="div13 top1 color"onclick="a('5')"><b>5</b></div>
<div class="div13 top1 color" onclick="a('6')"><b>6</b></div>
<div class="div13 top1" onclick="a('*')"><b>×</b></div>
<div class="div13 top1" onclick="a('/')"><b>÷</b></div>
</div>
<div class="div3">
<div class="div13 top2 color" onclick="a('1')"><b>1</b></div>
<div class="div13 top2 color" onclick="a('2')"><b>2</b></div>
<div class="div13 top2 color"onclick="a('3')"><b>3</b></div>
<div class="div13 top2"onclick="w('pow')"><b>x<sup>2</sup></b></div>
<div class="div13 top2" onclick="w('sqrt')"><b>√</b></div>
</div>
<div class="div3">
<div class="div13 top3 color" onclick="a('0')"><b>0</b></div>
<div class="div13 top3"onclick="a('.')"><b>.</b></div>
<div class="div13 top3"onclick="e('=')"><b>=</b></div>
</div>
</div>
<script>
input=document.getElementById("input");
s="";
function a(v)
{
s=s+v;
input.innerHTML=s;
}
function e(v)
{
input.innerHTML=eval(s);
}
function w(type)
{
switch(type)
{ case ' ':s='';break;
case 'opposite':s=-s;break;
case 'percent':s=s/100;break;
case 'pow':s=Math.pow(s,2);break;
case 'sqrt':s=Math.sqrt(s);break;
case 'backspace':s=s.substr(s,s.length-1);// case 'backspace':s=s.substring(0,s.length-1);
}
input.innerHTML=s;
}
</script>
</body>
</html>
这里我本来是采用的substring这个函数的，但是在计算的时候，当只留下一个值的时候，按←的时候就不起作用，但是把substring改成substr的时候就能清除的了，原因我觉得应该是这样:s=s.substring(s,s.length-1);当只剩下一个值的时候，假设s值为7,substring中的第一个参数为是，表示中国字符串的首地址，就是0，第二个参数为0，怎么取，但是换成这样是可以的s=s.substring(0,s.length-1);，但是用s=s.substr(s,s.length-1);当只剩下一个值的时候是可以清除掉的，我想应该是当第二个参数是取得个数为0的时候，就把空字符串赋给s了吧。
以上就是JS制作简易计算器的实例代码的详细内容，更多关于JS制作简易计算器的资料请关注我们其它相关文章！
相关推荐
-
Json实现传值到后台代码实例
1.定义一个键值对对象 function ObjData(key,value){ this.Key=key; this.Value=value; } 2.在点击表单的提交buttom的方法中: var list=document.getElementById("myForm").getElementsByTagName("input");//查询form下的所有input标签 var array=[]; //定义一个对象数据 存放每一个input的键值对(input
-
通过实例了解JS执行上下文运行原理
壹 ❀ 引 我们都知道,JS代码的执行顺序总是与代码先后顺序有所差异,当先抛开异步问题你会发现就算是同步代码,它的执行也与你的预期不一致,比如: function f1() { console.log('听风是风'); }; f1(); //echo function f1() { console.log('echo'); }; f1(); //echo 按照代码书写顺序,应该先输出 听风是风,再输出 echo才对,很遗憾,两次输出均为 echo:如果我们将上述代码中的函数声明改为函数表达式,结
-
JS简易计算器实例讲解
本文实例为大家分享了JS实现简易计算器的具体代码,供大家参考,具体内容如下 简易计算器: 1)选择需要运算的类型,输入对应的数字 2)输入需要参与运算的数字 3)输入"计算"二字,进行运算后,显示运算结果及运算表达式 <script type="text/javascript"> // 加法运算 function plus(arrPlus){ var sum = 0; for(var i = 0 ; i < arrPlus.length ; i++
-
JS猜数字游戏实例讲解
本文实例为大家分享了JS实现猜数字游戏的具体代码,供大家参考,具体内容如下 猜数字游戏: 1)利用JS的Math内置对象,实现在1-50内选取一个整数随机数作为游戏答案 2)输入数字进行判断,共有10次输入机会 3)若大于答案数字,则提示猜大了,若小于答案数字,则提示猜小了 4)直至10次机会用完或者猜对答案了,则结束游戏 <script type="text/javascript"> // 猜数字案例 function guessTip(min, max) { min =
-
实例讲解JavaScript 计时事件
JavaScript 计时事件 通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件. 在 JavaScritp 中使用计时事件是很容易的,两个关键方法是: setInterval() - 间隔指定的毫秒数不停地执行指定的代码. setTimeout() - 在指定的毫秒数后执行指定代码. 注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法. setInt
-
JS原型对象操作实例分析
本文实例讲述了JS原型对象操作.分享给大家供大家参考,具体如下: 万物皆对象,函数也同样是对象,是特殊的函数对象 function fn() {} let a = new fn(); let b = new Function() console.log(typeof a); // object console.log(typeof b); // function 打开浏览器,输入fn,会发现fn有一个prototype(原型)属性,这个属性是一个指针,指向原型对象,这个对象包括了特定类型所有共享
-
Json字符串转Java对象和List代码实例
对象POJO和JSON互转 public class JsonUtil { /** * JSON 转 POJO */ public static <T> T getObject(String pojo, Class<T> tclass) { try { return JSONObject.parseObject(pojo, tclass); } catch (Exception e) { log.error(tclass + "转 JSON 失败"); } re
-
JS实现联想、自动补齐国家或地区名称的功能
1.JS部分 function autocomplete(inp, arr) { /*函数主要有两个参数:文本框元素和自动补齐的完整数据*/ var currentFocus; /* 监听 - 在写入时触发 */ inp.addEventListener("input", function(e) { var a, b, i, val = this.value; /*关闭已经打开的自动完成值列表*/ closeAllLists(); if (!val) { return false;}
-
JavaScript多种图形实现代码实例
1．小星星 设有如下的曲线参数方程: N=5 x = r*sin(nθ)*cos(θ) y = r*sin(nθ)*sin(θ) (0≤θ≤2π) 用循环依次取θ值为0~2π(每次增量为π/64),计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个一个5瓣花卉图案. 编写如下的HTML代码. <!DOCTYPE html> <head> <title>小星星</title> <script type="text/ja
-
JS制作简易计算器的实例代码
做一个简易计算器,效果图片 c表示清空,为一个空字符串 +/-表示该值为正还是负 %表示当前值/100 ←表示退格,往前删除一个值 eval 函数是能够计算出字符串表达式或者语句的结果,把结果求出来. 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"
-
js制作简易计算器
本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下 要制作一个如图所示的简易计算器,首先要建立一个表单,制作出如图所示的样子. <table border="1" cellspacing="0" > <tr><th colspan="2">购物简易计算器</th></tr> <tr> <td>第一个数</td> <td&g
-
js制作简易年历完整实例
本文实例讲述了js制作简易年历的方法.分享给大家供大家参考.具体如下: 今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己坚持下去,各位js大神也多多指点. innerHtml的用法 现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了. 例如top.innerHTML="";就可以在top对应的位置出现一个button了! 程序实现思
-
JavaScript制作简易计算器（不用eval）
本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下 <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; } body { background: #940032; } #counter
-
js实现简易计算器小功能
本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
-
原生js实现简易计算器
本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下 最近,博主闲来无聊,就没事用js写了个简易计算器(博主是搞后端的,不是前端>_<).其实,感觉搞前端的很幸福,自己弄出点东西很有成就感,话不多说,附上源码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title> <style>
-
Python制作简易计算器功能
本文实例为大家分享了Python制作简易计算器的具体代码,供大家参考,具体内容如下 简易计算器 简易计算器功能: 实现输入,计算,输出功能: 可以计算基本的加减乘除功能: 处理除法中除数不能为零的设计: 处理输入不能为空的设计: 记录历史计算,显示在右边文本框: 不同于之前的两个项目,这个项目的布局是网格布局,窗口的设计比较像,但是实际的网格布局实现过程中也是碰了许多的坑. 窗口 实现最基本的窗口界面 import tkinter as tk import tkinter.messagebox
-
Android studio制作简易计算器功能
本文实例为大家分享了Android studio制作简易计算器的具体代码,供大家参考,具体内容如下 布局如下: 布局文件代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.andro
-
基于html+css+js实现简易计算器代码实例
使用html+css+js实现简易计算器, 效果图如下: html代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
-
Angular.js 实现数字转换汉字实例代码
AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. 下面通过本文给大家介绍Angular.js 实现数字转换汉字实例代码,具体代码如下所示: // 1.实现输入数字输出对应汉字,要求使用angularjs,不准使用$watch函数,for循环:提示:ng-change指令 <div ng-app="my