zoukankan      html  css  js  c++  java
  • 好记性不如烂笔头,项目中常用js记录

         作为一个后端的coder,也或者随着自己的”年龄大“了,对于前端的一些js方法总不爱记,然而有时候要用起来就只记得个大概,往往造成在这个项目、那个项目里找,很不方便。那干脆把常用到的一些记录在这个博客里,目的也只有一个:方便自己以后查询而已。

    1、网站里常用的【回到顶部】功能。

    /**
    * JavaScript脚本实现回到页面顶部示例
    * @param acceleration 速度
    * @param stime 时间间隔 (毫秒)
    **/
    function gotoTop(acceleration, stime) {
        acceleration = acceleration || 0.1;
        stime = stime || 10;
        var x1 = 0;
        var y1 = 0;
        var x2 = 0;
        var y2 = 0;
        var x3 = 0;
        var y3 = 0;
        if (document.documentElement) {
            x1 = document.documentElement.scrollLeft || 0;
            y1 = document.documentElement.scrollTop || 0;
        }
        if (document.body) {
            x2 = document.body.scrollLeft || 0;
            y2 = document.body.scrollTop || 0;
        }
        var x3 = window.scrollX || 0;
        var y3 = window.scrollY || 0;
    
        // 滚动条到页面顶部的水平距离
        var x = Math.max(x1, Math.max(x2, x3));
        // 滚动条到页面顶部的垂直距离
        var y = Math.max(y1, Math.max(y2, y3));
    
        // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
        var speeding = 1 + acceleration;
        window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));
    
        // 如果距离不为零, 继续调用函数
        if (x > 0 || y > 0) {
            var run = "gotoTop(" + acceleration + ", " + stime + ")";
            window.setTimeout(run, stime);
        }
    }
    

    2、获取英文、数字、符号、汉字的字节长度

    /**
    * 获取英文、数字、符号、汉字的字节长度
    * @param s 要计算的字符串
    **/
    function getCharStringLength(s) {
        var l = 0;
        var a = s.split("");
        for (var i = 0; i < a.length; i++) {
            if (a[i].charCodeAt(0) < 299) {
                l++;
            } else {
                l += 2;
            }
        }
        return l;
    }
    

    3、截取字符串(中英文都能用)

    /**
     * js截取字符串,中英文都能用
     * @param str:需要截取的字符串
     * @param len: 需要截取的长度
     */
    function cutStr(str, len) {
        if (str == null)
            return "";
        var str_length = 0;
        var str_len = 0;
        str_cut = new String();
        str_len = str.length;
        for (var i = 0; i < str_len; i++) {
            a = str.charAt(i);
            str_length++;
            if (escape(a).length > 4) {
                //中文字符的长度经编码之后大于4
                str_length++;
            }
            str_cut = str_cut.concat(a);
            if (i == (str_len - 1) && str_length == len)
                return str_cut;
            if (str_length >= len) {
                str_cut = str_cut.concat("...");
                return str_cut;
            }
        }
        //如果给定字符串小于指定长度,则返回源字符串;
        if (str_length < len) {
            return str;
        }
    }
    

    4、字符串转Uniencode

    /**
     * @param text:需要转换的字符串
     */
    function uniencode(text) {
        text = escape(text.toString()).replace(/+/g, "%2B");
        var matches = text.match(/(%([0-9A-F]{2}))/gi);
        if (matches) {
            for (var matchid = 0; matchid < matches.length; matchid++) {
                var code = matches[matchid].substring(1, 3);
                if (parseInt(code, 16) >= 128) {
                    text = text.replace(matches[matchid], '%u00' + code);
                }
            }
        }
        text = text.replace('%25', '%u0025');
        return text;
    }
    

    5、Json格式日期转字符串日期

    /**
    * @param jsondate:需要转换的json日期
    * @param type: 需要截取的长度,空或“date”:2016-12-2,time:2016-12-2 15:26
    */
    function JsonDateToJSDate(jsondate,type) {
        var date = new Date(parseInt(jsondate.replace("/Date(", "").replace(")/", ""), 10));
        if (type=="" || type == "date")
            return getDate(date);
        else if(type=="time")
            return getTime(date);
    }
    
    function getDate(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        return year + "-" + month + "-" + day;
    }
    
    function getTime(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        return year + "-" + month + "-" + day + " " + hour + ":" + minute;
    }
    

    6、将JSON格式的时间/Date(2367828670431)/格式 转为正常的年-月-日 格式

    /**
    * 获取正常日期格式
    */
    function formatDate(NewDtime) {
        var dt = new Date(parseInt(NewDtime.slice(6, 19)));
        var year = dt.getFullYear();
        var month = dt.getMonth() + 1;
        var date = dt.getDate();
        var hour = dt.getHours();
        var minute = dt.getMinutes();
        var second = dt.getSeconds();
        return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
    }

    7、解决H5属性placeholder在一些不浏览器不兼容问题

    var JPlaceHolder = {
        //检测
        _check: function () {
            return 'placeholder' in document.createElement('input');
        },
        //初始化
        init: function () {
            if (!this._check()) {
                this.fix();
            }
        },
        //修复
        fix: function () {
            jQuery(':input[placeholder]').each(function (index, element) {
                var self = $(this), txt = self.attr('placeholder');
                if (!self.val()) {
                    self.wrap($('<div></div>').css({ position: 'relative', zoom: '1', border: 'none', background: 'none', padding: 'none', margin: 'none' }));
                    var pos = self.position(), h = self.outerHeight(), paddingleft = self.css('padding-left');
                    var holder = $('<span></span>').text(txt).css({ position: 'absolute', left: pos.left, top: pos.top, height: h, lineHeight: h + "px", paddingLeft: paddingleft, color: '#aaa' }).appendTo(self.parent());
    
                    self.focusin(function (e) {
                        holder.hide();
                    }).focusout(function (e) {
                        if (!self.val()) {
                            holder.show();
                        }
                    });
                    holder.click(function (e) {
                        holder.hide();
                        self.focus();
                    });
                }
            });
        }
    };
    //执行
    jQuery(function () {
        JPlaceHolder.init();
    });
    

    8、模拟后台获取前端参数

    /*
     * 模拟后台获取传递参数值
     */
    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
    /*
    * 使用例子
    * var Request = new Object();
    * Request = GetRequest();
    * var type = Request["type"];
    */
    

    9、货币格式化

    /*
     * 格式:¥100,100,00.00
     */
    function formatCurrency(num) {
        if (num == null) {
            var money = "¥0.00"
            return money;
        }
        num = num.toString().replace(/$|\,/g, '');
        if (isNaN(num))
            num = "0";
        var sign = (num == (num = Math.abs(num)));
        num = Math.floor(num * 100 + 0.50000000001);
        var cents = num % 100;
        num = Math.floor(num / 100).toString();
        if (cents < 10)
            cents = "0" + cents;
        for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
            num = num.substring(0, num.length - (4 * i + 3)) + ',' +
        num.substring(num.length - (4 * i + 3));
        return "¥" + (((sign) ? '' : '-') + num + '.' + cents);
    }
    

      暂时写到这里,后面有的继续补充。

  • 相关阅读:
    用Doxygen生成X3D的继承关系树
    FreeBSD 8.0候选版本RC2发布
    Mozilla Firefox, Apple Safari,Chrome等主流浏览器均开始WebGL支持
    关于企业管理信息系统
    [转]WebGL标准最新进展
    C++ + Irrlicht整一个东东?
    FreeWRL Windows Beta版本注记
    选择C++开发环境
    老人与老浏览器-李开复与成熟度最高的VRML浏览器SGI Cosmo
    WebGL概念及HTML5推广给X3D规范带来的新出路
  • 原文地址:https://www.cnblogs.com/unadmin/p/6126103.html
Copyright © 2011-2022 走看看