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

 1、阻止默认行为
 // 原生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();

 });

 2、阻止冒泡
 // 原生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();

 });

 3、鼠标滚轮事件
 $('#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');

     } 

 });

 4、检测浏览器是否支持svg
 function isSupportSVG() { 

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

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

 }

 // 测试

 console.log(isSupportSVG());

 5、检测浏览器是否支持canvas
 function isSupportCanvas() {

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

         return true;

     }else{

         return false;

     }

 }

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

 console.log(isSupportCanvas());

 6、检测是否是微信浏览器
 function isWeiXinClient() {

     var ua = navigator.userAgent.toLowerCase(); 

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

         return true; 

     } else { 

         return false; 

     }

 }

 // 测试

 alert(isWeiXinClient());

 7、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);

 });

 8、验证码倒计时代码
 html

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

 js

 // 原生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);

 });

 9、常用的一些正则表达式
 //匹配字母、数字、中文字符 

 /^([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]/

 10、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));

 11、js限定字符数（注意：一个汉字算2个字符）
 html

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

 js

 //字符串截取

 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);

     }

 });

 12、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('移动端'); 

 }

 13、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

 14、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);

 15、HTML5 DOM 选择器
 // querySelector() 返回匹配到的第一个元素

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

 console.log(item);

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

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

 console.log(items[0]);

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

1、通过jsonp跨域

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

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

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

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

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

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