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


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 相关文章推荐
JavaScript 原型链学习总结
Oct 29 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 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
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
php的socket编程详解
2016/11/20 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
python发送伪造的arp请求
2014/01/09 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
keras topN显示,自编写代码案例
2020/07/03 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
领导欢迎词范文
2015/01/26 职场文书
青岛导游词
2015/02/12 职场文书
管理失职检讨书范文
2015/05/05 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
妇产科护理心得体会
2016/01/22 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
k8s部署redis cluster集群的实现
2021/06/24 Redis