点击添加或减少数量，总价随之改变（keyup的用法）

最新推荐文章于 2021-10-11 16:03:31 发布
最新推荐文章于 2021-10-11 16:03:31 发布
阅读量311 收藏
点赞数
文章标签： c# python 数据库
原文链接：http://www.cnblogs.com/studyh5/p/7799127.html
版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击添加或减少数量，总价随之改变（keyup的用法）</title>
<link rel="stylesheet" href="style.css">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<style>
/*增添人数*/
html{font-size:100px;}
.font20{font-size:0.2rem;}
.numhuman {width:4.1rem;margin:0 auto;overflow:hidden;}
.numhuman img{width:0.91rem;float:left;}
.shownum{width:1.7rem;height:0.71rem;background:#ffb900;float:left;margin:0 0.06rem;}
.shownum span,#goods_num{text-align:center;color:#333;font-size:0.4rem;display:block;height:0.71rem;line-height:0.71rem}
</style>
</head>
<body>
<br>
<div class="numhuman">
<img id="reducebtn" src="images/reduce.png" alt="">
<div class="shownum">
<input id="goods_num" style="width:70%;float:left;" type="text" value="1">
<span style="width:28%;float:right;font-size:0.32rem;">人</span>
</div>
<img id="addbtn" src="images/add.png" alt="">
</div>
<span class="font20">单价：</span><span id="single_price" style="color:#333;font-size:0.28rem;">10</span><span class="font20">元</span>
<span class="font20">总价：</span><span id="total_price" style="color:#333;font-size:0.28rem;"></span><span class="font20">元</span>
<script src="jquery.min.js"></script>
<script>
var goods_num=$('#goods_num').val();
console.log(goods_num);
var single_price=$('#single_price').html();
$('#total_price').html(goods_num*single_price);
// 添加购买人数开始
// 单价
var single_price = $('#single_price').html();

// 减人数 按钮
$('#reducebtn').click(function(){
var goods_num = $('#goods_num').val();
if(goods_num <= 0){
goods_num = 0;
}else{
goods_num--
}
$('#goods_num').val(goods_num);
$('#total_price').html(goods_num*single_price);
})
// 添加人数按钮
$('#addbtn').click(function(){
var goods_num = $('#goods_num').val();
goods_num++;
$('#goods_num').val(goods_num);
$('#total_price').html(goods_num*single_price)
})

$('#goods_num').keyup(function(){
var goods_num = $('#goods_num').val().replace(/[^\d]+/,'');
$('#goods_num').val(goods_num);
$('#total_price').html(goods_num*single_price)
})

</script>
</body>
</html>

转载于:https://www.cnblogs.com/studyh5/p/7799127.html

weixin_34220179
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 实现商品添加减少,jq实现点击增加或者减少商品数量并且自动计算总价格...
weixin_33719097的博客
06-15 1470
本文将为点击增加或者减少商品数量并且自动计算总价格相关教程，具体实例代码请看下文:点击增加或者减少商品数量并且自动计算总价格:本章节介绍一下如何实现点击按钮来添加或者删除商品的数量，并且能够自动计算商品的总价格。代码实例如下:织梦者span{color:red;cursor:pointer;}$(function(){$("#quantity").keyup(function(){if(isNaN...
饿了么商品购买按钮，刚开始点击的时候按钮展开，点击“+”增加数量，点击“-”减少数量，当数量变为0的时候按钮收拢为一个普通的按钮
11-08
饿了么商品购买按钮，刚开始点击的时候按钮展开，点击“+”增加数量，点击“-”减少数量，当数量变为0的时候按钮收拢为一个普通的按钮 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
php购物增加减少,JavaScript_JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)，购物车点击可以减少或者添加 - phpStudy...
weixin_36196164的博客
03-12 135
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)购物车点击可以减少或者添加商品并自动计算价格:购物车中可能有这样的功能，那就是点击按钮可以实现商品数量的减少或者增加，并且能够实时的计算出总的商品价格，下面就通过代码实例介绍一下如何实现此功能，当然下面的这个模拟实现的购物车难登大雅之堂，但是可以从中得到一些启发或者相关的知识点，代码如下:phpstudy$(function(){$...
类似于购物车，点击按钮，购物数量的增加或者减少
S852509769的博客
09-28 3885
类似于这样的效果， 该如何实现：下面将给出具体的代码 两边是button按钮，中间是span标签。（1）设置button的单击事件可以使用onclick直接在button上绑定，（2）也可以使用在js代码中绑定按钮的单击事件，使用click方法。这是两种不同的方法，但是效果一样的。 注意：获取span上的数字，并可以对数字进行加减操作使用parseInt($('quantity'
jquery实现点击数量增加总价跟着增加且数量有上限下限
qq_43560721的博客
12-29 1659
效果图： 整体代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>count</title> <style> .show{ ...
vue element-ui 绑定@keyup事件无效的解决方法
08-27
在Vue.js和Element-UI框架的开发过程中，有时会遇到绑定`@keyup`事件失效的情况。这通常是由于Element-UI组件内部已经处理了键盘事件，导致外部定义的事件监听器无法正常工作。针对这个问题，我们可以采取一些策略来...
vue实现给div绑定keyup的enter事件
10-15
这里，我们使用了Vue的事件修饰符`.enter`，它告诉Vue我们希望在`keyup`事件中监听回车键。当用户在`div`内按下回车键时，`handleEnter`方法将会被调用。 然后，在组件的`created`生命周期钩子中，我们可以添加全局...
pygame游戏之旅 添加键盘按键的方法
01-21
本文为大家分享了pygame游戏之旅的第4篇，供大家参考，具体内容如下 按键类型用event.type表示，按键用event.key表示 KEYDOWN和KEYUP的参数描述如下： key – 按下或者放开的键值，是一个数字，估计地球上很少有人...
Python实现windows下模拟按键和鼠标点击的方法
09-22
在Python编程环境中，模拟按键和鼠标点击是自动化测试、脚本编写或游戏自动化等领域非常有用的功能。在Windows操作系统上，可以使用几个不同的库来实现这一目标。本篇将详细介绍如何利用Python来模拟按键和鼠标点击...
AngularJS基础 ng-keyup 指令简单示例
10-21
`ng-keyup` 指令的基本用法是在HTML元素上添加此属性，并在其后跟一个AngularJS表达式。当用户在该元素上按下并释放一个键时，这个表达式会被评估并执行。在提供的实例中，我们可以看到如何使用`ng-keyup`来跟踪...
js——input框实现淘宝一样的点击后商品数量的增加和减少
u014796999的博客
10-23 1万+
//商品数量的增加                 function number(){                 var Input0=document.getElementById('input0');                 var Input1=document.getElementById('input1');                 var Input2=
HTML 购物车计算总价+添加或者减少商品数量
遗声落西秦
12-12 1万+
var app=angular.module("myapp",[]); app.controller("demoC",["$scope",function($scope) { $scope.ShoppingCar=[{Title:"红苹果",Count:1,UnitPrice:2.5},{Title:"绿苹果",Count:1,UnitPrice:2}]; //定义函数
js 购物车数量增减，总价格联动变化
热门推荐
tangtang5963的博客
04-29 3万+
前端JS实现购物车功能，点击商品加减按钮商品数量加减，点击单选按钮和全选按钮颜色变化，总价联动变化。项目中应用的都是bootstrap的样式，css就不一一贴出来了。 加函数，减函数，手动修改数量判断库存函数，总价格计算函数，单选事件，全选事件，一共分为6个事件 原味手剥大瓜子
Vue——案例：对表格按钮进行加减、删除以及计算总价
NanChen的博客
10-11 1949
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
MyBatis之增加删除修改
liaoxiaohua1981的专栏
10-11 1万+
insert、update、delete这三个元素分别用于执行SQL中的insert、update、delete。 三个元素配置基本相同 配置细节如下：   属性 描述 取值 默认 id 在这个模式下唯一的标识符，可被其它语句引用
C#邦定某个数值变化，输出事件
weixin_41220128的博客
06-19 2560
本文将方法写进属性，利用属性注册了事件，对方法进行调用达到邦定。直接创建控制台程序，代码如下using System;using System.Threading;namespace 事件测试2{ //当前测试是把某个数据的变化邦定某个事件 delegate void NUM(); class Program { static void Main(strin...
将下面这个list渲染成表格，在下面显示总价， 总价可以使用reduce计算
止水Itachi
04-13 215
<script> var list = [ { "title": "笔", "price": 2, "num": 2 }, { "title": "本", "price": 1, "num": 3 }, { ...
vue3 element plus el-button @keyup.enter.native 点击回车无效
最新发布
09-01
在Vue3中使用Element Plus组件库的el-button组件时，如果希望在键盘按下回车键时触发点击事件，可以使用@keyup.enter.native修饰符。然而，如果点击回车键后没有触发点击事件，可能有以下几个原因： 1. 事件绑定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值