帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 一款在线web网页版计算器JS代码程序源码
一款在线web网页版计算器JS代码程序源码
浏览:1241次
-
评论:2次
-
发布时间:2019-09-05
Html
Css
Js
SUM:
1
2
3
<-
C
4
5
6
*
/
7
8
9
+
-
0
00
.
%
=
#box { width: 295px; margin: 0 auto; text-align: justify; border: 1px solid #ddd; padding: 15px; } .d_num { display: inline-block; margin: 10px; width: 33px; height: 30px; border: 1px solid #ddd; text-align: center; line-height: 30px; cursor: pointer; } .sum { margin: 0 10px 10px; line-height: 30px; font-size: 20px; } #sum { width: 205px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px; } #process { width: 255px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px; }
var $box = document.getElementById('box'); var $sum = document.getElementById('sum'); var $process = document.getElementById('process'); var sum = 0, process = '', num1 = '', num2 = '', temp = '', statu = false; $box.onclick = function(e){ var event = window.event || e; var ele = event.srcElement || event.target; var _className = ele.className; if(_className == 'd_num'){ var num = ele.getAttribute('data-num');//点击的按钮对应的值 var NotNum = isNaN(num); if(!NotNum || num == '.'){ //点击了数字 if(!statu){ //还没点击过符号 if(num1 == '0'){ num1 = ''; } num1 += num; process = num1; }else{ //已经点击过符号 if(num2 == '0'){ num2 = ''; } num2 += num; process = num1 + temp + num2; } $process.value = process; } else{ //点击了符号 if(num1 == ''){//非法操作 return false; } if(num == 'C'){//归零 num1 = ''; num2 = ''; process = ''; temp = ''; sum = ''; $process.value = '0'; $sum.value = '0'; statu = false; return false; } if(num == '<-'){//退档 if(sum != ''){ return false; } if(num2 == ''){ ; num1 = num1.substring(0,num1.length-1); if(num1 == ''){ num1 = '0'; } process = num1; $process.value = process; }else{ num2 = num2.substring(0,num2.length-1); if(num2 == ''){ num2 = '0'; } process = num1 + temp + num2; $process.value = process; } return false; } if(num2 != ''){//a&b if(num == '='){//元操作到此结束 $process.value = process; }else{ $process.value = process + num; } switch(temp){//元操作继续 case '+' : sum = parseFloat(num1) + parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break; case '-' : sum = parseFloat(num1) - parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break; case '*' : sum = parseFloat(num1) * parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break; case '/' : sum = parseFloat(num1) / parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break; case '%' : sum = parseFloat(num1) % parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break; } }else{//a&? if(num == '='){ return false; } $process.value = process + num; process = ''; } if(num == '='){ sum = ''; statu = false; return false; } temp = num;//记录操作符 statu = true;//已经触发操作状态 } } };
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>一款在线web网页版计算器JS代码程序源码-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:一款在线web网页版计算器JS代码程序源码 电子计算器的网页在线版特效代码,功能和电子计算器一模一样,各种功能。
电子计算器的网页在线版特效代码,功能和电子计算器一模一样,各种功能。
jQuery实现拖拽进度条并显示百分比的特效代码
通过CSS实现的圆角鼠标切换的折叠菜单特效代码
讨论这个常用代码(2)
回答他人问题或分享心得会奖励牛币
Lv7 码师
qq***43
2019年11月21日
这个挺不错的,学习一下。
回复
Lv7 码师
qq***43
2019年12月11日
厉害的计算器,学学了
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1241
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值