您的位置:首页 > Web前端 > JavaScript

js 下拉自动加载 购物车的计算

2017-01-20 11:46 267 查看

//下拉  点击加载

<div  id="morebtn" style="text-align: center;background:#FFFFFF; height: 5rem; line-height: 5rem; width: 100%;" onclick="getexperiencelist()">更 多 内 容</div>




$(function () {
getexperiencelist();
});
var page = 1;
function getexperiencelist() {
var categoryid = $('#categoryid').val();
var html = "";
$.getJSON("getlist", {page: page++, categoryid: categoryid}, function (json) {
if (json.status == 1) {
$.each(json.data, function (index, array) {
html += "<li class='bd_b'>";
html += " <a class='dis_b flex packJustify' href='share/details?id="+array['id']+"&Navigation="+'实战经验'+"'>";
html += " <span class='img of_h'><img class='dis_b' src=" + array['pic'] + " /></span>";
html += " <span class='img_sizi'>";
html += "<h3 class='f14 of_h'>" + array['title'] + " </h3>";
html += " <p class='f12 of_h'>" + array['des'] + " </p>";
html += " </span>";
html += " </a>";
html += "</li>";
})
$("ul").append(html);
} else if (json.status == 2) {
if(page==2 && json.data==''){
document.getElementById('morebtn').innerHTML = '暂 时 没 有 数 据';
}else{
document.getElementById('morebtn').innerHTML = '没 有 数 据 了';
}
}
});
}
//下拉自动加载
<div id="wrapper" style="max-height: 1000px">
<div id="scroller">
<section class="friendsCont bgc_fff">
<header class="friendsHeader bgh100"></header>
<section class="friendLists">
<section class="pr myInfoCont">
<div class="pa">
<div class="flex">
<div class="text">
<h2 class="f16">{{$user->nickname}}</h2>
</div>
<img class="img" src="{{$user->avatar}}">
</div>
<p class="f12 ta_r"></p>
</div>
</section>
<section id="content" class="friendListsUl">
<ul id="createHtml">
</ul>
</section>
<div id="morebtn"
style="text-align: center;height: 2rem; width: 100%; line-height: 2rem;background: #ffffff;">

</div>
<div style="margin-top: 0.2rem; text-align: center"> </div>
</section>
</section>
{{--<div style="margin-top: 3rem; text-align: center"> </div>--}}
</div>
</div>
$(document).ready(function () {
var page = 1;
window.loading = false;//触发开关,防止多次调用事件
$(window).scroll(function () {
var bot = 50; //bot是底部距离的高度
if (window.loading == false) {
if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
console.log($(document).height());
ajaxdata(page += 1);
}
}
});
});

function thumbnail(url, style, bucket){
if( url.indexOf('aliyun') == -1 ){
return url;
}
var a = document.createElement('a');
a.href= url;

return "http://" + bucket + ".img-cn-hangzhou.aliyuncs.com/" + a.pathname + '@!' + style

}
function ajaxdata($page){
window.loading = true;
$.getJSON("timeline/total", {page:$page}, function (json) {
var createHtml = document.getElementById("createHtml");
var html = "";
if(json.status==1){
$.each(json.data, function (index, array) {
html += " <li class='flex packJustify alignStart bd_b'>";
html += " <div class='img flex_0'><img src=" + array['avatar'] + "></div>";
html += " <div class='r flex_1'>";
html += " <h3 class=dis_b f14>";
html += " <a href='timeline/show?userid=" + array['user_id'] + "' class='detail'>" + array['nickname'] + " </a>";
html += " </h3>";
html += " <p class='f12'>" + array['content'] + " </p>";
html += " <div  class='t imgLists fcl'>";
$.each(array['resource'], function (index2, array2) {
var thumb = thumbnail(array2['content'],'276x276',_config.oss_bucket);
html += "<div><img class='fl dis_b' src=" + thumb + "></div>";
});
html += " </div>";
html += " <div class='c fcl f10'>";
html += " <span class='fl time'>" + array['created_at'] + " </span>";
html += " </div>";
html += " </div>";
html += " </li>";
});
$("#createHtml").append(html);
}else{
document.getElementById('morebtn').innerHTML = '没 有 数 据 了';
}
window.loading = false;
})
}
ajaxdata(1)


 购物车 地、单选 全选价格计算

// JavaScript Documentvar checkedList = {};

