购物车添加动态数字变化效果-html代码-BFW代码库

代码语言：html
所属分类：电商
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
           jQuery(document).ready(function($){
        var cartWrapper = $('.cd-cart-container');
        //product id - you don't need a counter in your real project but you can use your real product id
        var productId = 0;

        if( cartWrapper.length > 0 ) {
                //store jQuery objects
                var cartBody = cartWrapper.find('.body')
                var cartList = cartBody.find('ul').eq(0);
                var cartTotal = cartWrapper.find('.checkout').find('span');
                var cartTrigger = cartWrapper.children('.cd-cart-trigger');
                var cartCount = cartTrigger.children('.count')
                var addToCartBtn = $('.cd-add-to-cart');
                var undo = cartWrapper.find('.undo');
                var undoTimeoutId;

                //add product to cart
                addToCartBtn.on('click', function(event){
                        event.preventDefault();
                        addToCart($(this));
                });

                //open/close cart
                cartTrigger.on('click', function(event){
                        event.preventDefault();
                        toggleCart();
                });

                //close cart when clicking on the .cd-cart-container::before (bg layer)
                cartWrapper.on('click', function(event){
                        if( $(event.target).is($(this)) ) toggleCart(true);
                });

                //delete an item from the cart
                cartList.on('click', '.delete-item', function(event){
                        event.preventDefault();
                        removeProduct($(event.target).parents('.product'));
                });

                //update item quantity
                cartList.on('change', 'select', function(event){
                        quickUpdateCart();
                });

                //reinsert item deleted from the cart
                undo.on('click', 'a', function(event){
                        clearInterval(undoTimeoutId);
                        event.preventDefault();
                        cartList.find('.deleted').addClass('undo-deleted').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
                                $(this).off('webkitAnimationEnd oanimationend msAnimationEnd animationend').removeClass('deleted undo-deleted').removeAttr('style');
                                quickUpdateCart();
                        });
                        undo.removeClass('visible');
                });
        }

        function toggleCart(bool) {
                var cartIsOpen = ( typeof bool === 'undefined' ) ? cartWrapper.hasClass('cart-open') : bool;
                
                if( cartIsOpen ) {
                        cartWrapper.removeClass('cart-open');
                        //reset undo
                        clearInterval(undoTimeoutId);
                        undo.removeClass('visible');
                        cartList.find('.deleted').remove();

                        setTimeout(function(){
                                cartBody.scrollTop(0);
                                //check if cart empty to hide it
                                if( Number(cartCount.find('li').eq(0).text()) == 0) cartWrapper.addClass('empty');
                        }, 500);
                } else {
                        cartWrapper.addClass('cart-open');
                }
        }

        function addToCart(trigger) {
                var cartIsEmpty = cartWrapper.hasClass('empty');
                //update cart product list
                addProduct();
                //update number of items 
                updateCartCount(cartIsEmpty);
                //update total price
                updateCartTotal(trigger.data('price'), true);
                //show cart
                cartWrapper.removeClass('empty');
        }

        function addProduct() {
                //this is just a product placeholder
                //you should insert an item with the selected product info
                //replace productId, productName, price and url with your real product info
                productId = productId + 1;
                var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="http://repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">Product Name</a></h3><span class="price">$25.99</span><div class="actions"><a href="#0" class="delete-item">Delete</a><div class="quantity"><label for="cd-product-'+ productId +'">Qty</label><span class="select"><select id="cd-product-'+ productId +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
                cartList.prepend(productAdded);
        }

        function removeProduct(product) {
                clearInterval(undoTimeoutId);
                cartList.find('.deleted').remove();
                
                var topPosition = product.offset().top - cartBody.children('ul').offset().top ,
                        productQuantity = Number(product.find('.quantity').find('select').val()),
                        productTotPrice = Number(product.find('.price').text().replace('$', '')) * productQuantity;
                
                product.css('top', topPosition+'px').addClass('deleted');

                //update items count + total price
                updateCartTotal(productTotPrice, false);
                updateCartCount(true, -productQuantity);
                undo.addClass('visible');

                //wait 8sec before completely remove the item
                undoTimeoutId = setTimeout(function(){
                        undo.removeClass('visible');
                        cartList.find('.deleted').remove();
                }, 8000);
        }

        function quickUpdateCart() {
                var quantity = 0;
                var price = 0;
                
                cartList.children('li:not(.deleted)').each(function(){
                        var singleQuantity = Number($(this).find('select').val());
                        quantity = quantity + singleQuantity;
                        price = price + singleQuantity*Number($(this).find('.price').text().replace('$', ''));
                });

                cartTotal.text(price.toFixed(2));
                cartCount.find('li').eq(0).text(quantity);
                cartCount.find('li').eq(1).text(quantity+1);
        }

        function updateCartCount(emptyCart, quantity) {
                if( typeof quantity === 'undefined' ) {
                        var actual = Number(cartCount.find('li').eq(0).text()) + 1;
                        var next = actual + 1;
                        
                        if( emptyCart ) {
                                cartCount.find('li').eq(0).text(actual);
                                cartCount.find('li').eq(1).text(next);
                        } else {
                                cartCount.addClass('update-count');

                                setTimeout(function() {
                                        cartCount.find('li').eq(0).text(actual);
                                }, 150);

                                setTimeout(function() {
                                        cartCount.removeClass('update-count');
                                }, 200);

                                setTimeout(function() {
                                        cartCount.find('li').eq(1).text(next);
                                }, 230);
                        }
                } else {
                        var actual = Number(cartCount.find('li').eq(0).text()) + quantity;
                        var next = actual + 1;
                        
                        cartCount.find('li').eq(0).text(actual);
                        cartCount.find('li').eq(1).text(next);
                }
        }

        function updateCartTotal(price, bool) {
                bool ? cartTotal.text( (Number(cartTotal.text()) + price).toFixed(2) )  : cartTotal.text( (Number(cartTotal.text()) - price).toFixed(2) );
        }
});
        });
    </script>
     <style>
     /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
        display: block;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}
     /* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 1.6rem;
  font-family: "Source Sans Pro", sans-serif;
  color: #2b3e51;
  background-color: #ecf0f1;
}

a {
  color: #2c97de;
  text-decoration: none;
}

img {
  max-width: 100%;
}

main {
  text-align: center;
  padding: 2em 5%;
}

h1 {
  font-size: 2rem;
  padding: 3em 0 .8em;
}
@media only screen and (min-width: 768px) {
  h1 {
    font-size: 3.2rem;
  }
}

.cd-add-to-cart {
  display: inline-block;
  padding: 1.2em 1.8em;
  background: #2c97de;
  border-radius: 50em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 700;.........完整代码请登录后点击上方下载按钮下载查看