前端设计师们最常用的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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 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
中英文字符串翻转函数
2008/12/09 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
详解vue 数据传递的方法
2018/04/19 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
Python中文件操作简明介绍
2015/04/13 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
外语专业毕业生个人的自荐信
2013/11/19 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
如何写求职信
2014/05/24 职场文书
公司活动总结范文
2014/07/01 职场文书
贷款委托书
2014/08/01 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
食品安全承诺书范文
2014/08/29 职场文书
辩论会主持词
2015/07/03 职场文书