常用原生js自定义函数总结_javascript技巧

js获取日期函数

//获取当前时间日期
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);
}

js获取时间差函数

//获取时间差多少天
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+" 秒";
  }

js只自动刷新页面一次

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

ajax实例

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

实时获取窗口大小

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

js循环执行函数和定时执行函数

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

    alert("定时执行");
   } 

js获取get参数函数

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"));

js页面打印数组函数

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

  space = space || ' ';

  space2 = space2 || '     ';

  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);

 }

js打印json数据成数组形式输出在html

/** 输出空格函数 */
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);
}

js打印多维数组的数组长度函数

//获取多维数组的数量
  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);

  }

以上这篇常用原生js自定义函数总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js自定义函数
原生javascript、javascript 原生ajax、javascript原生代码、原生javascript插件、原生javascript做动画,以便于您获取更多的相关知识。

时间: 2024-08-01 15:49:15

常用原生js自定义函数总结_javascript技巧的相关文章

常用原生JS兼容性写法汇总_javascript技巧

就来总结一下简单的东西 备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了... ①添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 element.addEventListener(type, handler, false); }else if (element.attachEvent){//检测是否为IE级方法 ele

一些常用的JS功能函数代码_javascript技巧

复制代码 代码如下: //获取对象 function getObject(objectId,top) { doc = top?window.top.document:document; if(typeof(objectId)!="object" && typeof(objectId)!="function") { if(doc.getElementById && doc.getElementById(objectId)) { // W

浅谈几种常用的JS类定义方法_javascript技巧

// 方法1 对象直接量 var obj1 = { v1 : "", get_v1 : function() { return this.v1; }, set_v1 : function(v) { this.v1 = v; } }; // 方法2 定义函数对象 var Obj = function() { var v1 = ""; this.get_v1 = function() { return this.v1; }; this.set_v1 = function

一些常用的JS自定义函数整理

整理一些常用的js函数,希望对大家有所帮助. 1.dayin() 作用:将id为dayin的内容,新建页面并打印,可解决打印某页面中的部分内容的问题. 使用方法:将要打印的内容通过 <span id="dayin"></span>包含起来,然后在某个按扭中定义事件 <input type="button" onclick="dayin()" value="打印">   function da

瀑布流的实现方式(原生js+jquery+css3)_javascript技巧

前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的...  原生javascript版  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流-javascript</title> <

原生js实现模拟滚动条_javascript技巧

当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观. 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了.不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是本文的动机,本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条. 要求: 1.鼠标滚轮可以让滚动条工作,界面滚动 2.鼠标可以拖动滚动条并让界面滚动 3.页面resize时,滚动条根据页面尺寸变化,仍然可以工作

原生js实现autocomplete插件_javascript技巧

在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间,自己动手写写,看一些原生js的东西,根据自己的思路做插件,这样能提高水平. 说到autotemplete,好多人都用过,引用autotemplete.js,然后就可以实现在输入框输入值的时候提示下拉选项,类似于百度搜索框那种提示功能,下面就来说说自己的思路. 为输入框添加input事件 1.inpu

基于原生JS实现图片裁剪_javascript技巧

下面是我自己写的图片裁剪的功能介绍: 可以利用鼠标拖拉,产生裁剪框 可以改变裁剪框大小 点击确定,返回裁剪数据 原理 完成裁剪的方法有两种: 1.利用HTML5新增拖拽事件drag drop等 2.传统方法,利用鼠标事件,mousedown.mousemove等 在这里,我们采用方法2. 裁剪区域的形成 要进行裁剪首先要形成裁剪区域,这个裁剪区域的形成我们可以与鼠标移动的距离相关联.鼠标移动多远,裁剪区域就有多大.如下图: 如上图所示鼠标的横向移动距离与纵向移动距离共同组成了裁剪区域的宽和高.

原生js编写autoComplete插件_javascript技巧

最近有提关于下拉选项过多的时候,希望输入关键词,可以搜索内容的需求,但是之前项目太赶,所以也就没有来得及做,因为希望用原生js写一些内容,所以插件是采用了原生js写的思路如下第一步:fnInit实现初始化一些字段第二步:加载搜索框的div第三步:实现search功能,删除原节点并加载新节点第四步:点击或者回车的时候设置value 代码: autoComplete.js /** * @summary AutoComplete * @description 输入框自动检索下拉选项 * @versio