工作中常用js功能汇总


Posted in Javascript onNovember 07, 2020

一、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(/[^ =;]+(?=\=)/g);
 if (keys) {
  for (var i = keys.length; i--;) {
   document.cookie = keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString(); //清除当前域名下的,例如:m.kevis.com
   document.cookie = keys[i] + '=0;path=/;domain=' + document.domain + ';expires=' + new Date(0).toUTCString(); //清除当前域名下的,例如 .m.kevis.com
   document.cookie = keys[i] + '=0;path=/;domain=kevis.com;expires=' + new Date(0).toUTCString(); //清除一级域名下的或指定的,例如 .kevis.com
  }
 }
}

六、js 转换时间戳-转换成 yyyy-MM-dd HH:mm:ss

//时间戳转换方法 date:时间戳数字
function formatDate(date) {
 var date = new Date(date);
 var YY = date.getFullYear() + '-';
 var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
 var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
 var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
 var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
 var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
 return YY + MM + DD +" "+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 ? n : 2;
 s = parseFloat((s + "").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的汇总的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
javascript类型转换使用方法
Feb 08 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
详解JS函数防抖
Jun 05 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 #Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 #Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 #Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 #Javascript
详解datagrid使用方法(重要)
Nov 06 #Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 #Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 #Javascript
You might like
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
行政专员岗位职责
2014/01/02 职场文书
安全事故检讨书
2014/01/18 职场文书
综治工作心得体会
2014/09/11 职场文书
员工培训协议书
2014/09/15 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android