function calculate(){
var total = 0;
$.each(checkedList,function(id,data){
console.log(id,data);
total += checkedList[id].price * checkedList[id].count;
});

$("#taotal").html("¥" + total);

}
/*单选*/
$(document).on("change",".onecheck",function(e){
e.preventDefault();
var $li = $(this).parents("li");
var id = $li.attr("data-id");
if($(this).prop('checked')){
var count = $li.find(".num").val();
checkedList[id] = {price:$li.attr("data-price"),count:count};
$(this).next().addClass("active");
}else{
delete checkedList[id];
$(this).next().removeClass("active");

}
var allChecked = true;
$('.onecheck').each(function(){
if(!this.checked){
allChecked = false;
return false;
}
console.log("xx");
});
console.log('allchecked',allChecked);
$('.check-all').prop("checked",allChecked);
calculate();
});

/*所有选项*/
$(document).on("change",".check-all",function(e){
e.preventDefault();
console.log( $(".squaredFour input"));
$(".onecheck").prop('checked',$(this).prop("checked")).trigger('change');
if($(this).prop('checked')){
$(this).next().addClass('active');
}else{
$(this).next().removeClass('active');
}
console.log('all');
});

/*减商品*/
$(document).on("click",".down",function(e){
e.preventDefault();
var $li = $(this).parents("li");
var $input = $li.find(".num");
var origin = parseInt($input.val());
$input.val(origin-1);
$input.trigger('input');

});

/*加商品*/
$(document).on("click",".up",function(e){
e.preventDefault();
var $li = $(this).parents("li");
var $input = $li.find(".num");
var origin = parseInt($input.val());
$input.val(origin + 1);
$input.trigger('input');
});

/*改变文本输入*/
$(document).on("input",".num",function(e){
e.preventDefault();
var $li = $(this).parents("li");
var id = $li.attr("data-id");

if( checkedList[id] != undefined){
var count = $(this).val();
checkedList[id] = {price:$li.attr("data-price"),count:count};
calculate();
}

});

<script type="text/javascript">
//
function upgoods($id){
var $count =  $.trim($('.num').val());
var url = ' {{ route('updateshoppingCart')}}';
var $coun = parseInt($count,10)+1;
$.get(url, {id: $id,count:$coun}, function (data) {
if (data.code == 1) {

}
}, 'json');
}

//
function downgoods($id){
var $count =  $.trim($('.num').val());
var url = ' {{ route('updateshoppingCart')}}';
var $coun =  parseInt($count,10)-1;
$.get(url, {id: $id,count:$coun}, function (data) {
if (data.code == 1) {

}
}, 'json');

}
//删除购物车
$(document).on("click",".deletegoods",function(e){
e.preventDefault();
var $li = $(this).parents("li");
var $id = $li.attr("data-id");
var url = ' {{ route('deleteshoppingCart')}}';
$.get(url, {id: $id}, function (data) {
if (data.code == 1) {
delete checkedList[$id];
calculate();
$li.remove();
}
}, 'json');

});

function empty(obj){
for(var i in obj ){
return false;
}
return true;
}
//提交购物车        function SubmitshoppingCart() {
var url = ' {{ route('submitshoppingCart')}}';
var checked = checkedList;
if(empty(checked)){
alert('请选择商品');
}else{
$.get(url, {checkbx: checked}, function (data) {
if(data.code == 10){
location.href="orderdetails?id="+ data.orderid;
}else{
alert(data.ms);
}
}, 'json');
}
}
</script>

<article class="distribution_center_article">
<div id="panel-239981" class="active my_shopping">
<ul class="my_shopping_ul">
@foreach($cart as $key=>$good)
<li role="alert" class="alert goods10" data-id="{{$good->_id}}"
data-price="{{$good->goods->realPrice()}}" id="delete">
<p class="squaredFour">
<input type="checkbox" class="onecheck" name="check"/>
<a for="squaredFour"> </a>
</p>
<img src="{{$good->pic}}" alt=""/>

<div>
<h3>{{$good->goods['goodsname']}}</h3>
<span>
<button type="button" class="delete deletegoods" >
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
</span></div>
<span>

<h2>{{--$item->goods->realPrice() ;?>--}}
<strong> {{\App\Services\Utils::formatYuan($good->goods->realPrice())}}</strong></h2>
<p class="text-center">
<button type="button" class=" down " onclick="downgoods('{{$good->_id}}')" >-</button>
<input type="number" class="text-center num  deal spinner" value="{{$good->count}}" min="1" max="99" name="value">
<button type="button" class="up" onclick="upgoods('{{$good->_id}}')">+</button>
</p>
</span>
</li>
@endforeach
<li class="total">
<p class="squaredFour">
<input type="checkbox" class="check-all" id="btn1" value="None"
name="check"/>

<a for="squaredFour"></a>
</p>

<h2>全选</h2>

