最近一直在使用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));
}
}

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

  1. js angular 时间戳转换成日期格式 年月日 yyyy-MM-dd

    昨天写项目,要把时间戳转换成日期格式发给后端 我就去网上找 看到的一些都不是我想要的 索性自己就写了一个如图 下面是angular 模式 $scope.getMyDate = function(str ...

  2. vue element-ui表格里时间戳转换成时间显示

    工作中遇到后台给的表格数据里时间是一个13位的时间戳,需要转换成时间显示在表格里, 可以用element-ui表格自带的:formatter函数,来格式化表格内容: // 时间戳转换成时间 // 使用 ...

  3. 将日期转换为指定的格式:比如转换成 年月日时分秒 这种格式:yyyy-MM-dd hh:mm:ss 或者 yyyy-MM-dd。总结下。

    可以为Date原型添加如下的方法: Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth() ...

  4. 时间戳转换成日期的js

    在项目开发过程中,我们常常需要把时间戳转换成日期.下面这个是我一直使用的js方法,希望能帮助到有需要的朋友.大家如果有更好的方法,请多多指教! js代码如下: //时间戳转换成日期 function ...

  5. unix时间戳转换成标准时间(c#)

    //---unix时间戳转换成标准时间(c#)---//     /*     string timeStamp = "1144821796";     DateTime dtSt ...

  6. C#将unix时间戳转换成.net的DateTime类型的代码

    下面的内容是关于C#将unix时间戳转换成.net的DateTime类型的内容. DateTime epoch = new DateTime(1970,1,1,0,0,0,0, DateTimeKin ...

  7. js中时间戳转换成时间格式

    js中时间戳转换成时间格式, // 时间戳转换成时间格式 var formatDate = function(date){ date = new Date(date); var y=date.getF ...

  8. Java-Runoob-高级教程-实例-时间处理:04. Java 实例 - 时间戳转换成时间

    ylbtech-Java-Runoob-高级教程-实例-时间处理:04. Java 实例 - 时间戳转换成时间 1.返回顶部 1. Java 实例 - 时间戳转换成时间  Java 实例 以下实例演示 ...

  9. C# 13位时间戳转换成标准时间C#代码

    原地址:https://www.cnblogs.com/yixuehan/p/5559244.html /// <summary> /// 时间戳转换成标准时间 /// </summ ...

随机推荐

  1. poj 1386 Play on Words(有向图欧拉回路)

    /* 题意:单词拼接,前一个单词的末尾字母和后一个单词的开头字母相同 思路:将一个单词的开头和末尾单词分别做两个点并建一条有向边!然后判断是否存在欧拉回路或者欧拉路 再次强调有向图欧拉路或欧拉回路的判 ...

  2. 面试准备 - C# 版本的树状数组

    树状数组 计算 任意连续N个值的和的时间复杂度为Log(n) 修改也是Log(n) 而普通数组修改是O(1) 计算和是O(n) 具体定义可以看这里:http://zh.wikipedia.org/zh ...

  3. easyui-datagrid行数据field原样输出html标签

    easyui-datagrid 绑定的行 field 原样输出html标签.处理效果如图: Html页面代码如下: ... <tr> <th field="id" ...

  4. ISTool5.3.1汉化版使用教程

    ISTool是帮助你创建由Jordan Russell制作的Inno Setup编译器脚本的工具.Inno是一个出色的编译器,即使对于某些专业的安装制作程序,它唯一的缺点就是它的脚本必须手动编写. 这 ...

  5. 机器学习&数据挖掘笔记_20(PGM练习四:图模型的精确推理)

    前言: 这次实验完成的是图模型的精确推理.exact inference分为2种,求边缘概率和求MAP,分别对应sum-product和max-sum算法.这次实验涉及到的知识点很多,不仅需要熟悉图模 ...

  6. 只用一行代码让你的ASP.NET MVC 跑起来

    只用一行代码让你的ASP.NET MVC 跑起来 MVC框架一直是企业开发绕不过去的东西,先是JavaEE的 Structs, 然后是 Spring MVC, 再到我们今天要讨论的ASP.NET MV ...

  7. Azure China (3) 使用Visual Studio 2013证书发布Cloud Service至Azure China

    <Windows Azure Platform 系列文章目录> 之前有很多网友询问我如何通过VS发布Cloud Service至Azure China,这里我专门写篇文章,给大家详细介绍下 ...

  8. rsync密码使用要注意的几个点

    1 客户端和服务端的密码文件不一样 服务端的密码文件格式是: 用户名:密码 比如: yejianfeng:123456   客户端的密码文件格式是: 密码: 比如 123456   所以如果一个机器即 ...

  9. OpenJudge2728:摘花生 解题报告

    2728:摘花生 总时间限制:  1000ms 内存限制: 65536kB 描述 Hello Kitty 想摘点花生送给她喜欢的米老鼠.她来到一片有网格状道路的矩形花生地(如下图),从西北角进去,东南 ...

  10. [python基础]关于装饰器

    在面试的时候,被问到装饰器,在用的最多的时候就@classmethod ,@staticmethod,开口胡乱回答想这和C#的static public 关键字是不是一样的,等面试回来一看,哇,原来是 ...