常用原生JavaScript自定义函数实用总结

作者：木棉时间：2026-10-30 16:58:52浏览：368

本文汇总了前端开发中常用的原生JavaScript自定义函数，涵盖日期获取、时间差计算、页面自动刷新、Ajax请求、窗口大小监听、定时与循环执行、URL参数解析以及多维数组打印等功能。提供完整代码示例，帮助开发者快速实现常见需求，提升开发效率。

日期与时间处理函数

在Web开发中，获取当前日期和时间是常见需求。以下代码展示了如何构建一个格式化后的日期时间字符串。通过实例化Date对象，分别提取年、月、日、时、分，并对小于10的数值进行补零处理，最终拼接成标准格式返回。


//获取当前时间日期
function CurentTime()
{
  var now = new Date();
  var year = now.getFullYear();    //年
  var month = now.getMonth() + 1;   //月
  var day = now.getDate();      //日
  var hh = now.getHours();      //时
  var mm = now.getMinutes();     //分
  var clock = year + "-";

  if(month < 10)
    clock += "0";

  clock += month + "-";

  if(day < 10)
    clock += "0";

  clock += day + " ";

  if(hh < 10)
    clock += "0";

  clock += hh + ":";
  if (mm < 10) clock += '0';
  clock += mm;
  return(clock);
}

计算两个时间点之间的差值通常需要将时间转换为毫秒数进行运算。该函数通过起始时间和结束时间的毫秒差，依次计算出相差的天数、小时数、分钟数和秒数。注意在计算剩余毫秒数时需使用取模运算，确保各时间单位准确无误。


//获取时间差多少天
function getLastTime()
  {
    var startTime=new Date("1996-5-11 00:00"); //开始时间
    var endTime=new Date();  //结束时间
    var lastTime=endTime.getTime()-startTime.getTime() //时间差的毫秒数

    //计算出相差天数
    var days=Math.floor(lastTime/(24*3600*1000))

    //计算出小时数
    var leave1=lastTime%(24*3600*1000)  //计算天数后剩余的毫秒数
    var hours=Math.floor(leave1/(3600*1000))
    //计算相差分钟数
    var leave2=leave1%(3600*1000)    //计算小时数后剩余的毫秒数
    var minutes=Math.floor(leave2/(60*1000))

    //计算相差秒数
    var leave3=leave2%(60*1000)   //计算分钟数后剩余的毫秒数
    var seconds=Math.round(leave3/1000)

    return " 相差 "+days+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒";
  }

页面刷新与Ajax请求

有时需要实现页面仅自动刷新一次的功能，例如在特定操作后刷新状态。此代码利用window.onload事件，检查URL中是否包含特定参数（如myurl）。若未包含，则重定向添加该参数；若已包含，则不再执行刷新逻辑，从而避免无限循环刷新。


//自动刷新页面一次后停止刷新
window.onload = function(){
  if(location.search.indexOf("?")==-1){
   location.href += "?myurl";
  }
  else{
   if(location.search.indexOf("myurl")==-1) location.href += "&myurl";
  }
}

使用jQuery库进行Ajax异步请求是前端开发的经典场景。示例展示了如何发起一个POST请求到指定URL，并传递数据。在请求成功后，通过fadeIn和fadeOut方法控制页面上成功与错误提示信息的显示与隐藏，提升用户体验。


$.ajax({
    type: "POST",
    url: "join.php",
    data: dataString,
    success: function(){
      $('.success').fadeIn(200).show();
      $('.error').fadeOut(200).hide();
    }
  });

窗口监听与定时器应用

监听窗口大小变化以动态调整布局是响应式设计的关键。通过绑定window的resize事件，可以在窗口尺寸改变时实时获取当前的窗口高度和宽度。这有助于根据屏幕尺寸动态调整页面元素的大小或位置。


$(window).resize(function(){ 
  var Height = $(window).height();
  var Width = $(window).width();
})

JavaScript提供了setInterval和setTimeout两种定时器机制。setInterval用于每隔指定时间间隔循环执行函数，适用于需要持续轮询的场景；setTimeout则用于在指定时间后仅执行一次函数，适用于延迟执行的任务。示例分别演示了这两种用法。


//循环执行，每隔3秒钟执行一次showalert（） 
  window.setInterval(showalert, 3000);
  function showalert()
  {
    alert("循环执行");
  }
  //定时执行，5秒后执行show()
  window.setTimeout(show,5000);
   function show()
   {

    alert("定时执行");
   }

URL参数解析与数组打印

解析URL中的GET参数是处理前端路由或查询条件的常用操作。该函数利用正则表达式匹配URL查询字符串中指定参数名的值，并通过unescape解码后返回。若未找到对应参数，则返回null，方便开发者进行后续逻辑判断。


