一、前端开发中常用到的js特效有哪些
HTML5 DOM选择器
// querySelector()返回匹配到的第一个元素var item= document.querySelector('.item');console.log(item);// querySelectorAll()返回匹配到的所有元素，是一个nodeList集合var items= document.querySelectorAll('.item');console.log(items[0]);1234567
阻止默认行为
//原生jsdocument.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();
});1234567891011121314151617
阻止冒泡
//原生jsdocument.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();
});1234567891011121314151617
鼠标滚轮事件
$('#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');
}
});123456789101112
检测浏览器是否支持svg
function isSupportSVG(){
var SVG_NS=';; return!!document.createElementNS&&!!document.createElementNS(SVG_NS,'svg').createSVGRect;
}
//测试console.log(isSupportSVG());1234567
检测浏览器是否支持canvas
function isSupportCanvas(){
if(document.createElement('canvas').getContext){ return true;
}else{ return false;
}
}//测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas());12345678910
检测是否是微信浏览器
function isWeiXinClient(){
var ua= navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger"){
return true;
} else{
return false;
}
}//测试alert(isWeiXinClient());1234567891011
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);
});1234567
验证码倒计时代码
<!-- dom--><input id="send" type="button" value="发送验证码">12
//原生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);
}1234567891011121314151617181920
// 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);
});12345678910111213141516171819202122
常用的一些正则表达式
//匹配字母、数字、中文字符
/^([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]/1234567891011121314151617181920
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());//获得当前毫秒数: 1465816710020console.log(formatDate(nowDate));123456789101112131415
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);
}
});12345678910111213141516171819
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('移动端');
}123456789101112131415161718192021
之前我用过一个检测客户端的库觉得挺好用的，也推荐给大家叫 device.js，大家可以 Googel或百度
GItHub仓库地址：
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.offsetTop123456
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);12345678910111213
二、什么是JS特效
JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。
比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。
JavaScript是根据"ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA组织发展和维护。ECMA-262是正式的 JavaScript标准。
扩展资料：
能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表）。
JavaScript使网页增加互动性。JavaScript使有规律地重复的HTML文段简化，减少下载时间。JavaScript能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI验证。JavaScript的特点是无穷无尽的，只要你有创意。
三、javascript常用的特效有哪些
javascript
一种由Netscape的LiveScript发展而来的脚本语言，它提高与Java的兼容性。JavaScript采用HTML页作为其接口
一、Javascript在网页的用法
Javascript加入网页有两种方法：
1、直接加入HTML文档
这是最常用的方法，大部分含有Javascript的网页都采用这种方法，如：
<script language="Javascript">
<!--
document.writeln("这是Javascript！采用直接插入的方法！");
//-Javascript结束-->
</script>
在这个例子中，我们可看到一个新的标签：<script>……</script>，而<script language="Javascript”>用来告诉浏览器这是用Javascript编写的程序，需要调动相应的解释程序进行解释。
HTML的注释标签<!--和-->：用来去掉浏览器所不能识别的Javascript源代码的，这对不支持 Javascript语言的浏览器来说是很有用的。
//-Javascript结束：双斜杠表示 Javascript的注释部分，即从//开始到行尾的字符都被忽略。至于程序中所用到的document．write（）函数则表示将括号中的文字输出到窗口中去，这在后面将会详细介绍。另外一点需要注意的是，<script>……</script>的位置并不是固定的，可以包含在< head>......</head>或<body>.....</body>中的任何地方。
2、引用方式如果已经存在一个Javascript源文件（以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：
<script src＝url language="Javascript"></script>
其中的Url就是程序文件的地址。同样的，这样的语句可以放在HTML文档头部或主体的任何部分。如果要实现“直接插入方式”中所举例子的效果，可以首先创建一个Javascript源代码文件“Script.js”，其内容如下：
document.writeln("这是Javascript！采用直接插入的方法！");
在网页中可以这样调用程序：<script src＝"Script.js" language="Javascript"></script>。