前端设计师们最常用的JS代码汇总


Posted in Javascript onSeptember 25, 2016

逛社区时看到的文章,我修改调整了内容,如果大家觉得也有帮助 可以收藏下~

HTML5 DOM 选择器

// querySelector() 返回匹配到的第一个元素
var item = document.querySelector('.item');
console.log(item);

// querySelectorAll() 返回匹配到的所有元素,是一个nodeList集合
var items = document.querySelectorAll('.item');
console.log(items[0]);

阻止默认行为

// 原生js
document.getElementById('btn').addEventListener('click', function (event) {
  event = event || window.event;

  if (event.preventDefault){
    // w3c方法 阻止默认行为
    event.preventDefault();
  } else{
    // ie 阻止默认行为
    event.returnValue = false;
  }
}, false);

// jQuery
$('#btn').on('click', function (event) {
  event.preventDefault();
});

阻止冒泡

// 原生js
document.getElementById('btn').addEventListener('click', function (event) {
  event = event || window.event;
  if (event.stopPropagation){
    // w3c方法 阻止冒泡
    event.stopPropagation();
  } else{
    // ie 阻止冒泡
    event.cancelBubble = true;
  }
}, false);
// jQuery
$('#btn').on('click', function (event) {
  event.stopPropagation();
});

鼠标滚轮事件

$('#content').on("mousewheel DOMMouseScroll", function (event) { 
  // chrome & ie || // firefox
  var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1)); 
  
  if (delta > 0) { 
    // 向上滚动
    console.log('mousewheel top');
  } else if (delta < 0) {
    // 向下滚动
    console.log('mousewheel bottom');
  } 
});

检测浏览器是否支持svg

function isSupportSVG() { 
  var SVG_NS = 'http://www.w3.org/2000/svg';
  return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect; 
} 
// 测试
console.log(isSupportSVG());

检测浏览器是否支持canvas

function isSupportCanvas() {
  if(document.createElement('canvas').getContext){
    return true;
  }else{
    return false;
  }
}
// 测试,打开谷歌浏览器控制台查看结果
console.log(isSupportCanvas());

检测是否是微信浏览器

function isWeiXinClient() {
  var ua = navigator.userAgent.toLowerCase(); 
  if (ua.match(/MicroMessenger/i)=="micromessenger") { 
    return true; 
  } else { 
    return false; 
  }
}
// 测试
alert(isWeiXinClient());

jQuery 获取鼠标在图片上的坐标

$('#myImage').click(function(event){
  //获取鼠标在图片上的坐标 
  console.log('X:' + event.offsetX+'\n Y:' + event.offsetY); 
  
  //获取元素相对于页面的坐标 
  console.log('X:'+$(this).offset().left+'\n Y:'+$(this).offset().top);
});

验证码倒计时代码

<!-- dom -->
<input id="send" type="button" value="发送验证码">
// 原生js版本
var times = 60, // 临时设为60秒
  timer = null;
      
document.getElementById('send').onclick = function () {
  // 计时开始
  timer = setInterval(function () {
    times--;
    
    if (times <= 0) {
      send.value = '发送验证码';
      clearInterval(timer);
      send.disabled = false;
      times = 60;
    } else {
      send.value = times + '秒后重试';
      send.disabled = true;
    }
  }, 1000);
}

// jQuery版本
var times = 60,
  timer = null;
$('#send').on('click', function () {
  var $this = $(this);
  
  // 计时开始
  timer = setInterval(function () {
    times--;
    
    if (times <= 0) {
      $this.val('发送验证码');
      clearInterval(timer);
      $this.attr('disabled', false);
      times = 60;
    } else {
      $this.val(times + '秒后重试');
      $this.attr('disabled', true);
    }
  }, 1000);
});

常用的一些正则表达式

//匹配字母、数字、中文字符 
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/ 
//验证邮箱 
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/ 
//验证手机号 
/^1[3|5|8|7]\d{9}$/ 
//验证URL 
/^http:\/\/.+\./
//验证身份证号码 
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/ 
//匹配中文字符的正则表达式 
/[\u4e00-\u9fa5]/ 
//匹配双字节字符(包括汉字在内) 
/[^\x00-\xff]/

js时间戳、毫秒格式化

function formatDate(now) { 
  var y = now.getFullYear();
  var m = now.getMonth() + 1; // 注意js里的月要加1 
  var d = now.getDate();
  var h = now.getHours(); 
  var m = now.getMinutes(); 
  var s = now.getSeconds();
  
  return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s; 
} 
var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);
console.log(nowDate.getTime()); // 获得当前毫秒数: 1465816710020
console.log(formatDate(nowDate));

js限定字符数(注意:一个汉字算2个字符)

<input id="txt" type="text">
//字符串截取
function getByteVal(val, max) {
  var returnValue = '';
  var byteValLen = 0;
  for (var i = 0; i < val.length; i++) {
    if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1;
    if (byteValLen > max) break;
    returnValue += val[i];
  }
  return returnValue;
}
$('#txt').on('keyup', function () {
  var val = this.value;
  if (val.replace(/[^\x00-\xff]/g, "**").length > 14) {
    this.value = getByteVal(val, 14);
  }
});

js判断是否移动端及浏览器内核

var browser = { 
  versions: function() { 
    var u = navigator.userAgent; 
    return { 
      trident: u.indexOf('Trident') > -1, //IE内核 
      presto: u.indexOf('Presto') > -1, //opera内核 
      webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 
      gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko 
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios 
      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android 
      iPhone: u.indexOf('iPhone') > -1 , //iPhone 
      iPad: u.indexOf('iPad') > -1, //iPad 
      webApp: u.indexOf('Safari') > -1 //Safari 
    }; 
  }
} 
if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) { 
  alert('移动端'); 
}

之前我用过一个检测客户端的库 觉得挺好用的,也推荐给大家 叫 device.js,大家可以 Googel 或 百度
GItHub仓库地址:https://github.com/matthewhudson/device.js

getBoundingClientRect() 获取元素位置

//它返回一个对象,其中包含了left、right、top、bottom四个属性
var myDiv = document.getElementById('myDiv');
var x = myDiv.getBoundingClientRect().left; 
var y = myDiv.getBoundingClientRect().top; 
// 相当于jquery的: $(this).offset().left、$(this).offset().top // js的:this.offsetLeft、this.offsetTop

HTML5全屏

function fullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

fullscreen(document.documentElement);
Javascript 相关文章推荐
javascript dom 操作详解 js加强
Jul 13 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 #Javascript
JavaScript中原型链存在的问题解析
Sep 25 #Javascript
JavaScript制作颜色反转小游戏
Sep 25 #Javascript
JavaScript实现简单的日历效果
Sep 25 #Javascript
javascript实现根据汉字获取简拼
Sep 25 #Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 #Javascript
微信小程序前端源码逻辑和工作流
Sep 25 #Javascript
You might like
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
PHP实现文件下载详解
2014/11/27 PHP
PHP实现搜索相似图片
2015/09/22 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
jQuery创建折叠式菜单
2019/06/15 jQuery
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
python DataFrame转dict字典过程详解
2019/12/26 Python
Python使用type动态创建类操作示例
2020/02/29 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
python中什么是面向对象
2020/06/11 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
家长对孩子评语
2014/01/30 职场文书
如何撰写岗位职责
2014/02/01 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
面试通知短信
2015/04/20 职场文书
科技馆观后感
2015/06/08 职场文书
治庸问责工作总结
2015/08/11 职场文书
导游词之西递宏村
2019/12/10 职场文书