如何使用JS编写一个简单的计算器

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用JS编写一个简单的计算器相关的知识，希望对你有一定的参考价值。

参考技术A js部分
var num=0,result=0,numshow="0";
var operate=0; //判断输入状态的标志
var calcul=0; //判断计算状态的标志
var quit=0; //防止重复按键的标志
function command(num)
var str=String(document.calculator.numScreen.value); //获得当前显示数据
str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
str=str + String(num); //给当前值追加字符
document.calculator.numScreen.value=str; //刷新显示
operate=0; //重置输入状态
quit=0; //重置防止重复按键的标志

function dzero()
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0";
document.calculator.numScreen.value=str;
operate=0;

function dot()
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
for(i=0; i<=str.length;i++) //判断是否已经有一个点号
if(str.substr(i,1)==".") return false; //如果有则不再插入

str=str + ".";
document.calculator.numScreen.value=str;
operate=0;

function del() //退格
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? str : "";
str=str.substr(0,str.length-1);
str=(str!="") ? str : "0";
document.calculator.numScreen.value=str;

function clearscreen() //清除数据
num=0;
result=0;
numshow="0";
document.calculator.numScreen.value="0";

function plus() //加法
calculate(); //调用计算函数
operate=1; //更改输入状态
calcul=1; //更改计算状态为加

function minus() //减法
calculate();
operate=1;
calcul=2;

function times() //乘法
calculate();
operate=1;
calcul=3;

function divide() //除法
calculate();
operate=1;
calcul=4;

function persent() //求余
calculate();
operate=1;
calcul=5;

function equal()
calculate(); //等于
operate=1;
num=0;
result=0;
numshow="0";

//
function calculate()
numshow=Number(document.calculator.numScreen.value);
if(num!=0 && quit!=1) //判断前一个运算数是否为零以及防重复按键的状态
switch(calcul) //判断要输入状态
case 1:result=num+numshow;break; //计算"+"
case 2:result=num-numshow;break; //计算"-"
case 3:result=num*numshow;break;
case 4:if(numshow!=0)result=num/numshow;elsedocument.getElementById("note").innerhtml="被除数不能为零！"; setTimeout(clearnote,4000) break;
case 5:result=num%numshow;break;

quit=1; //避免重复按键

else
result=numshow;

numshow=String(result);
document.calculator.numScreen.value=numshow;
num=result; //存储当前值

function clearnote() //清空提示
document.getElementById("note").innerHTML="";


html部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>写给新手：js表单操作（四） 简单计算器（二）</title>
<style type="text/css">
body
font-size:12px;
font-family:Arial, Georgia, "Times New Roman", Times, serif;
color:#555;
text-align:center;
background-color:#e2e2e2;

h6
margin:0;
font-size:12px;

#calculator
width:240px;
height:auto;
overflow:hidden;
margin:10px auto;
border:#fff 1px solid;
padding-bottom:10px;
background-color:#f2f2f2;

#calculator div
clear:both;

#calculator ul
padding:0;
margin:5px 14px;
border:#fff 1px solid;
height:auto;
overflow:hidden

#calculator li
list-style:none;
float:left;
width:32px;
height:32px;
margin:5px;
display:inline;
line-height:32px;
font-size:14px;
background-color:#eaeaea;

#calculator li.tool
background-color:#e2e2e2;

#calculator li:hover
background-color:#f9f9f9;
cursor:pointer;

#calculator li:active
background-color:#fc0;
cursor:pointer;

#calculator li.tool:active
background-color:#d8e8ff;
cursor:pointer;

#calcu-head
text-align:left;
padding:10px 15px 5px;

span.imyeah
float:right;
color:#ccc;

span.imyeah a
color:#ccc;

.screen
width:200px;
height:24px;
line-height:24px;
padding:4px;
border:#e6e6e6 1px solid;
border-bottom:#f2f2f2 1px solid;
border-right:#f2f2f2 1px solid;
margin:10px auto;
direction:ltr;
text-align:right;
font-size:16px;
color:#999;

#calcu-foot
text-align:left;
padding:10px 15px 5px;
height:auto;
overflow:hidden;

span#note
float:left;
width:210px;
height:auto;
overflow:hidden;
color:red;

span.welcome
clear:both;
color:#999;

span.welcome a
float:right;
color:#999;

