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


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 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
详解如何较好的使用js
Dec 16 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
vue项目中axios使用详解
Feb 07 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
vuex存值与取值的实例
Nov 06 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 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
5.PHP的其他功能
2006/10/09 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
python实现简单温度转换的方法
2015/03/13 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
Django 路由控制的实现
2019/07/17 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
iPython pylab模式启动方式
2020/04/24 Python
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
广州某公司软件工程师面试题
2014/12/22 面试题
无故旷工检讨书
2014/01/26 职场文书
活动总结格式范文
2014/04/26 职场文书
2014年三万活动总结
2014/04/26 职场文书
投标服务承诺书
2014/05/28 职场文书
新农村建设典型材料
2014/05/31 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
发布会邀请函
2015/01/31 职场文书
市场部经理岗位职责
2015/02/02 职场文书
单位实习介绍信
2015/05/05 职场文书
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