js常用代码示例及解决跨域的几种方法

 1 1、阻止默认行为
 2 // 原生js
 3 
 4 document.getElementById('btn').addEventListener('click', function (event) {
 5 
 6     event = event || window.event；
 7 
 8     if (event.preventDefault){
 9 
10         // w3c方法 阻止默认行为
11 
12         event.preventDefault();
13 
14     } else{
15 
16         // ie 阻止默认行为
17 
18         event.returnValue = false;
19 
20     }
21 
22 }, false);
23 
24  
25 
26 // jQuery
27 
28 $('#btn').on('click', function (event) {
29 
30     event.preventDefault();
31 
32 });

 1 2、阻止冒泡
 2 // 原生js
 3 
 4 document.getElementById('btn').addEventListener('click', function (event) {
 5 
 6     event = event || window.event；
 7 
 8     if (event.stopPropagation){
 9 
10         // w3c方法 阻止冒泡
11 
12         event.stopPropagation();
13 
14     } else{
15 
16         // ie 阻止冒泡
17 
18         event.cancelBubble = true;
19 
20     }
21 
22 }, false);
23 
24  
25 
26 // jQuery
27 
28 $('#btn').on('click', function (event) {
29 
30     event.stopPropagation();
31 
32 });

 1 3、鼠标滚轮事件
 2 $('#content').on("mousewheel DOMMouseScroll", function (event) { 
 3 
 4     // chrome & ie || // firefox
 5 
 6     var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1)); 
 7 
 8     if (delta > 0) { 
 9 
10         // 向上滚动
11 
12         console.log('mousewheel top');
13 
14     } else if (delta < 0) {
15 
16         // 向下滚动
17 
18         console.log('mousewheel bottom');
19 
20     } 
21 
22 });

 1 4、检测浏览器是否支持svg
 2 function isSupportSVG() { 
 3 
 4     var SVG_NS = 'http://www.w3.org/2000/svg';
 5 
 6     return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect; 
 7 
 8 }
 9 
10 // 测试
11 
12 console.log(isSupportSVG());

 1 5、检测浏览器是否支持canvas
 2 function isSupportCanvas() {
 3 
 4     if(document.createElement('canvas').getContext){
 5 
 6         return true;
 7 
 8     }else{
 9 
10         return false;
11 
12     }
13 
14 }
15 
16 // 测试，打开谷歌浏览器控制台查看结果
17 
18 console.log(isSupportCanvas());

 1 6、检测是否是微信浏览器
 2 function isWeiXinClient() {
 3 
 4     var ua = navigator.userAgent.toLowerCase(); 
 5 
 6     if (ua.match(/MicroMessenger/i)=="micromessenger") { 
 7 
 8         return true; 
 9 
10     } else { 
11 
12         return false; 
13 
14     }
15 
16 }
17 
18 // 测试
19 
20 alert(isWeiXinClient());

 1 7、jQuery 获取鼠标在图片上的坐标
 2 $('#myImage').click(function(event){
 3 
 4     //获取鼠标在图片上的坐标 
 5 
 6     console.log('X：' + event.offsetX+'
 Y:' + event.offsetY); 
 7 
 8     //获取元素相对于页面的坐标 
 9 
10     console.log('X：'+$(this).offset().left+'
 Y:'+$(this).offset().top);
11 
12 });

 1 8、验证码倒计时代码
 2 html
 3 
 4 <input id="send" type="button" value="发送验证码">
 5 
 6  
 7 js
 8 
 9 // 原生js版本
10 
11 var times = 60, // 临时设为60秒
12 
13 timer = null;
14 
15 document.getElementById('send').onclick = function () {
16 
17     // 计时开始
18 
19     timer = setInterval(function () {
20 
21         times--;
22 
23         if (times <= 0) {
24 
25             send.value = '发送验证码';
26 
27             clearInterval(timer);
28 
29             send.disabled = false;
30 
31             times = 60;
32 
33         } else {
34 
35             send.value = times + '秒后重试';
36 
37             send.disabled = true;
38 
39         }
40 
41     }, 1000);
42 
43 }
44 
45 
46 // jQuery版本
47 
48 var times = 60,
49 
50 timer = null;
51 
52 $('#send').on('click', function () {
53 
54     var $this = $(this);
55 
56     // 计时开始
57 
58     timer = setInterval(function () {
59 
60         times--;
61 
62         if (times <= 0) {
63 
64             $this.val('发送验证码');
65 
66             clearInterval(timer);
67 
68             $this.attr('disabled', false);
69 
70             times = 60;
71 
72         } else {
73 
74             $this.val(times + '秒后重试');
75 
76             $this.attr('disabled', true);
77 
78         }
79 
80     }, 1000);
81 
82 });

 1 9、常用的一些正则表达式
 2 //匹配字母、数字、中文字符 
 3 
 4 /^([A-Za-z0-9]|[u4e00-u9fa5])*$/ 
 5 
 6 //验证邮箱 
 7 
 8 /^w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/ 
 9 
10 //验证手机号 
11 
12 /^1[3|5|8|7]d{9}$/ 
13 
14 //验证URL 
15 
16 /^http://.+./
17 
18 //验证身份证号码 
19 
20 /(^d{15}$)|(^d{17}([0-9]|X|x)$)/ 
21 
22 //匹配中文字符的正则表达式 
23 
24 /[u4e00-u9fa5]/ 
25 
26 //匹配双字节字符(包括汉字在内) 
27 
28 /[^x00-xff]/

 1 10、js时间戳、毫秒格式化
 2 function formatDate(now) { 
 3 
 4     var y = now.getFullYear();
 5 
 6     var m = now.getMonth() + 1; // 注意js里的月要加1 
 7 
 8     var d = now.getDate();
 9 
10     var h = now.getHours(); 
11 
12     var m = now.getMinutes(); 
13 
14     var s = now.getSeconds();
15 
16     return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s; 
17 
18 } 
19 
20 var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);
21 
22 console.log(nowDate.getTime()); // 获得当前毫秒数: 1465816710020
23 
24 console.log(formatDate(nowDate));

 1 11、js限定字符数（注意：一个汉字算2个字符）
 2 html
 3 
 4 <input id="txt" type="text">
 5 
 6  
 7 
 8 js
 9 
10 //字符串截取
11 
12 function getByteVal(val, max) {
13 
14     var returnValue = '';
15 
16     var byteValLen = 0;
17 
18     for (var i = 0; i < val.length; i++) {
19 
20         if (val[i].match(/[^x00-xff]/ig) != null) byteValLen += 2; else byteValLen += 1;
21 
22         if (byteValLen > max) break;
23 
24         returnValue += val[i];
25 
26     }
27 
28     return returnValue;
29 
30 }
31 
32 $('#txt').on('keyup', function () {
33 
34     var val = this.value;
35 
36     if (val.replace(/[^x00-xff]/g, "**").length > 14) {
37 
38         this.value = getByteVal(val, 14);
39 
40     }
41 
42 });

 1 12、js判断是否移动端及浏览器内核
 2 var browser = { 
 3 
 4     versions: function() { 
 5 
 6         var u = navigator.userAgent; 
 7 
 8         return { 
 9 
10             trident: u.indexOf('Trident') > -1, //IE内核 
11 
12             presto: u.indexOf('Presto') > -1, //opera内核 
13 
14             webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 
15 
16             gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko 
17 
18             mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 
19 
20             ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios 
21 
22             android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android 
23 
24             iPhone: u.indexOf('iPhone') > -1 , //iPhone 
25 
26             iPad: u.indexOf('iPad') > -1, //iPad 
27 
28             webApp: u.indexOf('Safari') > -1 //Safari 
29 
30         }; 
31 
32     }
33 
34 } 
35 
36 if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) { 
37 
38     alert('移动端'); 
39 
40 }

 1 13、getBoundingClientRect() 获取元素位置
 2 //它返回一个对象，其中包含了left、right、top、bottom四个属性
 3 
 4 var myDiv = document.getElementById('myDiv');
 5 
 6 var x = myDiv.getBoundingClientRect().left; 
 7 
 8 var y = myDiv.getBoundingClientRect().top; 
 9 