</style>
<script language="javascript">
//此处插入上面的js代码
</script>
</head>
<body>
<div id="calculator">
<div id="calcu-head"><span class="imyeah">© <a href="http://www.cnblogs.com/imyeah/" target="_blank">I'm Yeah!</a></span><h6>简单的计算器</h6></div>
<form name="calculator" action="" method="get">
<div id="calcu-screen">
<!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入-->
<input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" />
</div>
<div id="calcu-btn">
<ul> <!--配置按钮-->
<li onclick="command(7)">7</li>
<li onclick="command(8)">8</li>
<li onclick="command(9)">9</li>
<li class="tool" onclick="del()">←</li>
<li class="tool" onclick="clearscreen()">C</li>
<li onclick="command(4)">4</li>
<li onclick="command(5)">5</li>
<li onclick="command(6)">6</li>
<li class="tool" onclick="times()">×</li>
<li class="tool" onclick="divide()">÷</li>
<li onclick="command(1)">1</li>
<li onclick="command(2)">2</li>
<li onclick="command(3)">3</li>
<li class="tool" onclick="plus()">+</li>
<li class="tool" onclick="minus()">-</li>
<li onclick="command(0)">0</li>
<li onclick="dzero()">00</li>
<li onclick="dot()">.</li>
<li class="tool" onclick="persent()">%</li>
<li class="tool" onclick="equal()">=</li>
</ul>
</div>
<div id="calcu-foot">
<span id="note"></span>
<span class="welcome">欢迎使用javascript计算器！<a href="http://www.cnblogs.com/imyeah" target="_blank">反馈</a></span>
</div>
</form>
</div>
</body>
</html>

anime.js 简单入门教程

anime.js是一个强大的用来制作动画的javascript库，虽然功能没有GASP（greensock）强大，但胜在它足够轻便，gzip压缩完只有9kb左右，麻雀虽小，却五脏俱全。

下面就来看看如何使用anime.js来编写动画效果。

先在github下载好anime.js，然后在页面引入它。

弹球效果

引入anime.js后，就可以开始来编写动画效果。

首先来编写一个弹球的动画效果，先来使用anime.js提供的方法来编写好基本的结构：

var bouncingBall = anime({

  //code here

});

然后在里面使用anime.js提供的对应的方法来实现动画效果，比如要操纵的dom元素，动画的时间以及缓动曲线等等。

var bouncingBall = anime({
  targets: ‘.ball‘,
  translateY: ‘50vh‘,
  duration: 300,
  loop: true,
  direction: ‘alternate‘,
  easing: ‘easeInCubic‘
});

下面来一一解释下各个属性的含义。

targets属性是用来指定要运动的元素，可以使用类似CSS选择器来选择元素，或者是下面几种方法来选择元素：

DOM选择方法document.querySelector(‘.ball‘)或者是document.querySelectorAll(‘.ball‘)方法;

js数组的方式[‘.ball‘]

js对象的方式{elementName: ‘ball‘}

如果你要操作的元素有多个值或者是要操作多个元素，可以这样做：

var bouncingBall = anime({
  targets: [‘.ball‘, ‘.kick‘],
  //rest of the code
});

在上面代码中，第二个属性是translateY，也就是要操作元素做出变化的属性，和CSS中操作元素的方法非常相似。作为一个经常和动画打交道的前端开发人员，对于使用transform属性来提高动画的性能想必是非常清楚的，同样在使用animejs来编写动画效果的时候，特别涉及操作元素位置的时候也建议使用transform等属性来操作来提高动画性能。

第三个属性是duration，即动画的运行时间。如果要延迟执行动画，可以使用delay这个参数来指定动画延迟时间。

loop属性是用来定义动画是否循环运行。默认值是false，即动画只运行一次。当然也可以指定具体的数字来定义动画运行的次数或者是定义为true一只无限循环运行下次。

direction属性定义是否应该轮流反向播放动画。有三个值default、alternate和reverse。alternate表示动画应该轮流反向播放。reverse表示反方向运行。

最后一个属性是easing，它是用来定义动画运行速度曲线的，与CSS3中的动画曲线一样。

可以使用下面的方法来看看anime中有哪些速度曲线：

console.log(anime.easings);

现在再来完善下弹球的动画效果。

在上面的代码中，实现的效果只是球的上下弹起的效果。在真实世界中，当一个球掉在地上的时候，球会受到自身的压力从而产生一个变形的效果，可以使用transform中的scaleX来达到这个动画效果。

下面是具体代码：

