思享工具箱

JS几个常用的工具函数

摘要：
项目中的JS将不可避免地被重用，因此可以将其提取到Java等工具类中。以下是一些常见的函数：1。日期处理函数将日期返回到以指定格式处理的字符串：functionFormat｛vard=now；varzero=function｛if（！'AM'：'PM'；case'Z'：return.toUTCString（）.match；//Returnquotedstringwiththesurroundingquotesremovedfault:return$0。substr；}}）；}；用法：vard=newDate（）//如果需要，可以将Date参数传递到警报中；2.全局处理null值或“”的函数，如果它们为null或“”，则返回。

　　项目中JS也不可避免会出现重用，所以可以像Java一样抽成工具类，下面总结了几个常用的函数:

1.日期处理函数

　　将日期返回按指定格式处理过的字符串:

function Format(now,mask)
    {
        var d = now;
        var zeroize = function (value, length)
        {
            if (!length) length = 2;
            value = String(value);
            for (var i = 0, zeros = ''; i < (length - value.length); i++)
            {
                zeros += '0';
            }
            return zeros + value;
        };
     
        return mask.replace(/"[^"]*"|'[^']*'|(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])1?|[lLZ])/g, function ($0)
        {
            switch ($0)
            {
                case 'd': return d.getDate();
                case 'dd': return zeroize(d.getDate());
                case 'ddd': return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()];
                case 'dddd': return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()];
                case 'M': return d.getMonth() + 1;
                case 'MM': return zeroize(d.getMonth() + 1);
                case 'MMM': return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()];
                case 'MMMM': return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()];
                case 'yy': return String(d.getFullYear()).substr(2);
                case 'yyyy': return d.getFullYear();
                case 'h': return d.getHours() % 12 || 12;
                case 'hh': return zeroize(d.getHours() % 12 || 12);
                case 'H': return d.getHours();
                case 'HH': return zeroize(d.getHours());
                case 'm': return d.getMinutes();
                case 'mm': return zeroize(d.getMinutes());
                case 's': return d.getSeconds();
                case 'ss': return zeroize(d.getSeconds());
                case 'l': return zeroize(d.getMilliseconds(), 3);
                case 'L': var m = d.getMilliseconds();
                    if (m > 99) m = Math.round(m / 10);
                    return zeroize(m);
                case 'tt': return d.getHours() < 12 ? 'am' : 'pm';
                case 'TT': return d.getHours() < 12 ? 'AM' : 'PM';
                case 'Z': return d.toUTCString().match(/[A-Z]+$/);
                // Return quoted strings with the surrounding quotes removed
                default: return $0.substr(1, $0.length - 2);
            }
        });
    };

用法：

    var d = new Date();//Date有需要参数可以传入
    alert(Format(d,"yyyy-MM-dd"));

2.全局处理null值或者''的函数，如果为null或者''返回-。如果传入第二个参数，表示截取指定长度的字符串

/**
 * 一个值如果是null或者''返回-
 * @param value 需要处理的值
 * @param length 需要截取的字符的长度的值,未指定的时候返回全部
 * @returns {*} 处理过的值
 */
function replaceNull(value,length) {
    //判断截取的值是否为空
    if(value == null || value==undefined || value == "" || value=='undefined'){
        return "-";
    }
    //判断长度是否为空
    if(length == null || length == ''){
        return value;
    }
    return value.toString().substr(0,length);
}

用法：

    alert(replaceNull());//  -
    alert(replaceNull('2018-05-03',7));//   2018-05

3.正则表达式实现trim()去掉开始和结尾的空格

    function trimStr(str) {
        return str.replace(/(^s*)|(s*$)/g,"");
    }

　　注意:关于去掉两头空格，jquery库提供了$.trim()方法

$.trim("   xxxxxxxxx   ")

 4.使用正则表达式验证数字

/**
* 校验只要是数字（包含正负整数，0以及正负浮点数）就返回true
**/

function isNumber(val){

    var regPos = /^d+(.d+)?$/; //非负浮点数
    var regNeg = /^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
    if(regPos.test(val) || regNeg.test(val)){
        return true;
    }else{
        return false;
    }

}

/**
* 校验正负正数就返回true
**/

function isIntNum(val){
    var regPos = / ^d+$/; // 非负整数
    var regNeg = /^-[1-9][0-9]*$/; // 负整数
    if(regPos.test(val) || regNeg.test(val)){
        return true;
    }else{
        return false;
    }
}

 5.休眠函数(模拟Thread.sleep()) 

    //参数n为休眠时间，单位为毫秒:    
    function sleep(n) {
        var start = new Date().getTime();
        console.log('休眠前：' + start);
        while (true) {
            if (new Date().getTime() - start > n) {
                break;
            }
        }
        console.log('休眠后：' + new Date().getTime());
    }
    sleep(4000);

6.  ajax提交表单的方法，也就是封装一个工具类，以ajax的方式提交表单,并且在表单成功之后做一些事情