10 // 相当于jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop

 1 14、HTML5全屏
 2 function fullscreen(element) {
 3 
 4     if (element.requestFullscreen) {
 5 
 6         element.requestFullscreen();
 7 
 8     } else if (element.mozRequestFullScreen) {
 9 
10         element.mozRequestFullScreen();
11 
12     } else if (element.webkitRequestFullscreen) {
13 
14         element.webkitRequestFullscreen();
15 
16     } else if (element.msRequestFullscreen) {
17 
18         element.msRequestFullscreen();
19 
20     }
21 
22 }
23 
24 fullscreen(document.documentElement);

 1 15、HTML5 DOM 选择器
 2 // querySelector() 返回匹配到的第一个元素
 3 
 4 var item = document.querySelector('.item');
 5 
 6 console.log(item);
 7 
 8 // querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合
 9 
10 var items = document.querySelectorAll('.item');
11 
12 console.log(items[0]);

要解决跨域的问题，我们可以使用以下几种方法：

1、通过jsonp跨域

2、通过修改document.domain来跨子域

3、使用window.name来进行跨域

4、使用HTML5中新引进的window.postMessage方法来跨域传送数据

使用postMessage来跨域传送数据还是比较直观和方便的，但是缺点是IE6、IE7不支持，所以用不用还得根据实际需要来决定。

除了以上几种方法外，还有flash、在服务器上设置代理页面等跨域方式，这里就不做介绍了。

以上四种方法，可以根据项目的实际情况来进行选择应用，个人认为window.name的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。

相关阅读:
每日英语：Is Bo Xilai the Past or Future?
每日英语：Cyclists Live Six Years Longer
每日英语：No Consensus: China Debate on Women's Roles
每日英语：How to Be a Better Conversationalist
每日英语：Our Unique Obsession With Rover And Fluffy
每日英语：For Michael Dell, Saving His Deal Is Just First Step
每日英语：Secrets Of Effective Office Humor
每日英语：China Underwhelmed After First Apple Event
三分钟读懂TT猫分布式、微服务和集群之路
 Java基础精选,你答对了几道?
原文地址：https://www.cnblogs.com/pycmsj/p/10153541.html