前端设计师们最常用的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 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
javascript preload&amp;lazy load
May 13 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
JQuery基础语法小结
Feb 27 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
详解JS预解析原理
Jun 16 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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
php 文件状态缓存带来的问题
2008/12/14 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
PHP 实现缩略图
2021/03/09 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
Vuex提升学习篇
2018/01/11 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
python 调用HBase的简单实例
2016/12/18 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
python WindowsError的错误代码详解
2017/07/23 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
Python中求对数方法总结
2020/03/10 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
元旦晚会邀请函
2014/01/27 职场文书
公司募捐倡议书
2014/05/14 职场文书
保险公司演讲稿
2014/09/02 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
给上级领导的感谢信
2015/01/22 职场文书
同学毕业留言寄语
2015/02/27 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
详解thinkphp的Auth类认证
2021/05/28 PHP