JS函数:(重写表单的submit函数即可)

　　下面的第二个参数的设计是为了有时候我们需要提交完自定义做一些操作，有时不需要。

function initWindowForm(id, successoperation) {
    if (!id) {
        return;
    }
    
    $('#' + id).unbind("submit");
    
    $('#' + id).submit(function() {
        // 验证所有的必填字段
        var isValidated = true;
        $(this).find(".required").each(function() {
            if (!$(this).val()) {
                isValidated = false;
            }
        })
        if (!isValidated) {
            alert("请检查所有必填字段");
            return false;
        }
        
        // 异步提交数据
        $.post($('#' + id).attr('action'), $('#' + id).serialize(), function(response) {
            if (response && response.msg) {
                alert(response.msg);
                // 第二个参数为成功之后的处理
                if (successoperation) {
                    successoperation();
                }
            } else {
                alert("未知信息");
            }
        });

        // 阻止冒泡，防止刷新
        return false;
    });
}

后台回传到前台是一个map，msg是里面处理完的信息，如下java代码:

工具类代码:

package cn.xm.exam.utils.system;

import java.util.HashMap;
import java.util.Map;public class SystemUtils {

    private SystemUtils() {
        throw new AssertionError();
    }public static Map<String, Object> generateSuccessMap(String msg) {
        return generateMap(true, msg);
    }

    public static Map<String, Object> generateFailedMap(String msg) {
        return generateMap(false, msg);
    }

    private static Map<String, Object> generateMap(boolean successed, String msg) {
        Map<String, Object> result = new HashMap<>();
        result.put("success", successed);
        result.put("msg", msg);

        return result;
    }

}

action层代码:

    public String add() {
        if (operationcharge == null) {
            response = SystemUtils.generateFailedMap("operationcharge is null");
            return "json";
        }

        operationcharge.setCreator(SystemUtils.getCurrentUseridcard());
        operationcharge.setCreatorfullname(SystemUtils.getCurrentUserfullname());
        operationcharge.setCreatedate(new Date());

        operationChargeService.save(operationcharge);

        response = SystemUtils.generateSuccessMap("保存成功");
        return "json";
    }

 HTML代码:(form要写上action)

<script>
    $(function() {
        initWindowForm("addOperationForm");
    })
</script>
<form action="operation_add.do" id="addOperationForm">
                            <div class="input-group el_modellist" role="toolbar">
                                <input type="submit" class="btn btn-info" value="保存"/>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="button" class="btn btn-danger" value="取消" onclick="javascript:history.back(-1);"/>
                            </div>
                            
                            <div class="input-group el_modellist" role="toolbar">
                                <span class="el_spans">公司部门名称<span class="requiredStart">*</span>：</span>
                                <input type="text" class="form-control el_modelinput required" name="operationcharge.departmentname"/>
                                
                                <span class="el_spans">公司部门专业<span class="requiredStart">*</span>：</span>
                                <input type="text" class="form-control el_modelinput required" name="operationcharge.departmentmajor"/>
                            </div>
</form>

:补充用上面的实现保存和保存并继续

　　保存并继续不做任何操作，保存之后有可能是需要关闭模态框或者进行页面跳转，所以做如下修改:

<form action="operation_add.do" id="addOperationForm">
                            <div class="input-group el_modellist" role="toolbar">
                                <input type="submit" class="btn btn-info" value="保存并继续" onclick="initWindowForm('addOperationForm');"/>
                                &nbsp;&nbsp;
                                <input type="submit" class="btn btn-info" value="保存" onclick="submitAndForward('addOperationForm', '/Exam/view/ownercharge/operation/listOperation.jsp')"/>
                                &nbsp;&nbsp;
                                <input type="button" class="btn btn-danger" value="取消" onclick="javascript:history.back(-1);"/>
                            </div>
                            
                            <div class="input-group el_modellist" role="toolbar">
                                <span class="el_spans">公司部门名称<span class="requiredStart">*</span>：</span>
                                <input type="text" class="form-control el_modelinput required" name="operationcharge.departmentname"/>
                                
                                <span class="el_spans">公司部门专业<span class="requiredStart">*</span>：</span>
                                <input type="text" class="form-control el_modelinput required" name="operationcharge.departmentmajor"/>
                            </div>
</form>

保存的函数如下: 完成之后跳转页面

// 保存之后跳转
function submitAndForward(id, url) {
    initWindowForm(id, function(){
        window.location.href = url;
    });
}

　　这里需要注意的是按钮的类型为submit，同时有onclick事件，所以会先触发click事件再进行submit。

 7.验证数组是否有重复元素

　　对数字数组，字符串数组都有效。

function hasRepeatValue(a) {
        return /(x0f[^x0f]+)x0f[sS]*1/.test("x0f" + a.join("x0fx0f") + "x0f");
    }

