学习js分享

购物车怎么做见代码

/购物车 (数组版本)
(function ($) {
$.fn.TaShopCartArray = function (setting) {
//初始化配置
var opts = $.extend({}, $.fn.TaShopCartArray.defaults, setting);
//读取cookeie信息
var _initdata = [];

if (opts.savecookie && $.cookie(opts.cookiename) != null && $.cookie(opts.cookiename) != ‘‘) {
_initdata = eval(‘(‘ + $.cookie(opts.cookiename) + ‘)‘);
}
//初始化
$(opts.Divcart).data(opts.staticname, _initdata);
var cctv = {
//计算单项金额
singlemoney: function (price, count) {
return (price * 10000 * count / 10000).toFixed(2);
},
addnew: function () {
var datejsorder = $(opts.Divcart).data(opts.staticname);
var sname = $(opts.shopNameHidden).text();
var sid = $(this).attr("sFID"); //店铺id
var mid = $(this).attr("mFID"); //菜id
var mname = $(this).attr("mName"); //菜名
var mPrice = $(this).attr("mPrice"); //菜单价
var mStatus = $(this).attr("mStatus"); //菜品状态
//构造并赋值

var _flag = false;
for (var tt in datejsorder) {

if (datejsorder[tt].sid != sid && datejsorder[tt]["count"] > 0) {
$.fn.RFAlert({ Alertcontent: "存在其它店铺的餐品!" });
return;
}
if (datejsorder[tt].mid == mid) {
_flag = true;
}
}

if (!_flag) {
var _price = cctv.singlemoney(mPrice, 1);
var g = { sid: sid, mid: mid, count: 1, singleprice: mPrice, price: _price, menuname: mname, status: mStatus };
datejsorder.push(g);
var _tr = $(‘<tr id=‘ + opts.Trorderpre + mid + ‘><td class="tb-name">‘ + mname + ‘</td><td class="tb-num"><div><a class="down"><img src="../../images/numbtn_03.jpg" alt="减少" />‘ +
‘</a><label>1</label><a class="up"><img src="../../images/numbtn_05.gif" alt="增加" /></a></div></td> ‘ +
‘ <td class="tb-pric">‘ + opts.moneypre + _price + ‘</td> ‘ +
‘<td class="tb-cancel"><a>X</a></td></tr>‘);
var _strtotalPrice = "<li><font class=\"cart-ftcor\">合计</font><label id=\"TacartTotalPrice\">0.00</label></li>";
$(opts.DivcartTbody).append(_tr);
$(".cart-total").empty();
$(".cart-total").append(_strtotalPrice);

var _$tr = $("#" + opts.Trorderpre + mid);
_$tr.find(".tb-num a.down").click(function () {
//减号
cctv.downnum(mid, mPrice);
});
_$tr.find(".tb-num a.up").click(function () {
//加号
cctv.upnum(mid, mPrice);
});
_$tr.find(".tb-cancel a").click(function () {
cctv.delorder(mid);
});
}
else {//已存在
for (var tt in datejsorder) {
if (datejsorder[tt].mid == mid) {
datejsorder[tt].count = parseInt(datejsorder[tt].count) + parseInt(1);
datejsorder[tt].price = cctv.singlemoney(mPrice, datejsorder[tt].count);
var _$tr = $("#" + opts.Trorderpre + mid);
_$tr.find(".tb-num label").html(datejsorder[tt].count);
_$tr.find(".tb-pric").html(opts.moneypre + datejsorder[tt].price);
}
}

}
//菜品图片飘过~
var _img = $(this).attr("imgsrc") == "" ? "/images/noTaMenuimg.jpg" : $(this).attr("imgsrc");
var thisTop = $(this).offset().top; //菜品所在位置的高度
var thisLeft = $(this).offset().left; //菜品所在位置的宽度
animatenToShopCart(thisTop, thisLeft, _img);

$(opts.Divcart).data(opts.staticname, datejsorder);
cctv.reflash();
},
//增加一个订单项数量
upnum: function (mid, mprice) {
var datejsorder = $(opts.Divcart).data(opts.staticname);
for (var tt in datejsorder) {
if (datejsorder[tt].mid == mid) {
datejsorder[tt].count = parseInt(datejsorder[tt].count) + parseInt(1);
datejsorder[tt].price = cctv.singlemoney(mprice, datejsorder[tt].count);
var _$tr = $("#" + opts.Trorderpre + mid);
_$tr.find(".tb-num label").html(datejsorder[tt].count);
_$tr.find(".tb-pric").html(opts.moneypre + datejsorder[tt].price);
}
}

cctv.reflash();
//return false;

},
//减少一个订单项数量
downnum: function (mid, mprice) {
var datejsorder = $(opts.Divcart).data(opts.staticname);
for (var tt in datejsorder) {
if (datejsorder[tt].mid == mid) {
datejsorder[tt].count = parseInt(datejsorder[tt].count) - parseInt(1);
if (datejsorder[tt].count > 0) {
datejsorder[tt].price = cctv.singlemoney(mprice, datejsorder[tt].count);
var _$tr = $("#" + opts.Trorderpre + mid);
_$tr.find(".tb-num label").html(datejsorder[tt].count);
_$tr.find(".tb-pric").html(opts.moneypre + datejsorder[tt].price);
} else {
$("#" + opts.Trorderpre + mid).remove();
datejsorder[tt].mid = "";
}
}
}
cctv.reflash();
},
//删除一个订单项
delorder: function (mid) {
var datejsorder = $(opts.Divcart).data(opts.staticname);
for (var tt in datejsorder) {
if (datejsorder[tt].mid == mid) {
datejsorder[tt].count = 0;
datejsorder[tt].price = 0;
$("#" + opts.Trorderpre + mid).remove();
datejsorder[tt].mid = "";
}
}
cctv.reflash();
},
//刷新购物车
reflash: function () {

var data = $(opts.Divcart).data(opts.staticname);

var size = 0;
var _totalMoney = 0.00;
for (var i in data) {

if (data[i].count > 0) {
size++;
_totalMoney += parseFloat(data[i].price);

}
}
var _TaServiceFare = parseFloat($(opts.TaServiceFare).text() != "" ? $(opts.TaServiceFare).text() : 0).toFixed(2); //外送服务费
var _allShouldPayMoney = (parseFloat(_totalMoney) + parseFloat(_TaServiceFare)).toFixed(2);
$(opts.cartTotalPrice).text(opts.moneypre + _allShouldPayMoney);
if (size > 0) {
$(opts.Divcart).find("div.cart-sum ul.tacartalert").remove();
var _startFare = parseFloat($(opts.startingFare).val()).toFixed(2); //起步价
// $(opts.Checkbuttom).html("去结算");
$(opts.Checkbuttom).attr("flagcheck", ""); //清空结算按钮属性
//如果总价不起过起送费用,则提示 to do 比如不允许点击结算
if (parseFloat(_allShouldPayMoney) < (parseFloat(_startFare))) {
var _ul = $("<ul class=\"send-cost tacartalert fn-clear\"><li><font class=\"cart-ftcor\">未达到本店起送价(" + opts.moneypre + _startFare + ")</font></li></ul>");
$(opts.Divcart).find("div.cart-sum ul").eq(0).after(_ul);
// $(opts.Checkbuttom).html("无法结算");
$(opts.Checkbuttom).attr("flagcheck", "no"); //添加结算按钮属性
}

} else {
//清空tr
$(opts.DivcartTbody).empty();
}
var _arr = new Array();
for (var k in data) {
// alert(data[k][‘sid‘]);
if (data[k]["mid"] != "")
_arr.push(data[k]);
}

//保存cookie
if (opts.savecookie) {
var date = new Date(); date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000)); //一天
$.cookie(opts.cookiename, JSON.stringify(_arr), { path: ‘/‘, expires: date });
}

$(opts.Divcart).data(opts.staticname, _arr);

//以下操作数据库
if ($.cookie("hahahaRFUserID") != undefined && $.cookie("hahahaRFMemberName") != undefined) {
$.post("/Takeaway/Takeaway/addCartCookie", { rnd: Math.random }, function () {
});
}

},
//结算
ToCheck: function () {
var _shopKey = $(opts.TaShopKey).val();
if (_shopKey != undefined && _shopKey != "") {
var data = $(opts.Divcart).data(opts.staticname);

var _arr = new Array();
for (var k in data) {
_arr.push(data[k]["mid"]);

if (data[k]["sid"] != _shopKey) {
$.fn.RFAlert({ Alertcontent: "购物车里的餐品不是在本店订购的，可以先清空此前所选餐品!" });
return false;
}
}

}

var size = $(opts.DivcartTbody).find("tr").size();
if (size > 0) {
var _flag = $(opts.Checkbuttom).attr("flagcheck");
if (_flag && _flag == "no") {
$.fn.RFAlert({ Alertcontent: "未达到本店起送价,不送啦!" });
return false;
}

var _menuids = _arr.join(",");
$.post("/Takeaway/Takeaway/menuStatus", { menuids: _menuids, rmd: Math.random() }, function (menuStatus) {

if (menuStatus != "") {
$.fn.RFAlert({ Alertcontent: menuStatus });
return;
} else {

$.get("/Takeaway/Takeaway/CheckShopTime", { shopid: _shopKey }, function (res) {
if (res == "false") {
$.fn.RFAlert({ Alertcontent: "该餐厅暂不营业,请在营业时间内订餐!" });
return false;
}
else {

location.href = "/Takeaway/Takeaway/snackPay";
}
});

}
},"text");

} else {
$.fn.RFAlert({ Alertcontent: "请选择餐品，再进行结算!" });
return false;
}
// alert(size);
// alert(JSON.stringify($(opts.Divcart).data(opts.staticname)));
// cctv.clearCart();
},
//清空购物车
clearCart: function () {
$(opts.Divcart).data(opts.staticname, []); //清空data
$(opts.DivcartTbody).find("tr").empty();
cctv.reflash();
}
};
//初始化购物车
var data = $(opts.Divcart).data(opts.staticname);
//重写右侧的车
for (var tt in data) {
var count = data[tt].count;
if (count > 0) {

var mname = data[tt][‘menuname‘];
var mPrice = data[tt][‘price‘];
var singleprice = data[tt][‘singleprice‘];
var totalPrice = 0;
var _totalMoney = totalPrice += (mPrice * count);
var _tr = $(‘<tr id=‘ + opts.Trorderpre + data[tt].mid + ‘><td class="tb-name">‘ + mname + ‘</td><td class="tb-num"><div><a class="down"><img src="../../images/numbtn_03.jpg" alt="减少" />‘ +
‘</a><label>‘ + count + ‘</label><a class="up"><img src="../../images/numbtn_05.gif" alt="增加" /></a></div></td> ‘ +
‘ <td class="tb-pric">‘ + opts.moneypre + cctv.singlemoney(singleprice, count) + ‘</td> ‘ +
‘<td class="tb-cancel"><a>X</a></td></tr>‘);

var _strtotalPrice = "<li><font class=\"cart-ftcor\">合计</font><label id=\"TacartTotalPrice\">" + _totalMoney + "</label></li>";

$(opts.DivcartTbody).append(_tr);
$(".cart-total").empty();
$(".cart-total").append(_strtotalPrice);

var _$tr = $("#" + opts.Trorderpre + data[tt].mid);
_$tr.find(".tb-num a.down").data(‘cc‘, data[tt].mid).click(function () {
var d = $(this).data(‘cc‘);
cctv.downnum(d, singleprice); //减号
});
_$tr.find(".tb-num a.up").data(‘cc‘, data[tt].mid).click(function () {
var d = $(this).data(‘cc‘);
cctv.upnum(d, singleprice); //加号
});
_$tr.find(".tb-cancel a").data(‘cc‘, data[tt].mid).click(function () {
var d = $(this).data(‘cc‘);
cctv.delorder(d);
});
cctv.reflash();
}
}
//餐品点击
$(opts.addbuttom).click(cctv.addnew);
//结算按钮点击
$(opts.Checkbuttom).click(cctv.ToCheck);
};
// 配置
$.fn.TaShopCartArray.defaults = {
//全局数据-保存订单信息,就一个名字而已
staticname: ‘RFTaOrder‘,
//cookie的名字
cookiename: ‘hahahaTaOrder‘,
//默认加入订单的控件选择
addbuttom: ‘[hre=addShopCart]‘,
//购物车对象,如div
Divcart: ‘.bar-cart‘,
//购物车对象,tbody
DivcartTbody: ‘.bar-cart tbody‘,
//店铺名字的隐藏域
shopNameHidden: ‘#tashop_name‘,
//结算按钮
Checkbuttom: ‘.ToCheck‘,
//是否保存cookie
savecookie: true,
//订单项tr前缀
Trorderpre: ‘trpre_‘,
//价格前缀
moneypre: "￥ ",
//总价格对象
cartTotalPrice: ‘#TacartTotalPrice‘,
//起步价对象
startingFare: ‘#hdnTastartingFare‘,
//外送服务费用
TaServiceFare: ‘#TaServiceFare‘,
//当前店铺页面主键
TaShopKey: ‘#hdnTaShopFid‘
};
})(jQuery);