<div>
<h2>合计:<strong id="taotal">¥0.00</strong></h2>

<p>不含运费</p>
</div>
<button type="submit" class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm1">
结算
</button>
</li>
<div class="modal fade bs-example-modal-sm1 " tabindex="-1" role="dialog"
aria-labelledby="mySmallModalLabel" aria-hidden="true">
<!--地址弹窗-->
<div class="address-window">
<div>
<div class="modal-header">
<button type="button" class="" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">关闭</span></button>
<form>
<input type="text" placeholder="深圳"/>
<button type="submit">取消</button>
<span><button type="submit" class="glyphicon glyphicon-search"></button></span>
</form>
</div>
<article class="receiving_address_article address-window_article">
<div class="active my_shopping">
<ul id="adressreallfresh" >
@if($address )

@foreach($address as $k=>$v )
<li role="alert" class="alert" id="adressrefresh">
<div>
<h3>{{$v->realname}}</h3>
<span>
<h2 class="">
{{$v->mobile}}
</h2>
</span>
<h5>送至:{{$v->province}}{{$v->city}}{{$v->area}} {{$v->address}}</h5>
</div>
<div>
<input type="hidden" name="setadressdefault" id="setadressdefault"
value="{{ route('addresslist',array('type'=>'setadressdefault'))}}"/>
<input type="radio" name="sex" value="male"
@if($v->default=='yes')
checked="checked"
@endif
onclick="setadressdefault('{{$v->_id}}')"><i>默认地址</i>
<p>
<img src="img/14_13.png" alt="" class="float-left width-15x"/>
<i class="float-left margin-l-5">编辑</i>
</p>
<input type="hidden" name="deladress" id="deladress"
value="{{ route('addresslist',array('type'=>'deladress'))}}"/>
<button type="button" class="delete"
onclick="deladress('{{$v->_id}}')">
<img src="img/71_03.png" alt="" aria-hidden="true"class="float-left width-15x"/>
<i class="float-left margin-l-5">删除</i>
</button>
</div>
</li>
@endforeach
@else
<li role="alert" class="alert"><P style="margin: 20px; text-align: center ">
请添加收货地址信息</P></li>
@endif

</ul>

</div>
<div class="btn btn-danger" style="float: right; margin:5px; margin-top: 10px;" onclick="SubmitshoppingCart()"> 提 交
</div>
<div class="addto">
<button type="button">+ 添加新地址</button>
</div>
</article>
</div>
<!--添加-->
<div class="increase-window">
<div class="preservation">
<h4>
<button type="button" class="off" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true" class="glyphicon glyphicon-remove"></span></button>
</h4>
<form class="ajaxfrom">
<input type="hidden" name="urladdadress" id="urladdadress"
value="{{ route('addresslist',array('type'=>'addadress'))}}">
<label><i>收货人 :</i> <input type="text" name="username" id="username" placeholder="真实姓名"></label>
<br/>
<label><i>联系方式 :</i> <input type="text" name="phone" id="phone" placeholder="必填信息">
</label>
<br/>
<label><i>省份 :</i> <select id="Select1" name="Select1"></select> </label>
<br/>
<label><i>城市 :</i> <select id="Select2" name="Select2"></select> </label>
<br/>
<label><i>地区 : </i> <select id="Select3" name="Select3"></select> </label>
<br/>
<label><i>详细地址 : </i> <input type="text" id="adress" name="adress"
placeholder="具体街道门牌号"> </label>
<script type="text/javascript">
addressInit('Select1', 'Select2', 'Select3');
</script>
</form>
<div>
<button onclick="addadress()" type="button" class=" btn btn-danger">保存</button>
</div>
</div>
</div>
</div>
</div>
</ul>
</div>
</article>

来源: http://www.cnblogs.com/qiuyang1/p/4877415.html
 onkeypress="EnterPress(event)"  onblur="method_code()" 
var track = $('#logistics_track').val();
var a = $("#code1").text(track)
function EnterPress(e){ //传入 event
var e = e || window.event;
if(e.keyCode == 13){
method_code()
}
}
function method_code(){
var aaa  =$('#code1').val().split("\n");
var tmpMap = {};//用这个map来做唯一字符串验证  //通过map的属性`key`只能是唯一来验证的
$.each(aaa , function(){//遍历所有的字符串
//这里`this`表示当前正在验证的字符串
if(!tmpMap[this]){//如果map里还没有出现这个key,表示这个字符串目前是唯一的
tmpMap[this]=true;
}else{//否则,已经出现重复的字符串
alert('请勿重复扫码:' + this);
}
});
}


                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: