前端开发中常用到的js特效有哪些

HTML5 DOM 选择器

// querySelector() 返回匹配到的第一个元素var item = documentquerySelector('item');consolelog(item);// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = documentquerySelectorAll('item');consolelog(items[0]);1234567

阻止默认行为

// 原生jsdocumentgetElementById('btn')addEventListener('click', function (event) { event = event || windowevent； if (eventpreventDefault){ // w3c方法 阻止默认行为

eventpreventDefault();

} else{ // ie 阻止默认行为

eventreturnValue = false;

}

}, false);// jQuery$('#btn')on('click', function (event) { eventpreventDefault();

});1234567891011121314151617

阻止冒泡

// 原生jsdocumentgetElementById('btn')addEventListener('click', function (event) { event = event || windowevent； if (eventstopPropagation){ // w3c方法 阻止冒泡

eventstopPropagation();

} else{ // ie 阻止冒泡

eventcancelBubble = true;

}

}, false);// jQuery$('#btn')on('click', function (event) { eventstopPropagation();

});1234567891011121314151617

鼠标滚轮事件

$('#content')on("mousewheel DOMMouseScroll", function (event) {

// chrome & ie || // firefox

var delta = (eventoriginalEventwheelDelta && (eventoriginalEventwheelDelta > 0 1 : -1)) || (eventoriginalEventdetail && (eventoriginalEventdetail > 0 -1 : 1));

if (delta > 0) {

// 向上滚动

consolelog('mousewheel top');

} else if (delta < 0) { // 向下滚动

consolelog('mousewheel bottom');

}

});123456789101112

检测浏览器是否支持svg

function isSupportSVG() {

var SVG_NS = 'http://wwww3org/2000/svg'; return !!documentcreateElementNS &&!!documentcreateElementNS(SVG_NS, 'svg')createSVGRect;

}

// 测试consolelog(isSupportSVG());1234567

检测浏览器是否支持canvas

function isSupportCanvas() {

if(documentcreateElement('canvas')getContext){ return true;

}else{ return false;

}

}// 测试，打开谷歌浏览器控制台查看结果consolelog(isSupportCanvas());12345678910

检测是否是微信浏览器

function isWeiXinClient() {

var ua = navigatoruserAgenttoLowerCase();

if (uamatch(/MicroMessenger/i)=="micromessenger") {

return true;

} else {

return false;

}

}// 测试alert(isWeiXinClient());1234567891011

jQuery 获取鼠标在上的坐标

