前端开发之便利店收银系统代码


Posted in Javascript onDecember 27, 2019

1+X前端初级JQ

社区便利店收银系统代码

前端开发之便利店收银系统代码

<body>
 <input type="text" id="t" value="" disabled="disabled" />
 <form id="main" action="" method="">
 <span>4.5</span>
 <input type="button" onclick="addClick(4.5)" value="+" /><br>
 <span>15</span>
 <input type="button" onclick="addClick(15)" value="+" /><br>
 <span>5</span>
 <input type="button" onclick="addClick(5)" value="+" /><br>
 </form>
 <input type="button" name="" id="JZ" value="结账" onclick="sub()" />
 <input type="button" name="" id="wanc" value="交易完成" onclick="reload()" />
 </body>
addClick = (price) => {  
 let result = $('#t').val(); //从表单里面获取value值
 if (result == "") {  //如果为空
 $('#t').val(price); //把值输入到#t(显示框)
 } else {
 $('#t').val(result + "+" + price); //不为空就在value后面加一个+链接price
 }
 }
 sub = () => {
 let result = $('#t').val();
 // let a = [];
 let sum = 0;
 if (result != "") {
 var count = result.split('+'); //count是以一个以+号切割的数组对象
 for (let i = 0; i < count.length; i++) {
  sum += parseFloat(count[i]); //取出来,取值
 }
 $('#t').val("总金额:" + sum);
 disableBtn();
 transparency();
 }
 }
 
 disableBtn = () => {
 $('#JZ').attr('disabled', 'disabled');
 }
 
 transparency = () => {
 $("#main").css("transition","all 1s");
 $("#main").css("opacity","0.3");
 }
 
 reload=()=>{
 location.reload();
 }

总结

以上所述是小编给大家介绍的前端开发之便利店收银系统代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
javascript Math.random()随机数函数
Nov 04 Javascript
Seajs的学习笔记
Mar 04 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 #Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 #Javascript
React中使用UMEditor的方法示例
Dec 27 #Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 #Javascript
JavaScript中变量提升机制示例详解
Dec 27 #Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 #Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 #Javascript
You might like
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
php格式化金额函数分享
2015/02/02 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
浅谈关于iview表单验证的问题
2018/09/29 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
父亲追悼会答谢词
2014/01/17 职场文书
《草原》教学反思
2014/02/15 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
单位消防安全责任书
2014/07/23 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
雷锋的观后感
2015/06/10 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL