購物車怎麽做見代碼

/購物車 (數組版本)
(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>

學習js分享