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


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压缩工具:X2JSCompactor
Jun 13 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
JavaScript实现横版菜单栏
Mar 17 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 zend 相对路径问题
2009/01/12 PHP
深入php之规范编程命名小结
2013/05/15 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
详解python数据结构和算法
2019/04/18 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Django模板Templates使用方法详解
2019/07/19 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
python 操作hive pyhs2方式
2019/12/21 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
python 绘制场景热力图的示例
2020/09/23 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
大学毕业感言
2014/01/10 职场文书
完整版商业计划书
2014/09/15 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
单位更名证明
2015/06/18 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
swagger如何返回map字段注释
2021/07/03 Java/Android
Apache POI的基本使用详解
2021/11/07 Servers
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android