一、前端开发中常用到的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>。