var bouncingBall = anime({
  targets: ‘.ball‘,
  translateY: ‘50vh‘,
  duration: 300,
  loop: true,
  direction: ‘alternate‘,
  easing: ‘easeInCubic‘,
  //new code
  scaleX: {
    value: 1.05,  //代表缩放的值
    duration: 150,  // 运行时间
    delay: 268   //延迟多久执行
  }
});

技术图片

可以去这里看看最终运行的效果。

demo

使用开发者工具查看可以看到实际的动画效果就是通过改变元素的CSS属性来实现的。

技术图片

同时操作两个元素来编写动画效果

下面通过一个踢球的动画效果，来看看anime.js是如何来操作两个元素来实现动画效果的。

var kickBall = anime({
  targets: ‘.kick‘,
  scale: 1.2,
  duration: 300,
  easing: ‘easeInCubic‘,
  complete: function() {
    anime({
      targets: ‘.ball‘,
      translateX: ‘70vw‘,
      scale: 1.5,
      easing: ‘easeOutBounce‘,
      delay: 150
    });
  }
});

技术图片

可以看到当踢完球的动作后，球才动起来。这里用的是complete这个回调方法，当上一个动画完成后再执行下一个动画。

当然像这样动画效果使用CSS实现起来也是非常简单的，CSS版本

动画控制

anime.js还提供了诸如play、pause和restart方法来控制动画的执行、暂停和重新运行动画。也可以使用seek()方法来跳帧运行动画。

下面通过按钮分别来控制踢球和球运动的动画效果。

//Animating the kick
var kickBall = anime({
  targets: ‘.kick‘,
  scale: 1.2,
  duration: 300,
  delay: 100,
  easing: ‘easeInCubic‘,
  autoplay: false
});

//Animating the ball
var movingBall = anime({
  targets: ‘.ball‘,
  translateX: ‘70vw‘,
  scale: 1.5,
  easing: ‘easeOutBounce‘,
  delay: kickBall.duration + 100,
  autoplay: false
});

/* Playing the animation 
when clicking the play button */
btnPlay.addEventListener(‘click‘, function(e) {
  e.preventDefault();
  kickBall.play();
  movingBall.play();
});

技术图片

这里有两点需要注意的是：

为来在页面加载完的时候，不运行动画，需要设置autoplay的值为false；

只需要把对应的动画方法和play()绑定就可以用按钮来控制动画的运行和暂停了。

demo

使用anime.js来操作SVG

最后来看看使用anime.js来操作SVG。

在开始之前，把每一个SVG中的path元素都赋予一个CSS类，这样方便使用animejs来操作。

比如，要实现一个眼睛的动画效果：

var movingEyes = anime({
  targets: [‘.inner-left-eye‘, ‘.inner-right-eye‘],
  cy: 400,
  duration: 500,
  delay: function(el, index) {
    var singleDelay = index === 0 ? 300 : index * 500;
    return singleDelay;
  },
  autoplay: false
});

上面的代码通过来改变circle元素cy属性的值来使猫的眼睛动起来。

在上面的代码中的delay这个属性，是使用一个函数来返回值的，这样可以更灵活的控制动画的延迟时间。通过元素的索引值来返回不同的延迟的时间。如果元素的索引值是0即左边的眼睛的延迟时间是300毫秒，如果是2即右边的眼睛延迟500毫秒来运行动画。

技术图片

上面通过两个简单的实例介绍了anime.js的一个使用方法，更多的使用方法就要靠你的想象力了。

更多的实例可以去这个集合看看。

在Codrops上也有好多精彩的实例：

Codrops.net demo: Inspiration for Letter Effects

Codrops.net Demo: Background Segment Effect

Codrops.net Demo: Fancy SVG Letter Animation

Codrops.net Demo: Multi-Layout Slideshow

Codrops.net Demo: Item Reveal Animations with SVG

本文主要是结合Animating the DOM with Anime.js这篇文章写成，有疏漏或者理解不到位的地方，还请多多指教！

原文地址：https://juejin.im/entry/58e9e48d61ff4b006b513f51

以上是关于如何使用JS编写一个简单的计算器的主要内容，如果未能解决你的问题，请参考以下文章

如何使用Java对象语言编写一个加减乘除计算器要有代码

怎么用java编写echarts代码

c语言如何创建一个按钮？做计算器用

anime.js 简单入门教程

如何编写一个 HTTP 反向代理服务器

vue如何管理下载状态