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

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

阅读量：6095 次

发布时间：2019-06-20

本文共 2126 字，大约阅读时间需要 7 分钟。

<!DOCTYPE html>

<head>

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

<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>

</div>

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

你可能感兴趣的文章

周鸿祎：如何成为一名优秀的产品经理？

查看>>

项目使用Entity Framework用到的公共操作方法基类(Repository)及其使用 (转载)

查看>>

《Python 学习手册4th》第十七章作用域

查看>>

Python爬虫学习==>第三章：Redis环境配置

查看>>

JS与AS通信-转

查看>>

JS中正则匹配开头不带空格，结尾也不带空格的字符串

初学WebGL引擎-BabylonJS：第1篇-基础构造

How to copy the contents of std::vector to c-style static array,safely?

查看>>

对thinkphp5.0框架的实例学习

查看>>

xml解析 DOM（JAXP Crimson解析器）

查看>>

code mistake

查看>>