工作中常用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 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
自己开发Dojo的建议框架
Sep 24 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
解决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/08/06 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
Python 文件处理注意事项总结
2017/04/10 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
医学护理毕业生自荐信
2013/11/07 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
经营目标管理责任书
2014/07/25 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
保险公司增员口号
2015/12/25 职场文书
如何基于python实现单目三维重建详解
2022/06/25 Python