jQuery实现Web网页计算器插件代码
2015-09-18 12:20:09  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 8467
• 4

可能有些哥们会有这样的需求、在网页上能不能实现计算器的功能、答案是肯定的、今天分享一款带操作记录jQuery计算器、Demo是一款基于jquery css3实现的高级科学计算器代码、外观也非常好看、感兴趣的哥们可以下载看看、运行效果如下

Html代码

<div id="container">
<div id="the-calculator">
<div id="the-display">
  <form name="calculator">
    <span id="total">0</span>
  </form>
</div>
<div id="the-buttons">
  <div class="button-row clearfix">
    <button id="calc_clear" value="C/E" >C/E</button>
    <button id="calc_back" value="&larr;" >&larr;</button>
    <button id="calc_neg" value="-/ " >-/ </button>
    <button class="calc_op" value="/" >&divide;</button>
  </div>
  <div class="button-row clearfix">
    <button class="calc_int" value="7" >7</button>
    <button class="calc_int" value="8" >8</button>
    <button class="calc_int" value="9" >9</button>
    <button class="calc_op" value="*" >&times;</button>
  </div>
  <div class="button-row clearfix">
    <button class="calc_int" value="4" >4</button>
    <button class="calc_int" value="5" >5</button>
    <button class="calc_int" value="6" >6</button>
    <button class="calc_op" value="-" >-</button>
  </div>
  <div class="button-row clearfix">
    <button class="calc_int" value="1" >1</button>
    <button class="calc_int" value="2" >2</button>
    <button class="calc_int" value="3" >3</button>
    <button class="calc_op" value=" " > </button>
  </div>
  <div class="button-row clearfix">
    <button id="calc_zero" class="calc_int" value="0" >0</button>
    <button id="calc_decimal" value="." >.</button>
    <button id="calc_eval" value="=" >=</button>
  </div>
  <div id="extra-buttons" class="button-row">
    <button id="calc_denom" value="1/x" ><span class="denominator"><span class="denom-top">1</span><span class="denom-slash">/</span><span class="denom-btm">x</span></span></button>
    <button id="calc_sqrt" value="&radic;" >&radic;</button>
    <button id="calc_square" value="x2" >x<span class="exponent">2</span></button>
    <button id="calc_powerof" class="calc_op" value="^" >y<span class="exponent">x</span></button>
  </div>
</div>
</div>
<div id="the-results">
<ul id="results_list"><li id="result_default">Memory is Empty</li></ul>
<a id="result_clear" href="#">Wipe</a>
</div>
</div>

JS只要简单的引入就好

<script src=´js/jquery-1.8.3.min.js´></script>
<script src="js/index.js"></script>

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1dDx0mXV 密码: ypad

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