文档章节

分享一些前端开发中最常用的JS代码片段

 前端彭于晏
发布于 02/27 21:21
字数 1457
阅读 54
收藏 0

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

HTML5 DOM 选择器

javascript 代码

JavaScript运行复制全屏

 

1

// querySelector() 返回匹配到的第一个元素

2

var item = document.querySelector('.item');

3

console.log(item);

4

5

// querySelectorAll() 返回匹配到的所有元素,是一个nodeList集合

6

var items = document.querySelectorAll('.item');

7

console.log(items[0]);

阻止默认行为

javascript 代码

JavaScript运行复制全屏

 

1

// 原生js

2

document.getElementById('btn').addEventListener('click', function (event) {

3

   event = event || window.event;

4

5

   if (event.preventDefault){

6

       // w3c方法 阻止默认行为

7

       event.preventDefault();

8

   } else{

9

       // ie 阻止默认行为

10

       event.returnValue = false;

11

   }

12

}, false);

13

14

// jQuery

15

$('#btn').on('click', function (event) {

16

   event.preventDefault();

17

});

阻止冒泡

javascript 代码

JavaScript运行复制全屏

 

1

// 原生js

2

document.getElementById('btn').addEventListener('click', function (event) {

3

   event = event || window.event;

4

5

   if (event.stopPropagation){

6

       // w3c方法 阻止冒泡

7

       event.stopPropagation();

8

   } else{

9

       // ie 阻止冒泡

10

       event.cancelBubble = true;

11

   }

12

}, false);

13

14

// jQuery

15

$('#btn').on('click', function (event) {

16

   event.stopPropagation();

17

});

鼠标滚轮事件

javascript 代码

JavaScript运行复制全屏

 

1

$('#content').on("mousewheel DOMMouseScroll", function (event) {

2

   // chrome & ie || // firefox

3

   var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));  

4

5

   if (delta > 0) {

6

       // 向上滚动

7

       console.log('mousewheel top');

8

   } else if (delta < 0) {

9

       // 向下滚动

10

       console.log('mousewheel bottom');

11

   }

12

});

检测浏览器是否支持svg

javascript 代码

JavaScript运行复制全屏

 

1

function isSupportSVG() {

2

   var SVG_NS = 'http://www.w3.org/2000/svg';

3

   return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;

4

}

5

6

// 测试

7

console.log(isSupportSVG());

检测浏览器是否支持canvas

javascript 代码

JavaScript运行复制全屏

 

1

function isSupportCanvas() {

2

   if(document.createElement('canvas').getContext){

3

       return true;

4

   }else{

5

       return false;

6

   }

7

}

8

9

// 测试,打开谷歌浏览器控制台查看结果

10

console.log(isSupportCanvas());

检测是否是微信浏览器

javascript 代码

JavaScript运行复制全屏

 

1

function isWeiXinClient() {

2

   var ua = navigator.userAgent.toLowerCase();

3

   if (ua.match(/MicroMessenger/i)=="micromessenger") {

4

       return true;

5

   } else {

6

       return false;

7

   }

8

}

9

10

// 测试

11

alert(isWeiXinClient());

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

javascript 代码

JavaScript运行复制全屏

 

1

$('#myImage').click(function(event){

2

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

3

   console.log('X:' + event.offsetX+'\n Y:' + event.offsetY);

4

5

   //获取元素相对于页面的坐标

6

   console.log('X:'+$(this).offset().left+'\n Y:'+$(this).offset().top);

7

});

验证码倒计时代码

html 代码

HTML运行复制全屏

 

1

<!-- dom -->

2

<input id="send" type="button" value="发送验证码">

javascript 代码

JavaScript运行复制全屏

 

1

// 原生js版本

2

var times = 60, // 临时设为60秒

3

   timer = null;

4

5

document.getElementById('send').onclick = function () {

6

   // 计时开始

7

   timer = setInterval(function () {

8

       times--;

9

10

       if (times <= 0) {

11

           send.value = '发送验证码';

12

           clearInterval(timer);

13

           send.disabled = false;

14

           times = 60;

15

       } else {

16

           send.value = times + '秒后重试';

17

           send.disabled = true;

18

       }

19

   }, 1000);

20

}

javascript 代码

JavaScript运行复制全屏

 

1

// jQuery版本

2

var times = 60,

3

   timer = null;

4

5

$('#send').on('click', function () {

6

   var $this = $(this);

7

8

   // 计时开始

9

   timer = setInterval(function () {

10

       times--;

11

12

       if (times <= 0) {

13

           $this.val('发送验证码');

14

           clearInterval(timer);

15

           $this.attr('disabled', false);

16

           times = 60;

17

       } else {

18

           $this.val(times + '秒后重试');

19

           $this.attr('disabled', true);

20

       }

21

   }, 1000);

22

});

常用的一些正则表达式

javascript 代码

JavaScript运行复制全屏

 

1

//匹配字母、数字、中文字符

2

/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

3

4

//验证邮箱

5

/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

6

7

//验证手机号

8

/^1[3|5|8|7]\d{9}$/

9

10

//验证URL

11

/^http:\/\/.+\./

12

