<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义套餐计算</title>
<style>
#body{background: #F4F4F4;}li{list-style: none;width:150px;height: 90px;background: palegoldenrod;display:inline-block}
</style>
</head>
<body>
<div id="body">
<ul>
</ul>
<input type="text">
<br>
总money:
<div id="num"></div>
总money组成部分:
<div id="name"></div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
var data={
"data": [
{
"money": "0.06",
"onemoney": "0.06",
"num": 1,
"name": "单个"
},
{
"money": "25",
"onemoney": "0.05",
"num": 500,
"name": "Q1"
},
{
"money": "80",
"onemoney": "0.04",
"num": 2000,
"name": "Q2"
},
{
"money": "150",
"onemoney": "0.03",
"num": 5000,
"name": "Q3"
},
{
"money": "200",
"onemoney": "0.02",
"num": 10000,
"name": "Q4"
}
],
"msg": "查询成功",
"success": true,
"totalCount": 5
}
$.each(data.data,function (i,e) {
$("ul").append(' <li>' +
' <num>num='+e.num+'</num>' +
' <money>money='+e.money+'</money>' +
' <name>onemoney='+e.onemoney+'</name>' +
' <name>name='+e.name+'</name>' +
' </li>')
})
// 监听input输入
var temp=new Array();
var htmlStr="";
var htmlSum=0;
$('input').on('input propertychange',function(){
var _this=$(this).val();
console.log(_this)
var list =data.data
for(var i=0;i<list.length;i++){
if(list[i].num < _this){
temp.push(list[i]);
}
}
console.log(temp)
for(var j=0;j<temp.length;) {
j++;
var a= temp.length - j;
if(a<0){
return false;
}
if (Math.floor(_this / temp[a].num) == 0) {
_this=_this;
} else {
htmlStr += temp[a].name+"*"+Math.floor(_this / temp[a].num)+"+";
htmlSum += temp[a].money*Math.floor(_this/temp[a].num);
_this=_this % temp[a].num;
}
}
htmlStr=htmlStr.substring(0,htmlStr.length-1);
$("#name").text("("+htmlStr+")")
$("#num").text(htmlSum.toFixed(2))
htmlStr="";
htmlSum=0;
temp=[];
});
</script>
</body>
</html>