这是一款使用纯javascript制作的简单js计算器效果。在支持css3动画的浏览器中，该js计算器可以展示炫酷的文字动画效果。该js计算器仅实现简单的加减乘除四则运算。

使用方法

在页面中引入样式文件style.css和calculator.js文件。

<link rel="stylesheet" href="path/to/css/style.css">
<script src="path/tojs/calculator.js" type="text/javascript"></script>                  
                

HTML结构

js计算器的HTML结构如下：

<div id="calculator" class="calculator">
  <button id="clear" class="clear">C</button>
  <div id="viewer" class="viewer">0</div>
  
  <button class="num" data-num="7">7</button>
  <button class="num" data-num="8">8</button>
  <button class="num" data-num="9">9</button>
  <button data-ops="加上" class="ops">+</button>

  <button class="num" data-num="4">4</button>
  <button class="num" data-num="5">5</button>
  <button class="num" data-num="6">6</button>
  <button data-ops="减去" class="ops">-</button>

  <button class="num" data-num="1">1</button>
  <button class="num" data-num="2">2</button>
  <button class="num" data-num="3">3</button>
  <button data-ops="乘以" class="ops">*</button>

  <button class="num" data-num="0">0</button>
  <button class="num" data-num=".">.</button>
  <button id="equals" class="equals" data-result="">=</button>
  <button data-ops="除以" class="ops">/</button>
</div>

<button id="reset" class="reset">Reset Universe?</button>                  
                

js计算器的效果截图如下：

在线预览    源码下载