星巴克礼物页面代码

来源：互联网发布：乐享下载软件编辑：程序博客网时间：2024/04/30 01:20

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>礼品卡</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/test.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="container">
<div class="row">
<div class="dream-text1"><span class="glyphicon glyphicon-picture"></span> 选择卡面</div>

<div style="overflow-x: auto;overflow-y: hidden;width:330px;height: 135px;">
<div class="dream-scrolldream-scroll" style="width: 1000px;">
<div class="gregre">
<span class="glyphicon glyphicon-ok"></span>
<img src="img/3.jpg" id="dream-img" />
</div>
<div class="gregre">
<span class="glyphicon glyphicon-ok"></span>
<img src="img/3.jpg" id="dream-img" />
</div>
<div class="gregre">
<span class="glyphicon glyphicon-ok"></span>
<img src="img/3.jpg" id="dream-img" />
</div>
<div class="gregre">
<span class="glyphicon glyphicon-ok"></span>
<img src="img/3.jpg" id="dream-img" />
</div>
</div>
</div>

<div class="dream-text1"><span class="glyphicon glyphicon-tree-conifer"></span> 选择礼品</div>

<div class="dream-window" style="z-index:9999 ; background:#FFFFFF; height:350px;display: none;">
<div class="close1" >
<span class="glyphicon glyphicon-remove"></span>
</div>

<div class="col-xs-12 dream-window-center">
<div class="col-xs-6">
<img src="img/fsd5.jpg" class="dream-window-center-img" style="width: 150px; height: 50px;">
</div>
<div class="col-xs-6">
<h5 class="qwe"></h5>
<p class="price1"></p>
</div>
</div>

<div class="dream-window-cont">
<span>适用门店：</span>
<a href="#" >查看所有门店</a>
</div>
<div class="dream-window-cont">
<span>可用时段：</span>
<a href="#" class="time"></a>
</div>
<div class="dream-window-cont" style="margin-bottom: 30px;">
<span>使用须知：</span>
<a href="#" class="content"></a>
</div>
</div>


<div class="choose-box" style="position: relative;">

</div>


<div class=" dream-bottom navbar-fixed-bottom" style="z-index: 999;">
<div class="bottom-left">
<div class="col-xs-8">
<div style="margin-top: 10px;" class="num"> 共0份</div>
<div style="margin-bottom: 10px;" class="num-price">￥0</div>
</div>
<div class="col-xs-4" style="line-height: 60px;">
<button type="button" class="btn btn-info" >购买</button>
</div>
</div>
</div>
</div>
</div>

<script src="js/jquery.min.js" ></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">

var arr = [ //创建数组用于放值
{id: "0", title: "星礼卡",num:"0",price:'100',name:"焦糖玛奇朵",time:'2017.12.25-2020.12.23',img:'img/fsd6.jpg',content:'焦糖玛奇朵（大杯饮料券）。。。'},
{id: "1", title: "双杯特饮",num:"0",price:'31',name:"焦糖玛奇朵",time:'2017.12.25-2030.1.23',content:'11111111111111111111'},
{id: "2", title: "拿铁",num:"0",price:'35',name:"焦糖玛奇朵",time:'2017.12.25-2050.11.02',content:'22222222222222222222222'},
{id: "3", title: "aaaa",num:"0",price:'80',name:"焦糖玛奇朵",time:'2017.12.31-2020.12.23',content:'33333333333333333333333'}
];
var thml = ''; //创建一个元素用于放页面内容
for(var i in arr){ //通过数组元素个数创建相应元素个数
thml += '<div class="col-xs-5 chooseGift" >';
thml += '<span class="number" id="'+arr[i].id+'">'+arr[i].num+'</span>';
thml += '<div class="choose-img">';
thml += '<img class="fcsafsa" id='+arr[i].id+' src="img/fsd8.jpg">';
thml += '</div>';
thml += '<div class="choose-text">';
thml += '<div class="col-xs-7" '+arr[i].title+'</div>';
thml += '<div class="col-xs-5 ">'+arr[i].price+"元"+'</div>';
thml += '</div>';
thml += '<div style="color: #eee;">———————</div>';
thml += '<div class="col-xs-12 choose-add" id="choose-add">';
thml += '<div class="glyphicon glyphicon-plus" style="color: forestgreen;"></div>';
thml += '</div>';
thml += '<div class="choose-change">';
thml += '<div class="col-xs-6 choose-change-left minus" >';
thml += '<span class="glyphicon glyphicon-minus" ></span>';
thml += '</div>';
thml += '<div class="col-xs-6 choose-change-right plus">';
thml += '<span class="glyphicon glyphicon-plus" ></span>';
thml += '</div>';
thml += '</div>';
thml += '</div>';
}
$('.choose-box').append(thml); //将创建的加入到div中

$(function(){
//选择卡面滚动图片
$('.dream-scrolldream-scroll .gregre').click(function(){
$(this).addClass('asd').siblings().removeClass('asd'); //给当前添加样式，其他兄弟移除样式
$(this).children('span').show(); //对勾显示
$(this).siblings().children('span').hide(); //其他兄弟节点隐藏对勾
})
//选择礼品
$('body').on('click','.choose-box .chooseGift .choose-add',function(){
$(this).parent(".chooseGift").addClass('chooseGift-border'); //添加绿边框
var i = $(this).siblings('.number').text(); //获取右上角圈中的的值
$(this).siblings('.number').text(++i);
$(this).hide(); //隐藏+
$(this).siblings('.choose-change').show(); //+-显示
$(this).parent(".chooseGift").children('.number').show();
var id=$(this).siblings('.number').attr('id');
// $(this).siblings('.number').text(++i);
var num=$(this).siblings('.number').text();
arr[id].num = num;
console.log(arr);
jineee();
});
//数量+
$('body').on('click','.choose-box .chooseGift .plus', function(){
var i = $(this).parent().siblings('.number').text(); //获取右上角圈中的的值
var id = $(this).parent().siblings('.number').attr('id');
$(this).parent().siblings('.number').text(++i); //i++
var num = $(this).parent().siblings('.number').text();
arr[id].num = num;
console.log(arr);
jineee();
});
//数量-
$('body').on('click','.choose-box .chooseGift .minus',function(){
var i = $(this).parent().siblings('.number').text(); //获取右上角圈中的的值
var id =$(this).parent().siblings('.number').attr('id');
if(i>0){
$(this).parent().siblings('.number').text(--i); //i--
var num=$(this).parent().siblings('.number').text();
arr[id].num=num;
console.log(arr);
jineee();
}

});
$('body').on('click','.fcsafsa',function(){ //点击图片从数组获取值（弹窗）
var id = $(this).attr('id'); //
var asd = arr[id]; //从数组中获取每条数据唯一的id
$('.qwe').text(asd.title);
$('.price1').text(asd.price);
$('.time').text(asd.time);
$('.content').text(asd.content);
$('.dream-window-center-img').text(asd.img);
$('.dream-window').show();

})
$('.glyphicon').click(function(){
$('.dream-window').hide();
})

var id = $(".fcsafsa").attr('id'); //
// var asd = arr[id];
// $('.num').text();
});
function jineee(){
var jine = 0;
var shuliang = 0;
for(var i in arr){
shuliang += Number(arr[i].num);
jine += Number(arr[i].num * Number(arr[i].price));
}
// console.log(shuliang,jine);
$('.num').text('共'+shuliang+'份');
$('.num-price').text('￥'+jine);
}

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

阅读全文

'); })();