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)); } }
相关文章推荐
- mysql登录不了及修改密码
- android实现截屏功能代码
- 快排思想求给定序列中第k大的数
- ES6中的箭头函数的定义和调用方式
- 使用tableHeaderView的时候动态改变高度
- Mongo 3.X以上版本使用Robomongo无法查看Collections内容的问题解决
- 程序启动画面QSplashScreen类
- 通讯录(动态版本)
- 排序算法(一):冒泡算法的两种基本实现及改进
- 在简历中应用STAR法则
- c++编程出现 MFC error C3646: 未知重写说明符
- java代理模式
- 数学(矩阵乘法):HDU 4565 So Easy!
- postfix+sasl+dovecot
- 微信公众号里打开链接下载APP
- druid连接数据库加解密
- phpcms v9 下拉菜单 二级 三级子栏目调用方法
- jQueryUI datepicker 报错: TypeError: inst is undefined
- 一些命令行操作时候可以使用的快捷键
- bootstrap教程(二) —— 列表组listgroup