js中常用方法

Xu_Yang.

已于 2023-08-24 14:29:34 修改

阅读量457

点赞数 1

文章标签： javascript 前端 html

于 2023-04-12 09:26:16 首次发布

本文链接：https://blog.csdn.net/strugglingxuyang/article/details/130099027

版权

这篇文章展示了如何在HTML页面中通过JavaScript从后端获取数据，包括时间格式化函数，处理日期和时间的显示。此外，还演示了如何使用Ajax进行异步数据请求，动态渲染select多选框，以及进行DOM操作如元素的显示/隐藏和按钮禁用。另外，还包括了一个金额格式化的函数，确保输入金额的正确格式。

摘要由CSDN通过智能技术生成

获取后端通过Model传过来的数据

// 需要在html页面编写后，可在引用的js中直接使用声明的变量
<script type="text/javascript" th:inline="javascript">
    var signType = [[${signType}]];
</script>

时间格式化为yyyy-MM-dd

function dateFormat(value) {
    if (value != null) {
        var date = new Date(value);
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return date.getFullYear() + "-" + month + "-" + currentDate;
    }
}

时间格式化为yyyy-MM-dd HH:mm:ss

function dateFormat(value) {
    if (value != null) {
        var date = new Date(value);
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hoursDate = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutesDate = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var secondsDate = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        return date.getFullYear() + "-" + month + "-" + currentDate+ ' ' + hoursDate + ':' + minutesDate + ':' + secondsDate;
    }
}

DIV展示与隐藏

$("#signMethodDiv").hide();
$("#signMethodDiv").show();

按钮点击后指定时间内禁用

// 点击后禁止按钮
document.getElementById("exportButton").disabled = true;
// 设置为2秒后恢复按钮点击
setTimeout(function(){
   document.getElementById("exportButton").disabled = false;
}, 2000);

读取后端传输的集合，渲染给前端的select多选框，并实现全选

$.ajax({
        cache: true,
        type: "POST",
        url: "url",
        data: {"channelCode": channelCode},
        async: false,
        error: function (request) {
            parent.layer.alert("Connection error");
        },
        success: function (data) {
            if (data.code == 0) {
                $("#channelStoreNoList").html("");
                for (var i = 0; i < data.storeListArray.length; i++) {
                    var value = JSON.stringify(data.storeListArray[i])
                    var store = data.storeListArray[i].store_name;
                    var text = store + "(" + data.storeListArray[i].channel_store_no + ")";
                    $("#channelStoreNoList").append("<option value='" + value + "'>" + text + "</option>");
                }
                //使用refresh方法更新UI以匹配新状态。
                $('#channelStoreNoList').selectpicker('refresh');
                //默认全选
                $('#channelStoreNoList').selectpicker('selectAll');
                //render方法强制重新渲染引导程序 - 选择ui。
                $('#channelStoreNoList').selectpicker('render');
            } else {
                parent.layer.alert(data.msg)
            }
        }
    })

效果如下

在这里插入图片描述

JS根据Select的Option值删除或添加

// 删除option值为1的选项
function smsRemoveOptionType() {
    $("#smsFlag option[value='1']").remove();
}

// 判断是否存在值为1的选项 大于0则为存在，小于0则添加，可以防止重复添加相同的选项
// alert有助于调试，之后可以删除或注释
function smsAddOptionType() {
    // 添加发送短信的option
    var sms = $("#smsFlag").find("option[value='1']");
    if (sms.length > 0) {
        alert("存在")
    }else{
        $("#smsFlag").append("<option value='1'>发送</option>");
        alert("不存在")
    }
    
}

JS根据Select的Option全部数量及已选择数量决定全选框是否勾选

// 设置全选选择框状态
function setAllSelectCheckBoxStatus() {
    var select = document.getElementById('channelStoreNoList');
    var optionsCount =select.options.length;
    var selectedOptionsCount = 0;
    for (var i = 0; i < select.options.length; i++) {
        if (select.options[i].selected) {
            selectedOptionsCount++;
        }
    }
    if (optionsCount!==0&&(optionsCount===selectedOptionsCount)){
        $('#checkChannelStoreNoListStatus').prop('checked',true);
    }else {
        $('#checkChannelStoreNoListStatus').prop('checked',false);
    }
}

两位小数金额限制

function checkAmountFormat(obj) {
    obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
    obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字
    obj.value = obj.value.replace(/\.{2,}/g, ""); //只保留第一个, 清除多余的
    obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
}