CSS3 Maker

CSS3(图4)
CSS3(图4)
这款工具非常强大，可在线演示渐变、阴影、旋转、动画等非常多的效果，并生成对应效果的代码，

CSS3 Generator

非常不错的各种 CSS3 代码生成器，支持圆角、渐变、旋转和阴影等众多特性，带预览效果。

CSS3 Please

帅且酷的一款 CSS3 工具，可即时在线修改代码并预览效果，还有详细的浏览器兼容?情况。
特性

1、
CSS3圆角表格
CSS3圆角表格
圆角表格，对应属性:border-radius。

2、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性:font-effect。

3、丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。(还有对应顶线和中横线的样式，效果与下划线类似)对应属性:text-underline-style，text-underline-color，text-underline-mode，text-underline-position。

4、在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性:font-emphasize-style和font-emphasize-position。

js滑入滑出的方法

<!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>practice</title>
6 <style type="text/css">
7 *{margin:0px;padding:0px;}
8 #div1 {position:relative;left:-200px;width:200px;height:200px;margin-top:50px;background-color: pink;}
9 #share{background-color:lightblue;width:20px;height:50px;position: absolute;left:200px;top:75px;}
10 </style>
11 <script type="text/javascript">
12 window.onload=function(){
13 var div1=document.getElementById("div1");
14 div1.onmouseover=startMove;
15 /*不加括号,就是正常的,鼠标滑过,开始移动,表示鼠标滑过,调用这个函数*/
16 /*div1.onmouseover=startMove();*/
17 /*加了括号之后,一打开就开始移动,表示,把函数执行的结果给div1的鼠标滑过事件,所以会去先执行函数,
18 因为函数执行的结果就是offsetLeft==0,然后把这个结果给div1的鼠标滑过事件,所以会出现一打开就跑,
19 这是为了得到函数执行的结果*/
20 div1.onmouseout=startMove1;
21 };
22 var timer=[‘1‘];
23 /*必须要在外面定义,放在函数里面定义就失败了;
24 含义：timer函数外定义,在两个函数内同时调用,意为,当startMove1调用时,清除startMove的timer,反之亦如此;
25 这样就不会同时运行两个timer,一个函数执行timer前,先清除另一个timer,这样往前停止，再调用timer往后,
26 否则同时运行会出错；*/
27 function startMove(){
28 /*alert(timer.length);*/
29 clearInterval(timer);
30 timer=setInterval(
31 function(){
32 if(div1.offsetLeft==0){clearInterval(timer)}//判断要计算,所以不能带‘px‘,用offsetLeft
33 else {/*alert(div1.style.left);*/
34 //offsetLeft显示无‘px‘,style.left显示有‘px‘
35 /*疑问：alert里面这样用,第一次显示不出left值,后面才可以，为什么？
36 换成offsetLeft第一次就可以显示出来*/
37 div1.style.left=div1.offsetLeft+10+‘px‘;
38 //这个地方要+-,最好不带‘px‘
39 console.log(div1.offsetLeft);
40 }}
41 ,30);
42 }
43 function startMove1(){
44 clearInterval(timer);
45 timer=setInterval(
46 function(){
47 if(div1.offsetLeft==-200){clearInterval(timer);}
48 else{div1.style.left=div1.offsetLeft-10+‘px‘;
49 console.log(div1.offsetLeft);}
50 }
51 ,30);
52 }
53 </script>
54 </head>
55 <body>
56
57 <div id="div1">
58 <span id="share">分享</span>
59 </div>
60 </body>
61 </html>

