jQuery实现Web网页计算器插件代码
2015-09-18 12:20:09 By: shinyuu
可能有些哥们会有这样的需求、在网页上能不能实现计算器的功能、答案是肯定的、今天分享一款带操作记录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="←" >←</button> <button id="calc_neg" value="-/ " >-/ </button> <button class="calc_op" value="/" >÷</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="*" >×</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="√" >√</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的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