帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» JS计算器
JS计算器
浏览:791次
-
评论:0次
-
发布时间:2017-11-30
Html
Css
Js
我是实用的计算器
7
8
9
←
C
4
5
6
×
÷
1
2
3
+
-
0
00
.
%
=
body { background-color:gainsboro; } .fuselage { border-radius:20px; border:white solid 1.5px; width:400px; height:500px; background-color:#EAEAEA; margin:0 auto; } .nose { width:400px; height:50px; display:block; margin:20px 95px 0 95px; } .nose-topic { color:rgba(0,0,0,0.8); font-size:25px; } #cc { text-align:right; border-radius:10px; margin:0 5px; width:390px; height:60px; color:rgba(0,0,0,0.6); background-color:#F2F2F2; border:rgba(0,0,0,0.3) solid 2px; font-size:40px; } .key ul { background-color:white; border-radius:10px; padding:0; margin:5px 14px; border:#fff 2px solid; height:350px; overflow:hidden } .key li { border-radius:10px; list-style:none; float:left; width:46.5px; height:72px; margin:1px; padding:9px 0px 4px 25px; display:inline; font-size:38px; background-color:lightgray; } .key li:hover { color:white; border-radius:10px; list-style:none; float:left; width:46.5px; height:72px; margin:1px; padding:9px 0px 4px 25px; display:inline; font-size:38px; background-color:rgba(0,0,0,0.5); } .key li:active { color:white; border-radius:10px; list-style:none; float:left; width:46.5px; height:72px; margin:1px; padding:9px 0px 4px 25px; display:inline; font-size:38px; background-color:rgba(0,0,0,0.2); }
var num = 0, result = 0, numshow = "0"; var operate = 0; //判断输入状态的标志 var calcul = 0; //判断计算状态的标志 var quit = 0; //防止重复按键的标志 function run(num) { var c = document.getElementById("cc").value; c = (c != "0") ? ((operate == 0) ? c : "") : ""; c = c + num; document.getElementById("cc").value = c; operate = 0; //重置输入状态 quit = 0; //重置防止重复按键的标志 } function dzero() { var c = document.getElementById("cc").value; c = (c != "0") ? ((operate == 0) ? c + "00" : "0") : "0"; //如果当前值不是"0",且状态为0,则返回当str+"00",否则返回"0"; document.getElementById("cc").value = c; operate = 0; } function dot() { var c = document.getElementById("cc").value; c = (c != "0") ? ((operate == 0) ? c : "0") : "0"; //如果当前值不是"0",且状态为0,则返回当前值,否则返回"0"; for (i = 0; i <= c.length; i++) { //判断是否已经有一个点号 if (c.substr(i, 1) == ".") return false; //如果有则不再插入 } c = c + "."; document.getElementById("cc").value = c; operate = 0; } function del() { //退格 var c = document.getElementById("cc").value; c = (c != "0") ? c : ""; c = c.substring(0, c.length - 1); c = (c != "") ? c : "0"; document.getElementById("cc").value = c; } function clearscreen() { //清除数据 num = 0; result = 0; numshow = "0"; document.getElementById("cc").value = "0"; } function plus() { //加法 calculate(); //调用计算函数 operate = 1; //更改输入状态 calcul = 1; //更改计算状态为加 } function minus() { //减法 calculate(); operate = 1; calcul = 2; } function times() { //乘法 calculate(); operate = 1; calcul = 3; } function divide() { //除法 calculate(); operate = 1; calcul = 4; } function persent() { //求余 calculate(); operate = 1; calcul = 5; } function equal() { calculate(); //等于 operate = 1; num = 0; result = 0; numshow = "0"; } function calculate() { numshow = Number(document.getElementById("cc").value); if (num != 0 && quit != 1) { //判断前一个运算数是否为零以及防重复按键的状态 switch (calcul) { //判断要输入状态 case 1: result = num + numshow; break; //计算"+" case 2: result = num - numshow; break; //计算"-" case 3: result = num * numshow; break; case 4: if (numshow != "0") { result = num / numshow; } else { var xjx = '被除数不能为零!' document.getElementById("cc").value = xjx; setTimeout(clearnote, 4000) } break; case 5: result = num % numshow; break; } quit = 1; //避免重复按键 } else { result = numshow; } numshow = String(result); document.getElementById("cc").value = numshow; num = result; //存储当前值 } function clearnote() { //清空提示 document.getElementById("cc").value = ""; }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>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会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:简单实用的js计算器
jQuery宽高的理解和应用
给同class名元素添加样式
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
791
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值