function GetQueryString(name)
{
   var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
   var r = window.location.search.substr(1).match(reg);
   if(r!=null)return unescape(r[2]); return null;
}
alert(GetQueryString("参数名1"));

打印数组时，为了清晰展示结构，通常需要控制缩进。该函数接受数组及两个缩进参数，通过递归或循环遍历数组元素，并在输出时添加HTML换行和空格，实现格式化打印。注意处理缩进参数默认值，确保输出格式美观。


 /**
  * 打印数组
  * @param {[type]} arr  要打印的数组
  * @param {[type]} space 控制打印的缩进
  * @param {[type]} space2 控制打印的缩进2
  */
  function print_arr(arr, space, space2)
  {

  space = space || '&nbsp;';

  space2 = space2 || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';

  var str = "Array<br>"+space+"(<br>";

  for(var i=0; i<arr.length; i++)

  {

   if( Object.prototype.toString.call(arr[i]) == '[object Array]' )

   { //判断是否是数组，如果是，进行递归拼接

    str += space2 + '[' +i+"] => "+ print_arr(arr[i], space+'   ', space2+'   ');

   }

   else

   {

    str += space2 +'['+i+"] => "+ arr[i] +"<br>";

   }

  }

  str += space+")<br>";

  document.write(str);

 }

将JSON数据以数组形式打印到HTML页面，有助于调试数据结构。该函数遍历JSON对象或数组，将其键值对转换为可读的字符串格式，并插入到文档中。这对于查看复杂数据结构或API返回结果非常实用。


/** 输出空格函数 */
function blank(num) {
 var res = '';
 for (var i = 0; i < num; i++) {
  res += ' ';
 }
 return res;
}  

/** 计算JSON对象数据个数 */
function jsonLen(jsonObj) {
 var length = 0;
 for (var item in jsonObj) {
    length++;
 }
 return length;
}

/** 解析JSON对象函数 */
function printObj(obj) {
 // JSON对象层级深度
 deep = (typeof(deep)=='undefined') ? 0: deep;
 var html = "Array\n"; // 返回的HTML
 html += kong(deep) + "(\n";
 var i = 0; 
 // JSON对象，不能使用.length获取数据的个数，故需自定义一个计算函数
 var len = typeof(obj) == 'array' ? obj.length : jsonLen(obj);
 for(var key in obj){
  // 判断数据类型，如果是数组或对象，则进行递归
  // 判断object类型时，&&jsonLen(obj[key])是由于
  // 1、值（类似：email:）为null的时候，typeof(obj[key])会把这个key当做object类型
  // 2、值为null的来源是，数据库表中某些字段没有数据，查询之后直接转为JSON返回过来
  if(typeof(obj[key])=='array'|| (typeof(obj[key])=='object' && jsonLen(obj[key]) > 0) ){
   deep += 3;
   html += kong(deep) + '[' + key + '] => ';
   // 递归调用本函数
   html += printObj(obj[key],deep);
   deep -= 3;
  }else{
   html += kong(deep + 3) + '[' + key + '] => ' + obj[key] + '\n';
  }
  if (i == len -1) {
   html += kong(deep) + ")\n";
  };
  i++;
 }
 return html;
}

/** 向HTML页面追加打印JSON数据 */
function p_Obj(obj) {
 var div = document.getElementById('print-json-html');
 if (div != null) {
  document.body.removeChild(div);
 };
 var node = document.createElement("div");//创建一个div标签 
 node.id = 'print-json-html';
 node.innerHTML = '<pre>' + printObj(obj) + '</pre>';
 document.body.appendChild(node);
}

处理多维数组时，获取其长度可能需要特殊处理。该函数旨在计算多维数组的有效长度，可能涉及递归或特定遍历逻辑。通过正确处理嵌套结构，确保获取准确的元素数量，避免因直接调用length属性导致的错误结果。


//获取多维数组的数量
  function getArrNum(arr) {

    var eleNum = 0;

    if (arr == null) {

      return 0;

    }

    for (var i = 0; i < arr.length; i++) {

      for (var j = 0; j < arr[i].length; j++) {

        eleNum++;

      }

    }

    document.write(eleNum);

  }

以上分享的常用原生JavaScript自定义函数涵盖了前端开发中的多个常见场景，包括日期处理、异步请求、界面交互及数据打印等。希望这些代码示例能为开发者提供便利，欢迎参考并在实际项目中应用，如有问题可进一步交流探讨。

作者最新文章

JS合并多个数组的三种方法：concat、spread与flat

2026-11-05 17:39:45

JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString

2026-11-05 17:09:21

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36