脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 便利店收银系统

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

 更新时间：2019年12月27日 10:34:31   作者：龙须饼是怎么做的  
这篇文章主要介绍了社区便利店收银系统代码,使用前端初级开发者，代码很简单需要的朋友可以参考下

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();
 }

总结

以上所述是小编给大家介绍的前端开发之便利店收银系统代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • OpenLayer实现自定义坐标点的绘制

    OpenLayer实现自定义坐标点的绘制

    OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。本文将利用OpenLayer实现自定义坐标点的绘制，感兴趣的可以了解一下
    2022-04-04
  • javascript中递归的两种写法

    javascript中递归的两种写法

    本文主要分享了javascript中递归的两种写法，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • js捕获鼠标滚轮事件代码

    js捕获鼠标滚轮事件代码

    本文为大家介绍下如何使用js捕获鼠标滚轮事件，原理很简单，感兴趣的朋友可以参考下
    2013-12-12
  • Javascript摸拟自由落体与上抛运动原理与实现方法详解

    Javascript摸拟自由落体与上抛运动原理与实现方法详解

    这篇文章主要介绍了Javascript摸拟自由落体与上抛运动,结合实例形式分析了Javascript摸拟自由落体与上抛运动相关原理、实现技巧与操作注意事项,需要的朋友可以参考下
    2020-04-04
  • JS实现淡蓝色简洁竖向Tab点击切换效果

    JS实现淡蓝色简洁竖向Tab点击切换效果

    这篇文章主要介绍了JS实现淡蓝色简洁竖向Tab点击切换效果,通过JavaScript相应鼠标事件实现非常简单的css样式切换,简单实用,需要的朋友可以参考下
    2015-10-10
  • 微信小程序实现全局状态管理的方法整理

    微信小程序实现全局状态管理的方法整理

    已知微信小程序中如果要做到全局状态共享，常用的有四种方式，分别是globalData、本地缓存、mobx-miniprogram和westore，本文将带大家看看mobx-miniprogram是如何实现的小程序的全局状态管理，需要的可以收藏一下
    2023-06-06
  • js中confirm实现执行操作前弹出确认框的方法

    js中confirm实现执行操作前弹出确认框的方法

    这篇文章主要介绍了js中confirm实现执行操作前弹出确认框的方法,是执行删除等操作时常用的功能,非常具有实用价值,需要的朋友可以参考下
    2014-11-11
  • 浅谈JavaScript暂时性死区与垃圾回收机制

    浅谈JavaScript暂时性死区与垃圾回收机制

    本文主要介绍了浅谈JavaScript暂时性死区与垃圾回收机制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • Three.js实现3D乒乓球小游戏(物理效果)

    Three.js实现3D乒乓球小游戏(物理效果)

    本文将使用React Three Fiber 和 Cannon.js 来实现一个具有物理特性的乒乓球小游戏，使用 React Three Fiber 搭建基础三维场景、如何使用新技术栈给场景中对象的添加物理特性等，最后利用上述知识点，将开发一个简单的乒乓球小游戏,需要的朋友可以参考下
    2023-03-03
  • 微信小程序实现tab组件切换动画

    微信小程序实现tab组件切换动画

    tab相对而言用的还是比较多的,但是用起来并没有难,下面这篇文章主要给大家介绍了关于微信小程序全局配置之tab的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10

最新评论