1. 最近一直在使用vue.js来构建项目,先分享一下一些简单可复用的函数。
  2.  
  3. 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函数中自定义添加
  4.  
  5. 2URL参数截取函数
  1. 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
  2.  
  3. 3:自定义弹窗
  1. 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()即可
  2.  
  3. 4:点击按钮加入购物车
  1. 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. Cocos2d-x 3.2 学习笔记(十六)保卫萝卜 游戏主循环与定时器

    保卫萝卜~想法一直存在于想法,实战才是硬道理!有想法就去实现,眼高手低都是空谈.   一.游戏主循环GameSchedule      主循环是游戏处理逻辑,控制游戏进度的地方,处理好主循环是很重要的 ...

  2. NIO的一坑一惑小记

    前言 不知不觉,已那么长时间没有更新东西了,说来真是汗颜啊.(主要是最近在技术上豁然开朗的感觉越来越少了-_-|||) 最近一直在学习Linux相关的东西.又一次接触到了I/O复用模型(select/ ...

  3. QT学习笔记6

    事件(event) 一般来说,使用Qt编程时,我们并不会把主要精力放在事件上,因为在Qt中,需要我们关心的事件总会发出一个信号.比如,我们关心的是QPushButton的鼠标点击,但我们不需要关心这个 ...

  4. 未能加载文件或程序集“System.Web.Http.WebHost, Version=4.0.0.0, ”或它的某一个依赖项。系统找不到指定的文件。

    一:错误提示 "未能加载文件或程序集"System.Web.Http.WebHost, Version=4.0.0.0, Culture=neutral, PublicKeyTok ...

  5. C#如何调用COM

    这章中描述的属性被用在创建和COM程序交互的程序中. 1.1  COMImport 属性 当被放在一个类上, COMImport 属性就把这个类标记为一个外部实现的COM 类.这样的一个类声明使得可以 ...

  6. Log4net 日志使用介绍

    概述 Log4net 有三个主要组件:loggers,appenders 和 layouts.这三个组件一起工作使得开发者能够根据信息类型和等级(Level)记录信息,以及在运行时控制信息的格式化和信 ...

  7. Socket开发框架之数据传输协议

    我在前面一篇随笔<Socket开发框架之框架设计及分析>中,介绍了整个Socket开发框架的总体思路,对各个层次的基类进行了一些总结和抽象,已达到重用.简化代码的目的.本篇继续分析其中重要 ...

  8. jquery子元素选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. SSH实例(6)

    在WebContent文件夹下新建query.jsp和save.jsp文件. query.jsp: <%@ page language="java" import=" ...

  10. Eclipse设置风格

    如果觉得Eclipse的颜色太刺眼,可以修改背景与字体颜色,方法如下: (1)到http://eclipsecolorthemes.org/下载主题文件,可以选择xml文件或者epf文件: (2)Ec ...