您的位置:首页 > 其它

1:时间戳转换成年月日函数,2:url截取参数方法,3:弹窗自定义方法 4:点击按钮加入购物车

2016-08-11 14:44 846 查看
最近一直在使用vue.js来构建项目,先分享一下一些简单可复用的函数。

1:时间戳转换
Date.prototype.format = function(fmt){ //author: yumeiqiang
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"w+":'星期'+this.getDay(),
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
使用方法为 new Date(时间戳).format("yyyy-MM-dd  w hh:mm:ss")可随意在format函数中自定义添加

2:URL参数截取函数

var getUrl = {
getUrlParam: function (name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)
||[,""])[1].replace(/\+/g, '%20'))||null;
}
};
使用方法:假设URL链接为http://www.baidu.com?from=yu&id=13456
截取from的参数为 getUrl.getUrlParam('from')可得到yu

3:自定义弹窗

var alertFn = function (text) {//1秒倒计时
document.getElementById('alert1').style.display='block';
var time = 1;
document.getElementById('alert1').innerHTML=text;
Showalert(time);
};
var Showalert = function (time) {
setTimeout(function () {
time--;
if (time < 0) {
document.getElementById('alert1').style.display='none'
} else {
Showalert(time);
}
}, 1000);
};
使用方法:在html中标签例如 <div class='alert1' id='alert1'></div> id名称与上述中保持一致,然后自定义css弹窗样式与内容,
然后只需在需要使用弹窗的地方调用 alertFn()即可

4:点击按钮加入购物车

var cart = function($event){
var el=$event.currentTarget;
var tkId=el.getAttribute("data-id");
var name=el.getAttribute("data-name");
var price=el.getAttribute("data-price");
var img=el.getAttribute("data-img");
var reserved=el.getAttribute("data-order");
this.message++;
var product = {
'tkId': tkId,
'tkName': name,
'num':1,
'img':img,
'price': parseFloat(price),
'reserved': parseInt(reserved),
'pid': getUrl.getUrlParam('share') ? getUrl.getUrlParam('share') : 0
};
console.log(product.pid);
//添加购物车
var ShoppingCart = localStorage.getItem('ShoppingCart');
if(ShoppingCart==null||ShoppingCart==""){
//第一次加入商品
var jsonStr = {"productlist":[{"img":product.img,"tkId":product.tkId,"tkName":product.tkName,"num":product.num, "price":product.price, "reserved":product.reserved, "pid": product.pid}],
"totalNumber":product.num,"totalAmount":(product.price * product.num)};
localStorage.setItem("ShoppingCart", JSON.stringify(jsonStr));
console.log(JSON.stringify(jsonStr));
} else {
// add goods
var jsonStr = JSON.parse(ShoppingCart);
var productlist = jsonStr.productlist;
var result=false;
//查找购物车中是否有该商品
for(var i in productlist) {
if(productlist[i].tkId == product.tkId){
productlist[i].num++;
productlist[i].pid = product.pid;
jsonStr.totalNumber++;
jsonStr.totalAmount += parseFloat(product.price);
result = true;
}
}
if(!result){
//没有该商品就直接加进去
productlist.push({"img":product.img, "tkId":product.tkId, "tkName":product.tkName, "num":product.num, "price":product.price, "reserved":product.reserved, "pid": product.pid});
jsonStr.totalNumber++;
jsonStr.totalAmount += parseFloat(product.price);
}
//保存购物车
localStorage.setItem("ShoppingCart", JSON.stringify(jsonStr));
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: