华山资源网

工作中常用js功能汇总
网络编程 2024/11/15 佚名
3 1

一、javascript 中防止重复点击、防止点击过快

防止重复点击可以添加一个开关,让这个开关默认为 true，第一次点击将其变为 false,点击事件的执行需要判断这个开关是否为 true，为 true 执行,false 不执行。例子如下：

var isclick= true;
function click(){
 if(isclick){
  isclick = false;
  //下面添加需要执行的事件
  ...
 }

如果只是防止点击过快，还可以设置定时器，在一定时间后，自动将开关变为 true，下面例子就是在 500 毫秒后，开关自动变为 true。

var isclick= true;
function click(){
 if(isclick){
  isclick= false;
  //下面添加需要执行的事件
   ...

  //定时器
  setTimeout(function(){
   isclick = true;
  }, 500);
 }

二、jquery 实现 60 秒倒计时

方法一：

 var time = 60;
//倒计时
function getRandomCode() {
 if (time === 0) {
  time = 60;
  return;
 } else {
  time--;
  $('#time i').text(time);
 }
 setTimeout(function() {
  getRandomCode();
 },1000);

方法二：

var timeClock;
function sendCode() {
 var timer_num = 60;
 timeClock=setInterval(function(){
  timer_num--;
  $('.clock').html(timer_num);

  if (timer_num == 0) {
   clearInterval(timeClock);
   $('.clock').html(60);
  }
 },1000)

三、获取 URL 传输参数（支持中文）

function getQueryString(name) {
 var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
 var r = window.location.search.substr(1).match(reg);
 if (r != null) {
  return decodeURI(r[2]);
 }
 return null;
}
//调用方法
GetQueryString("参数名")

四、Jq 获取 from 表单数据

function getFromData(id) {
 if (id == undefined) {
  id = "form"
 }
 var data = {};
 var t = $(id).serializeArray();
 $.each(t, function() {
  data[name = this.name] = this.value;
 });
 return data;
}

调用方法：

var userData. = getFromData();
userData.表单name值 //获取值

五、设置，获取，清空 Cookie

// 设置cookies

function setCookie(name, value) {
 var exp = new Date();
 exp.setTime(exp.getTime() + 60 * 60 * 1000);
 document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
}

//读取cookies
function getCookie(name) {
 var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

 if (arr = document.cookie.match(reg))

  return unescape(arr[2]);
 else
  return null;
}

// 清楚所有cookies
function clearCookie() {
 var keys = document.cookie.match(/[^ =;]+("htmlcode">



//时间戳转换方法 date:时间戳数字
function formatDate(date) {
 var date = new Date(date);
 var YY = date.getFullYear() + '-';
 var MM = (date.getMonth() + 1 < 10 " "+hh + mm + ss;
}






七、canvas 图片下载(兼容各浏览器)





// 保存成png格式的图片
 document.getElementById("save").onclick = function () {
  var canvas = document.getElementById("canvas");
  if (window.navigator.msSaveOrOpenBlob) {//ie浏览器
   var imgData = canvas.msToBlob();
   var blobObj = new Blob([imgData]);
   window.navigator.msSaveOrOpenBlob(blobObj, "专家认证二维码.png");
  } else {//谷歌火狐浏览器
   downLoad(canvas.toDataURL("image/png"));
  }
 }

 // 下载图片
 function downLoad(url) {
  var oA = document.createElement("a");
  oA.download = '专家认证二维码';// 设置下载的文件名，默认是'下载'
  oA.href = url;
  oA.className = "qrcode"
  document.body.appendChild(oA);
  oA.click();
  oA.remove(); // 下载之后把创建的元素删除
 }






八、数字，金额格式互转正则表达式





<input type="text" placeholder="请输入" oninput = "checkInput(this)">






input 输入实时判断输入为金额格式





 function checkInput(obj) {
  var t = obj.value.charAt(0);
  obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
  obj.value = obj.value.replace(/^[0]+[0-9]*$/gi, ""); //第一位数字不能为0
  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'); //只能输入两个小数
  if (t == '-') {
   obj.value = '-' + obj.value;
  }
 }






数字转金额格式,保留两位小数点 例：将 1234567 转换为 1,234,567.00





 //s是数字，n是小数点位数
 function fmoney(s, n) {
 n = n > 0 && n <= 20 "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
 var l = s.split(".")[0].split("").reverse(),
 r = s.split(".")[1];
 t = "";
 for (i = 0; i < l.length; i++) {
  t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length "," : "");
 }
 return t.split("").reverse().join("") + "." + r;
}






金额格式转数字 例：将 1,234,567.00 转换为 1234567.00





function moneyToNumValue(val) {
 var num = val.trim();
 var ss = num.toString();
 if (ss.length == 0) {
  return "0";
 }
 return ss.replace(/,/g, "");
}






九、canvas 图片背景设置为白色或透明





 var canvas = document.getElementById("canvas");
 var imageData = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < imageData.data.length; i += 4) {
   // 当该像素是透明的，则设置成白色
   if (imageData.data[i + 3] == 0) {
    imageData.data[i] = 255;
    imageData.data[i + 1] = 255;
    imageData.data[i + 2] = 255;
    imageData.data[i + 3] = 255;
   }
  }
  canvas.getContext("2d").putImageData(imageData, 0, 0);
  var img = canvas.toDataURL("image/jpeg");
  img = img.substring(img.indexOf(',') + 1);
  for (var i = 0; i < imageData.data.length; i += 4) {
   // 当该像素是白色的，则设置成透明
   if (imageData.data[i] == 255) {
    imageData.data[i] = 0;
    imageData.data[i + 1] = 0;
    imageData.data[i + 2] = 0;
    imageData.data[i + 3] = 0;
   }
  }
  canvas.getContext("2d").putImageData(imageData, 0, 0);






十、常用的正则表达式





//手机号正则
var reg = /^1[0-9]{10}$/;

//身份证号（18位）正则
var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

// 邮箱正则
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;

//调用方法
!reg.test(phone) //表示不符合手机号正则表达式






十一、JavaScript 获取完整当前域名





window.location.protocol+"//"+window.location.host; // 返回https://mp.csdn.net
window.location.host; //返回url 的主机部分，例如：mp.csdn.net
window.location.hostname; //返回mp.csdn.net
window.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏)
window.location.pathname; //返回/a/index.php或者/index.php
window.location.protocol; //返回url 的协议部分，例如： http:，ftp:，maito:等等。
window.location.port //url 的端口部分，如果采用默认的80端口，那么返回值并不是默认的80而是空字符






十二、base64 图片压缩





//压缩base64方法
function dealImage(base64, w, callback) {
 var newImage = new Image();
 var quality = 0.6; //压缩系数0-1之间
 newImage.src = base64;
 newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要
 var imgWidth, imgHeight;
 newImage.onload = function() {
 imgWidth = this.width;
 imgHeight = this.height;
 var canvas = document.createElement("canvas");
 var ctx = canvas.getContext("2d");
 if (Math.max(imgWidth, imgHeight) > w) {
 if (imgWidth > imgHeight) {
 canvas.width = w;
 canvas.height = w * imgHeight / imgWidth;
 } else {
 canvas.height = w;
 canvas.width = w * imgWidth / imgHeight;
 }
 } else {
 canvas.width = imgWidth;
 canvas.height = imgHeight;
 quality = 0.6;
 }
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
 var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
 callback(base64); //必须通过回调函数返回，否则无法及时拿到该值
 }
}







以上就是工作中常用js的汇总的详细内容，更多关于常用js的汇总的资料请关注其它相关文章！
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com