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


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版网站风格切换实例代码
Oct 06 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
快速入门Vue
Dec 19 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
javascript前端实现多视频上传
Dec 13 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
session 的生命周期是多长
2006/10/09 PHP
PHP 字符串操作入门教程
2006/12/06 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
JavaScript简介
2015/02/15 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
常见的python正则用法实例讲解
2016/06/21 Python
Python正则表达式经典入门教程
2017/05/22 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
python 调整图片亮度的示例
2020/12/03 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
优秀员工评语
2014/02/10 职场文书
HTML常用标签超详细整理
2022/03/19 HTML / CSS
MySQL 条件查询的常用操作
2022/04/28 MySQL