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


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 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
javascript常用的正则表达式实例
May 15 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
javascript定时器完整实例
Feb 10 Javascript
javascript this详细介绍
Sep 19 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 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 simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
Symfony核心类概述
2016/03/17 PHP
jquery validate poshytip 自定义样式
2012/11/26 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python取代netcat过程分析
2018/02/10 Python
Windows下安装Scrapy
2018/10/17 Python
Python assert语句的简单使用示例
2019/07/28 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
会计实习期自我鉴定
2013/10/06 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python