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


    最近一直在使用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));
    }
    }
  • 相关阅读:
    linux 用tcpdump查看80端口访问有哪些IP
    yum-内网yum源服务器配置(CentOS6.5)
    linux 修改用户密码的几种方法
    ansible hosts文件编写,简单使用测试(普通用户、sudo用户、root用户登录权限测试)
    ansible 安装
    ansible教程
    iowait过高处理
    重装系统win10教程(激活系统、office下载、分区)
    Spingboot项目的创建与启动(基于IDEA)
    反射
  • 原文地址:https://www.cnblogs.com/yumeiqiang/p/5760903.html
Copyright © 2011-2022 走看看