8.JS提取身份证中的性别和出生日期信息

function getIdcardData(){
   var ido=document.getElementById('idCardNumberHandle');//身份证号input元素的ID
   var bd=document.getElementById('birthdayHandle');
   var sex=document.getElementById('sexHandle');
   if(!/^d{6}((?:19|20)((?:d{2}(?:0[13578]|1[02])(?:0[1-9]|[12]d|3[01]))|(?:d{2}(?:0[13456789]|1[012])(?:0[1-9]|[12]d|30))|(?:d{2}02(?:0[1-9]|1d|2[0-8]))|(?:(?:0[48]|[2468][048]|[13579][26])0229)))d{2}(d)[xXd]$/.test(ido.value)){
      alert('身份证号非法.');
      return;
   }
   bd.value=(RegExp.$1).substr(0,4)+'-'+(RegExp.$1).substr(4,2)+'-'+(RegExp.$1).substr(6,2);//设置出生日期
   ex.value=(parseInt(ido.value.charAt(ido.value.length-2))%2==0?'女':'男');//设置性别
}

身份证号 倒数第二位是性别，奇数为男，偶数为女

9.  JS格式化数字，保留指定位数或者按百分比格式化数字

var NumberUtils = {
    toFixedDecimal : function(value, scale) {
        var defaultValue = 0.0;

        if (!value || isNaN(parseFloat(value))) {
            value = defaultValue;
        }

        if (!scale) {
            scale = 2;
        }

        value = parseFloat(value);
        return value.toFixed(scale);
    },

    toFixedDecimalWithPercent : function(value, scale) {
        value = NumberUtils.toFixedDecimal(value, 10);

        if (!scale) {
            scale = 2;
        }

        value = parseFloat(value * 100);
        return value.toFixed(scale) + "%";
    }
};

测试代码:

console.log(NumberUtils.toFixedDecimal("1.526885"));
console.log(NumberUtils.toFixedDecimal(1.526885, 5));
console.log(NumberUtils.toFixedDecimalWithPercent(1.526885, 5));

结果:

JS几个常用的工具函数第1张

10.   格式化相同name或class的checkbox值，有时候我们希望通过逗号连接多个值

function serializeCheckboxValuesByName(name, spliter) {
    if (!spliter) {
        spliter = ",";
    }
    
    return getSerializeCheckboxValues("[name='"+name+"']:checked", spliter);
}

function serializeCheckboxValuesByClass(clazz, spliter) {
    if (!spliter) {
        spliter = ",";
    }
    
    return getSerializeCheckboxValues("." + clazz + ":checked", spliter);
}

function getSerializeCheckboxValues(selector, spliter) {
    var values = [];
    $(selector).each(function() {
        values.push($(this).val());
    });
    
    if (values.length > 0) {
        return values.join(spliter);
    }
    
    return "";
}

标签：#js代码#case工具#submit#js | 浏览：166 | 发布日期：

免责声明：文章转载自《JS几个常用的工具函数》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇关于main函数微信小程序实现给循环列表添加点击样式实例下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

iOS 中的 HotFix 方案总结详解

相信HotFix大家应该都很熟悉了，今天主要对于最近调研的一些方案做一些总结。iOS中的HotFix方案大致可以分为四种： WaxPatch(Alibaba) Dynamic Framework(Apple) React Native(Facebook) JSPatch(Tencent) WaxPatch WaxPatch是一个通过Lua语言编写的iO...

GSAP JS基础教程--使用缓动函数

今天来了解一下缓动easeing函数。 开始，如果你还没有GSAP的类包，可以到GreenSock的官网去下载最新版本的类包，或者直接点击这里​来下载 学习之前，先来准备一下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/...

js截取指定长度字符

Code/// <summary> /// 截取指定长度的（中英文）字符 /// </summary>function curStr(str,length) {     var position=0;     var result=[];     for (var i = 0; i < str.length; i++)   ...

【QML 动态对象】使用JS中的语句动态创建和销毁组件

QML 除了使用 Loader，还支持使用 JavaScript 动态创建/销毁对象，有两种方式动态创建对象： 使用 Qt.createComponent() 动态创建一个组件对象，然后使用 Component 的 createObject() 方法创建对象。 使用 Qt.createQmlObject() 从一个 QML 字符串直接创建一个对象。 假...

移动端——JS（一）

javascript(简称js)语言在移动前端可以说必不可少，许多效果都是和js相关的，包括现在移动端的一些框架：jqmobi、jqtouch、sencha touch、jquerymobile等等。都是基于js编写的。 暂时不讨论这些框架，主要讨论一下部分常用的js事件在移动端的使用。举几个例子： 1、隐藏地址导航栏： <script> /...

JS DOM元素

// 为element增加一个样式名为newClassName的新样式 functionaddClass(element, newClassName) { var value =element.className; element.className = value + " " +newClassName; } var bo...

最新文章

随机推荐

思享工具箱导航