13

//验证身份证号码

14

/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/

15

16

//匹配中文字符的正则表达式

17

/[\u4e00-\u9fa5]/

18

19

//匹配双字节字符(包括汉字在内)

20

/[^\x00-\xff]/

js时间戳、毫秒格式化

javascript 代码

JavaScript运行复制全屏

 

1

function formatDate(now) {

2

   var y = now.getFullYear();

3

   var m = now.getMonth() + 1; // 注意js里的月要加1

4

   var d = now.getDate();

5

   var h = now.getHours();

6

   var m = now.getMinutes();

7

   var s = now.getSeconds();

8

9

   return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;

10

}

11

12

var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);

13

14

console.log(nowDate.getTime()); // 获得当前毫秒数: 1465816710020

15

console.log(formatDate(nowDate));

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

html 代码

HTML运行复制全屏

 

1

<input id="txt" type="text">

javascript 代码

JavaScript运行复制全屏

 

1

//字符串截取

2

function getByteVal(val, max) {

3

   var returnValue = '';

4

   var byteValLen = 0;

5

   for (var i = 0; i < val.length; i++) {

6

       if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1;

7

       if (byteValLen > max) break;

8

       returnValue += val[i];

9

   }

10

   return returnValue;

11

}

12

13

$('#txt').on('keyup', function () {

14

   var val = this.value;

15

   if (val.replace(/[^\x00-\xff]/g, "**").length > 14) {

16

       this.value = getByteVal(val, 14);

17

   }

18

});

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

javascript 代码

JavaScript运行复制全屏

 

1

var browser = {

2

   versions: function() {

3

       var u = navigator.userAgent;

4

       return {

5

           trident: u.indexOf('Trident') > -1, //IE内核

6

           presto: u.indexOf('Presto') > -1, //opera内核

7

           webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

8

           gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko

9

           mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

10

           ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios

11

           android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android

12

           iPhone: u.indexOf('iPhone') > -1 , //iPhone

13

           iPad: u.indexOf('iPad') > -1, //iPad

14

           webApp: u.indexOf('Safari') > -1 //Safari

15

       };

16

   }

17

}

18

19

if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {

20

   alert('移动端');

21

}

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

getBoundingClientRect() 获取元素位置

javascript 代码

JavaScript运行复制全屏

 

1

//它返回一个对象,其中包含了left、right、top、bottom四个属性

2

var myDiv = document.getElementById('myDiv');

3

var x = myDiv.getBoundingClientRect().left;

4

var y = myDiv.getBoundingClientRect().top;

5

6

// 相当于jquery的: $(this).offset().left、$(this).offset().top // js的:this.offsetLeft、this.offsetTop

HTML5全屏

javascript 代码

JavaScript运行复制全屏

 

1

function fullscreen(element) {

2

   if (element.requestFullscreen) {

3

       element.requestFullscreen();

4

   } else if (element.mozRequestFullScreen) {

5

       element.mozRequestFullScreen();

6

   } else if (element.webkitRequestFullscreen) {

7

       element.webkitRequestFullscreen();

8

   } else if (element.msRequestFullscreen) {

9

       element.msRequestFullscreen();

10

   }

11

}

12

13

fullscreen(document.documentElement);

© 著作权归作者所有

粉丝 0
博文 101
码字总数 193622
作品 0
长沙
私信 提问
Web、移动开发资源、开源工具整理

整理了一些Web、移动开发资料,开源工具,供需要的朋友们查阅: Web移动开发各类网站学习资源: 成为优秀的Web移动开发者:编程资源大全 成为优秀的Web移动开发者:前端开发学习资源集合 成为...

咲晚杍
2014/03/13
431
1
分享10个 javascript 在线 debugging 工具

日期:2012/01/18 来源:GBin1.com 调试Javascript可能是web开发中最让人郁闷的事情。所以这里我们绝定来寻找一些好的工具来帮助大家调试。这里是10款我们精选的基于浏览器的JS在线调试工具,...

gbin1
2012/01/19
1K
2
GoSqlGo 1.2.0 发布,添加 Node.js 支持

GoSqlGo ( https://gitee.com/drinkjava2/gosqlgo) 天下武功,唯快不破,程序无非就是接收用户输入、存到数据库。GoSqlGo能让前端直接存取数据库,独立完成项目开发。 GoSqlGo是一个运行于服...

yong9981
05/17
724
6
2014年最优秀JavaScript编辑器大盘点

Webstorm WebStorm 是 一种轻量级的、功能强大的 IDE,为Node.js复杂的客户端开发和服务器端开发提供完美的解决方案。 WebStorm的智能代码编辑器支持 JavaScript, Node.js, HTML和 CSS。 We...

kouxunli1
2014/11/25
291
0
AppCan移动开发技术体系架构:MPA+Backbone+Zepto 模式

在最近的一次分享中,AppCan CTO赵庆华首次讲解了AppCan的体系架构,即MPA+Backbone+Zepto的技术路线。算是科普贴,能够帮助开发者弄清很多底层的基础知识,也能对不同架构的开发工具的优缺点...

orchid_yu
2016/05/11
471
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
14
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部