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


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 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP自定义错误用法示例
2016/09/28 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
python 实现多线程下载视频的代码
2019/11/15 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
Python装饰器用法与知识点小结
2020/03/09 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
军训自我鉴定100字
2014/02/13 职场文书
酒店管理求职信
2014/06/09 职场文书
英文产品推荐信
2015/03/27 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP