点击添加或减少数量,总价随之改变(keyup的用法)

<!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" >
<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" >
</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>

时间: 2024-11-05 20:36:13

点击添加或减少数量,总价随之改变(keyup的用法)的相关文章

点击增加或者减少商品数量并且自动计算总价格

点击增加或者减少商品数量并且自动计算总价格:本章节介绍一下如何实现点击按钮来添加或者删除商品的数量,并且能够自动计算商品的总价格.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

magento购物车添加减少数量 实时更新购物车

magento实时更新购物车商品数量 <td> <button onclick="addQtyone();" type="submit">+</button> <input id="qtyPro" name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->ge

表格添加 点击添加增加一列

改代码来源于广西省平台的uums项目中的jsp/addOrUpdate.jsp界面(使用easyui 前后端未进行分离) //在表格中,点击添加的时候,自动增加一行<table style="width:98%" id="tab" class="table table-bordered table-condensed table-striped table-hover table-responsive"> <tbody>

添加数据源,管理工具--数据源(ODBC),点击添加不显示该驱动

win7系统下或者64位系统下,安装完mysql-connector-odbc驱动后,直接进入:管理工具--数据源(ODBC),点击添加不显示该ODBC驱动 问题解决如下: C:\Users\Administrator>cd\windows\SysWOW64 C:\windows\SysWOW64>odbcad32 回车弹出 ODBC数据源管理器,在此窗口下进行添加操作即可看到:MySQL ODBC 5.1 Driver,点击完成,进行后续操作,完成添加操作,图示如下:

angular的点击添加

首先是在js里面我们可以用clone来点击添加一些东西比如列表或者其他的div之类的,但是在angular里面怎么实现点击添加呢? 类似这种: 这样就尴尬了,最少我这样的菜鸟是不知道怎么去写的,网上好像也没有! 后来一个老司机,哦不,大牛告诉我用ng-repeat可以实现 大概的代码是酱紫的: h5: <!--其他发明人--> <div> <!--添加发明人--> <div class="ova mb30 ml15p"> <span

点击添加按钮添加一条记录,点击删除按钮删除本条记录

点击添加按钮添加一条记录,点击删除按钮删除本条记录,并且最多只能添加4条记录 <div class="addfee"> <div><span class="add-btn">添加</div> </div> jquery //添加删除费用,最多可添加4条 $(".add-btn").on("click", function() { var len = $(".

jquery点击添加样式,再点击取出样式

<!doctype html> <html> <head> <meta charset="utf-8"> <title>点击添加边框,再点击去掉边框</title> <style> ul li{ float:left; list-style:none; width:50px; height:30px; border:1px solid #E3E3E3; line-height:30px; text-al

微信小程序实现给循环列表点击添加类(单项和多项)

在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思路:给点击的view增加类,依靠点击的index对state进行赋值.如果相同时,给该view增加类. 实现代码: .wxml文件 1 <view> 2 <view class='appointent-date'> 3 <view class="appointent-d

解决Python3.6.5+Django2.0集成xadmin后台点击添加或者内容详情报 list index out of range 的错误

一 问题说明在创建Model的时候,如果存在类型是DateTimeField的字段,则在xadmin后端管理界面里,对该Model进行添加操作的时候,会报list index out of range. 这是上篇文章创建的Model: class IDC(models.Model): name = models.CharField(max_length=64) contact = models.CharField(max_length=32) phone = models.CharField(m