广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jquery购物车实时结算特效实现思路
  • 321
分享到

jquery购物车实时结算特效实现思路

购物车实时结算 2022-11-15 23:11:36 321人浏览 薄情痞子
摘要

$(function(){ $(".child_tab tr:last-child").find("td").CSS({borderBottom:'none'}) //获得文本框对


$(function(){
$(".child_tab tr:last-child").find("td").CSS({borderBottom:'none'})
//获得文本框对象
var t = $(".amount-input");
//数量增加操作
$(".amount-up").click(function(e){
var c1=parseInt($(this).prev().val());
$(this).prev().val(c1+1);
e.preventDefault()
setTotal();
});
//数量减少操作
$(".amount-down").click(function(e){
var c1=parseInt($(this).next().val());
if(c1>=1){
$(this).next().val(c1-1);
};
e.preventDefault()
setTotal();
});
function setTotal(){
//取每个条件的值
var num1=$(".sum1").text();
var num2=$(".sum2").text();
var num3=$(".sum3").text();
var total=0;
var x1=4,x2=10,x3=49;
//遍历合计件数
t.each(function(index,ele){
total+=parseInt($(ele).val());
});
$(".figure").html(total);
//判断个数满足哪个要求
if(total<x2){
b2=num1
}else if(total>=x2&&total<=x3){
b2=num2
}else if(total>=x3){
b2=num3
}
$(".money").html((total*b2).toFixed(2)+'元');//toFixed()是保留小数点的函数很实用哦
}
//初始化
setTotal();

})

--结束END--

本文标题: jquery购物车实时结算特效实现思路

本文链接: https://www.lsjlt.com/news/172767.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jquery购物车实时结算特效实现思路
    复制代码 代码如下: $(function(){ $(".child_tab tr:last-child").find("td").css({borderBottom:'none'}...
    99+
    2022-11-15
    购物车 实时结算
  • 如何使用jQuery实现购物车结算功能
    这篇文章主要介绍如何使用jQuery实现购物车结算功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下<!DOCTYPE html> <html...
    99+
    2022-10-19
  • JavaScript如何实现购物车结算
    这篇文章主要介绍JavaScript如何实现购物车结算,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! JavaScript实现购物车结算的方法:1、在页面...
    99+
    2022-10-19
  • Vue模拟实现购物车结算功能
    本文实例为大家分享了Vue实现购物车结算功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <...
    99+
    2022-11-12
  • vue简单实现购物车结算功能
    本文实例为大家分享了vue简单实现购物车结算的具体代码,供大家参考,具体内容如下 样式没有写 <template>  <div class="about cont...
    99+
    2022-11-13
  • JS如何实现高仿抛物线加入购物车特效
    这篇文章主要介绍了JS如何实现高仿抛物线加入购物车特效,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. 简介要想让你的购物车有种高大上的感...
    99+
    2022-10-19
  • jQuery如何模拟实现天猫购物车动画效果
    这篇文章主要介绍了jQuery如何模拟实现天猫购物车动画效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、功能描述: &nbs...
    99+
    2022-10-19
  • Jquery怎么实现商品飞入购物车的动画效果
    本篇内容主要讲解“Jquery怎么实现商品飞入购物车的动画效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Jquery怎么实现商品飞入购物车的动画效果”吧!&...
    99+
    2022-10-19
  • 使用Python的Django框架结合jQuery实现AJAX购物车页面
    Django中集成jquery 首先,静态的资源通常放入static文件夹中: static/ css/ djquery.css samples/ hello.css ...
    99+
    2022-06-04
    购物车 框架 页面
  • jquery 倒计时效果实现秒杀思路
    复制代码 代码如下: <script type="text/javascript"> $(function(){ countDown("2015/9/8 11:11:59...
    99+
    2022-11-15
    jquery 倒计时
  • 如何使用Ajax、json实现京东购物车结算界面的数据交互
    这篇文章将为大家详细讲解有关如何使用Ajax、json实现京东购物车结算界面的数据交互,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图<div cla...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作