$('#myImage')click(function(event){

//获取鼠标在上的坐标

consolelog('X：' + eventoffsetX+'\n Y:' + eventoffsetY);

//获取元素相对于页面的坐标

consolelog('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;

documentgetElementById('send')onclick = function () {

// 计时开始

timer = setInterval(function () {

times--; if (times <= 0) {

sendvalue = '发送验证码';

clearInterval(timer);

senddisabled = false;

times = 60;

} else {

sendvalue = times + '秒后重试';

senddisabled = true;

}

}, 1000);

}1234567891011121314151617181920

// jQuery版本var times = 60,

timer = null;

$('#send')on('click', function () {

var $this = $(this); // 计时开始

timer = setInterval(function () {

times--; if (times <= 0) {

$thisval('发送验证码');

clearInterval(timer);

$thisattr('disabled', false);

times = 60;

} else {

$thisval(times + '秒后重试');

$thisattr('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 = nowgetFullYear(); var m = nowgetMonth() + 1; // 注意js里的月要加1

var d = nowgetDate(); var h = nowgetHours();

var m = nowgetMinutes();

var s = nowgetSeconds(); return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;

}

var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);

consolelog(nowDategetTime()); // 获得当前毫秒数: 1465816710020consolelog(formatDate(nowDate));123456789101112131415

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

<input id="txt" type="text">//字符串截取function getByteVal(val, max) {

var returnValue = ''; var byteValLen = 0; for (var i = 0; i < vallength; 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 = thisvalue; if (valreplace(/[^\x00-\xff]/g, "")length > 14) { thisvalue = getByteVal(val, 14);

}

});12345678910111213141516171819

js判断是否移动端及浏览器内核

var browser = {

versions: function() {

var u = navigatoruserAgent;

return {

trident: uindexOf('Trident') > -1, //IE内核

presto: uindexOf('Presto') > -1, //opera内核

webKit: uindexOf('AppleWebKit') > -1, //苹果、谷歌内核

gecko: uindexOf('Firefox') > -1, //火狐内核Gecko

mobile: !!umatch(/AppleWebKitMobile/), //是否为移动终端

ios: !!umatch(/\(i[^;]+;( U;) CPU+Mac OS X/), //ios

android: uindexOf('Android') > -1 || uindexOf('Linux') > -1, //android

iPhone: uindexOf('iPhone') > -1 , //iPhone

iPad: uindexOf('iPad') > -1, //iPad

webApp: uindexOf('Safari') > -1 //Safari

};

}

}

if (browserversionsmobile() || browserversionsios() || browserversionsandroid() || browserversionsiPhone() || browserversionsiPad()) {

alert('移动端');

}123456789101112131415161718192021

之前我用过一个检测客户端的库 觉得挺好用的，也推荐给大家 叫 devicejs，大家可以 Googel 或 百度

GItHub仓库地址：https://githubcom/matthewhudson/devicejs

getBoundingClientRect() 获取元素位置

//它返回一个对象，其中包含了left、right、top、bottom四个属性var myDiv = documentgetElementById('myDiv');var x = myDivgetBoundingClientRect()left;

var y = myDivgetBoundingClientRect()top;

// 相当于jquery的： $(this)offset()left、$(this)offset()top // js的：thisoffsetLeft、thisoffsetTop123456

HTML5全屏

function fullscreen(element) {

if (elementrequestFullscreen) {

elementrequestFullscreen();

} else if (elementmozRequestFullScreen) {

elementmozRequestFullScreen();

} else if (elementwebkitRequestFullscreen) {

elementwebkitRequestFullscreen();

} else if (elementmsRequestFullscreen) {

elementmsRequestFullscreen();

}}

fullscreen(documentdocumentElement);12345678910111213

1在网页里使用：一般不能直接打开，只有配合网页使用，如果是想破解某网站的在线**等，仅从js文件入手可能性不大，建议使用专门的抓取工具，如wpe，抓取网络封包，再对封包分析，js可以使用记事本编辑。 2在单机使用，一般可以用来做为一个可执行程序直接双击就可以运行，当然前提是计算机没有安装网页设计软件。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjsnet,sky,wwwzzjsnet,站长特效 网" />

<meta name="description" content="wwwzzjsnet,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />

<title>点击文字选中单选框，sky整理收集，站长特效欢迎您。</title>

<style type="text/css">

<!--

body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 4px; margin-right: 0px}

A { COLOR: black; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: none }

A:hover { COLOR: red; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: underline }

a:active { font: 9pt "宋体"; cursor: hand; color: #FF0033 }

-->

</style>

</head>

<body>

<a href="http://wwwzzjsnet/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjsnet，站长js特效。<hr>

<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：wwwzzjsnet，zzjs@msncom,用net打造靓站-->

<script type="text/javascript" src="http://wwwzzjsnet/ad/tcjs"></script>

<center>

<table border=0 bordercolor=#111111 borderlight=green style="border-collapse: collapse" cellpadding="0" cellspacing="0">

<tr><td align=center>

<font size=3 color=#FF0033 face="Arial, Helvetica, sans-serif">

<strong style="font-weight: 400">下面为脚本显示区<br>

　</strong></font></td></tr><tr><td align=center width=300> <p>

<span style="font-size: 9pt">看看下面的选择框，似乎没有什么不同的。微妙之处在于，选择项目时不必非得在框内点击鼠标了，在文本上选择即可。不信试一试吧。</span></p>

<form>

<label for="check1"><span style="font-size: 9pt">经常来这里</span></label><span style="font-size: 9pt">

<input type="CHECKBOX" id="check1" value="often" name="checkoften">

<label for="check2">偶尔来看看</label>

<input type="CHECKBOX" id="check2" value="seldom" name="checkseldom">

</span>

</form>

</td></tr></table></center>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

</body>

</html>