UDN-企业互联网技术人气社区

板块导航

浏览  : 309
回复  : 3

[原生js] JavaScript 计算器改进版

[复制链接]
白青青的头像 楼主
发表于 2017-1-3 15:18:33 | 显示全部楼层 |阅读模式
  1. <html>

  2. <head>

  3. <style>

  4. .short{height:50px;width:55px;float:left;}

  5. </style>

  6. </head>

  7. <body>

  8. <script>

  9. var xianshi="";

  10. var shuzi="";

  11. var huanchun="";

  12. //如果连续输入数字,则累加其值

  13. function num(a){

  14. var pingmu=document.getElementById("pingmu");

  15. xianshi+=a;

  16. pingmu.value=xianshi;

  17. shuzi+=a

  18. }

  19. //如果缓存和数字为空,则第一个输入不能是符号

  20. function fum(b){

  21. if(shuzi==""&&huanchun=="")return;   

  22. huanchun+=shuzi+b;

  23. shuzi="";

  24. xianshi="";

  25. }

  26. //求出缓存值,并清空其他值

  27. function sum(){

  28. huanchun+=shuzi;

  29. var pingmu=document.getElementById("pingmu");

  30. huanchun=eval(huanchun);

  31. pingmu.value=huanchun;

  32. shuzi=""

  33. xianshi=""

  34. }

  35. //将屏幕上的值添加-号后,保存到缓存或者数字当中

  36. function sign(){

  37. var pingmu=document.getElementById("pingmu")

  38. var value=pingmu.value;

  39. value="(-("+value+"))"

  40. value=eval(value)

  41. pingmu.value=value;

  42. if(shuzi=="")huanchun=value;

  43. else{shuzi=value;}

  44. }

  45. function reciprocal(){

  46. var pingmu=document.getElementById("pingmu")

  47. var value=pingmu.value;

  48. value="1/"+value

  49. value=eval(value);

  50. pingmu.value=value;

  51. if(shuzi=="")huanchun=value;

  52. else{shuzi=value;}

  53. }

  54. function nsqrt(){

  55. var pingmu=document.getElementById("pingmu")

  56. var value=pingmu.value;

  57. value=eval(value);

  58. value=Math.sqrt(value);

  59. pingmu.value=value;

  60. if(shuzi=="")huanchun=value;

  61. else{shuzi=value;}

  62. }

  63. //可以省去初始化

  64. function spot(){

  65. var pingmu=document.getElementById("pingmu");

  66. if(shuzi==""||xianshi==""){shuzi="0";xianshi="0"}

  67. shuzi+=".";

  68. xianshi+=".";

  69. pingmu.value=xianshi;

  70. }

  71. function ten(){

  72. var total=0,pows=0

  73. var pingmu=document.getElementById("pingmu");

  74. var value=pingmu.value;

  75. var arr=value.split("");

  76. arr=arr.reverse();

  77. for(i=0;i<arr.length;i++){

  78. arr[i]-=0;

  79. pows=Math.pow(2,i);

  80. total+=arr[i]*pows;

  81. }

  82. pingmu.value=total;

  83. jisuan="";xianshi="";

  84. }

  85. function two(){

  86. var pingmu=document.getElementById("pingmu");

  87. var value=pingmu.value;

  88. value-=0;

  89. var arr=new Array();

  90. for(i=0;1;i++){

  91. if(value==0)break;

  92. arr[i]=value%2;

  93. value/=2;

  94. value=parseInt(value);

  95. }

  96. arr=arr.reverse();

  97. str=arr.join("");

  98. pingmu.value=str;

  99. xianshi="";jisuan="";

  100. }

  101. function cee(){

  102. shuzi="";

  103. xianshi="";

  104. document.getElementById('pingmu').value="";

  105. }

  106. function ccc(){

  107. shuzi="";

  108. huanchun="";

  109. xianshi="";

  110. document.getElementById('pingmu').value="";

  111. }

  112. function cbb(){

  113. shuzi=shuzi.substring(0,shuzi.length-1)

  114. xianshi=xianshi.substring(0,xianshi.length-1);

  115. pingmu.value=xianshi;

  116. }

  117. </script>

  118. <input id="pingmu" style="height: 36px; width: 282px; text-align: right;" type="text" /><br /><br />

  119. <button class="short" onclick="cbb()" value="c">&larr;</button>

  120. <button class="short" onclick="cee()" value="c">CE</button>

  121. <button class="short" onclick="ccc()" value="c">C</button>

  122. <button class="short" onclick="ten()" value="x">dec</button>

  123. <button class="short" onclick="two()" value="x">bin</button><br /><br /><br />

  124. <button class="short" onclick="num(this.value)" value="7">7</button>

  125. <button class="short" onclick="num(this.value)" value="8">8</button>

  126. <button class="short" onclick="num(this.value)" value="9">9</button>

  127. <button class="short" onclick="fum(this.value)" value="*">*</button>

  128. <button class="short" onclick="fum(this.value)" value="/">/</button><br /><br /><br />

  129. <button class="short" onclick="num(this.value)" value="4">4</button>

  130. <button class="short" onclick="num(this.value)" value="5">5</button>

  131. <button class="short" onclick="num(this.value)" value="6">6</button>

  132. <button class="short" onclick="fum(this.value)" value="-">-</button>

  133. <button class="short" onclick="fum(this.value)" value="%">%</button><br /><br /><br />

  134. <button class="short" onclick="num(this.value)" value="1">1</button>

  135. <button class="short" onclick="num(this.value)" value="2">2</button>

  136. <button class="short" onclick="num(this.value)" value="3">3</button>

  137. <button class="short" onclick="fum(this.value)" value="+">+</button>

  138. <button class="short" onclick="sum()" value="=">=</button>

  139. <br /><br /><br />

  140. <button class="short" onclick="num(this.value)" value="0">0</button>

  141. <button class="short" onclick="sign()" value="+/-">+/-</button>

  142. <button class="short" onclick="spot()" value=".">.</button>

  143. <button class="short" onclick="reciprocal()" value="1/x">1/x</button>

  144. <button class="short" onclick="nsqrt()" value="sqrt">sqrt</button><br /><br /><br /></p>

  145. </script>

  146. </body>
复制代码

相关帖子

发表于 2017-1-3 15:19:03 | 显示全部楼层
鄙视楼下的顶帖没我快,哈哈
使用道具 举报

回复

发表于 2017-1-3 15:19:04 | 显示全部楼层
jq现在应该算是最火的js框架类了吧?确实很强大extjs基于Yahoo UI的扩展,界面布局和效果方面很给力,但就是有点复杂
使用道具 举报

回复

发表于 2017-1-3 15:19:04 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部