时间： 2025-01-06 04:26:18

学习js分享的相关文章

好程序员web前端学习路线分享web测试之Js中的函数

好程序员web前端学习路线分享web测试之Js中的函数,在JS中,一般使用函数其实就是为了封装某些操作,或者把编写的程序进行模块化的操作. 一.函数的声明方式 1.普通的函数声明 function box(num1, num2) { return num1+ num2; } 2.使用变量初始化函数 var box= function(num1, num2) { return num1 + num2; }; 3.使用Function构造函数 var box= new Function('num1'

好程序员Java学习路线分享JS中的面向对象

好程序员Java学习路线分享JS中的面向对象,在JS中,一般情况下我们都是直接写函数,直接调用,但是发现JS中也有new关键字,那么new关键字作为创建对象的关键字,给我们的感觉就是在JS中可以定义一个类,然后用new创建对象,那么在JS中如何做呢?我们先看如下案例,下面的案例是写一个简单的喷泉效果的. window.onload = function(){ // 创建一个画布对象var canvas = document.createElement("canvas");// 设置大小

【转知乎】如何学习js(http://www.zhihu.com/question/21064817)

首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门. 谈不上经验,都是一些教训. 这个时候有人要说,“靠,你丫半桶水,凭啥教我们”.您先别急着骂,先听我说. 你叫一个大学生去教小学数学,不见得比一个初中生教得好.因为大学生早已经过了那个阶段,都忘记自己怎么走过来的了.而对于初中生,刚好走过那个阶段,对自己怎么走过来的还记忆犹新,或者还有一些自己的总结.比如,很多高手觉得那本犀牛书入门很好,他们觉得太简单了,但以我的经验来看,它不是入门的最好选择. 先说说学js的条件 论条件,咱

HyperLedger Fabric 学习思路分享

HyperLedger Fabric 学习思路分享 HyperLedger Fabric最初是由Digital Asset和IBM公司贡献的.由Linux基金会主办的一个超级账本项目,它是一个目前非常流行并广为人知的区块链网络框架的实现方案.作为一种基于模块化架构开发应用程序或解决方案的基础,HyperLedger Fabric支持如共识和会员服务等即插即用的组件,它的设计初衷是支持不同组件的可插拔实现,并适应整个经济生态系统的复杂性和高精度性.HyperLedger Fabric利用容器技术运

好程序员web前端学习路线分享jQuery学习技巧

好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! 1.关于页面元素的引用 通过jquery的$引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方

好程序员前端学习路线分享模拟JavaScript中面向对象技术

好程序员前端学习路线分享模拟JavaScript中面向对象技术,在C#和Java语言中,面向对象是以类的方式实现的,特别是继承这个特性,类的方式继承表现出了强大的功能,而且也易于学习.JavaScript不是纯的面向对象的语言,而是基于对象的语言,对象的继承是以原型函数的形式继承的,很多初学者刚开始接触的时候不太理解,但是JavaScript这种以原型函数的形式实现面向对象技术,不仅是可行的,而且还为面向对象技术提供了动态继承的功能,本文主要讨论了JavaScript的面向对象技术.?一.原型对

好程序员web前端学习路线分享css模块化方案

好程序员web前端学习路线分享css模块化方案,这篇文章主要介绍了css模块化方案,css的模块化方案可能和js的一样多,下面简单介绍几种主要的模块方案,非常具有实用价值,需要的小伙伴可以参考下. css的模块化方案可能和js的一样多,下面简单介绍几种主要的模块方案.oocss面对对象的规则,主要的原则是两种:分离结构和外观,分离容器和内容.名词解释1.分离结构和外观:增加可重复的设计单元,同时去推进产品和ui对这方面的思考,比如下面的css使用时对象模式的命名和模块化规则.2.分离容器和内容:

好程序员web前端学习路线分享了解AJAX是什么

好程序员web前端学习路线分享了解AJAX是什么首先是服务器 什么是服务器:咱们的页面来源于服务器:实例(在phpnwo上面存放一个页面), 咱们把页面放在互联网的服务器上,就有了自己的网站了. 1.异步同步 生活中的同步: 生活中的异步: 在JavaScript语言中,同步和异步的概念刚好相反. 这JavaScript中同步就是:你不执行完上面的代码,那么下面的代码你就别执行:一步一步执行,这就是同步. 异步就是可以一块执行的代码: 进程的概念 进程≠程序 程序从开始到结束的一次执行过程叫做进

好程序员web前端学习路线分享前端基础面试题

好程序员web前端学习路线分享前端基础面试题,希望对大家有所帮助. 1.HTML语义化的理解? 答案:HTML语义化就是让页面的内容结构化,便于对浏览器.搜索引擎解析:在没有样式CSS的情况下也以一种文档格式显示,并且是容易阅读的:搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO:使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解. 2.父元素透明,但是又不影响子元素的透明度怎么实现? 答案:方法一:用rgba 方法二:再加上一层与父元素同级的div装载子元素,定位到子元