一、前端开发中常用到的js特效有哪些
// 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方法阻止默认行为
}, false);// jQuery$('#btn').on('click', function(event){ event.preventDefault();
//原生jsdocument.getElementById('btn').addEventListener('click', function(event){ event= event|| window.event； if(event.stopPropagation){// w3c方法阻止冒泡
}, false);// jQuery$('#btn').on('click', function(event){ event.stopPropagation();
$('#content').on("mousewheel DOMMouseScroll", function(event){
var delta=(event.originalEvent.wheelDelta&&(event.originalEvent.wheelDelta> 0? 1:-1))||(event.originalEvent.detail&&(event.originalEvent.detail> 0?-1: 1));
console.log('mousewheel top');
} else if(delta< 0){//向下滚动
console.log('mousewheel bottom');
var SVG_NS='http://www.w3.org/2000/svg'; return!!document.createElementNS&&!!document.createElementNS(SVG_NS,'svg').createSVGRect;
//测试console.log(isSupportSVG());1234567
if(document.createElement('canvas').getContext){ return true;
}//测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas());12345678910
var ua= navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger"){
}//测试alert(isWeiXinClient());1234567891011
$('#myImage').click(function(event){
console.log('X：'+ event.offsetX+'\n Y:'+ event.offsetY);
console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);
<!-- dom--><input id="send" type="button" value="发送验证码">12
//原生js版本var times= 60,//临时设为60秒
document.getElementById('send').onclick= function(){
timer= setInterval(function(){
send.value='发送验证码';
send.value= times+'秒后重试';
}1234567891011121314151617181920
$('#send').on('click', function(){
timer= setInterval(function(){
$this.val('发送验证码');
$this.attr('disabled', false);
$this.val(times+'秒后重试');
$this.attr('disabled', true);
});12345678910111213141516171819202122
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
//匹配双字节字符(包括汉字在内)
/[^\x00-\xff]/1234567891011121314151617181920
var y= now.getFullYear(); var m= now.getMonth()+ 1;//注意js里的月要加1
var d= now.getDate(); var h= now.getHours();
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;
$('#txt').on('keyup', function(){
var val= this.value; if(val.replace(/[^\x00-\xff]/g,"**").length> 14){ this.value= getByteVal(val, 14);
});12345678910111213141516171819
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()){
}123456789101112131415161718192021
之前我用过一个检测客户端的库觉得挺好用的，也推荐给大家叫 device.js，大家可以 Googel或百度
GItHub仓库地址：https://github.com/matthewhudson/device.js
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
if(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特效
1、JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。
2、比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。
3、JavaScript是根据"ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA组织发展和维护。ECMA-262是正式的 JavaScript标准。
4、能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表）。
5、JavaScript使网页增加互动性。JavaScript使有规律地重复的HTML文段简化，减少下载时间。JavaScript能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI验证。JavaScript的特点是无穷无尽的，只要你有创意。
三、怎么给html5背景加上js粒子特效
particles.js可以从github网站下载到最新的源码，网址是 https://github.com/VincentGarreau/particles.js/
第一步，在html中引入脚本文件 particles.min.js，这个文件在下载的压缩包里可以找到
<scriptsrc="particles.min.js"></script>
第二步，在html中放入一个div容器，设置id为particles-js。这个一般放在所有网页元素的最后面就可以。
第二步，在html中放入一个div容器，设置id为particles-js。这个一般放在所有网页元素的最后面就可以。
<divid="particles-js"></div>
</style>
第三步，设置窗口样式
}</style>
第四步，脚本生成粒子效果，可以单独放在一个js文件里，也可以放在<script>标签里。无论如何，这段脚本要出现在div容器之后。
第四步，脚本生成粒子效果，可以单独放在一个js文件里，也可以放在<script>标签里。无论如何，这段脚本要出现在div容器之后。
particlesJS("particles-js",{"particles":{"number":{"value":380,"density":{"enable":true,"value_area":800
},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"
},"image":{"src":"img/github.svg","width":100,"height":100
},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false
},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false
},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1
},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200
},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"grab"
},"onclick":{"enable":true,"mode":"push"
},"modes":{"grab":{"distance":140,"line_linked":{"opacity":1
},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3
},"repulse":{"distance":200,"duration":0.4
},"retina_detect":true});
文章分享结束，js特效大全和js特效制作教程的答案你都知道了吗？欢迎再次光临本站哦！
