JS常用代码块

最新推荐文章于 2023-10-03 22:15:48 发布

Denny辉

最新推荐文章于 2023-10-03 22:15:48 发布

阅读量505

点赞数

分类专栏： JavaScript 文章标签： javascript

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

转载于：http://blog.csdn.net/ligang2585116！

1. 加入收藏夹代码

[javascript] view plain copy

print ?

<script type=“text/javascript”>
function AddFavorite(sURL,sTitle){
try{
window.external.addFavorite(sURL, sTitle);
}catch (e){
try{
window.sidebar.addPanel(sTitle, sURL, ”“);
}catch (e){
alert(”加入收藏失败，请使用Ctrl+D进行添加”);
}
}
}
</script>
<a href=”javascript:favorite(‘李刚的学习专栏’,’http://blog.csdn.net/ligang2585116’)”>加入收藏</a>

<script type="text/javascript">
function AddFavorite(sURL,sTitle){
    try{
        window.external.addFavorite(sURL, sTitle);
    }catch (e){
        try{
            window.sidebar.addPanel(sTitle, sURL, "");
        }catch (e){
            alert("加入收藏失败，请使用Ctrl+D进行添加");
        }
    }
}
</script>
<a href=”javascript:favorite(‘李刚的学习专栏’,’http://blog.csdn.net/ligang2585116’)”>加入收藏</a>

2. 设置给任何层添加事件触发调用对象层的内容

[javascript] view plain copy

print ?

function showid(idname){
var newBox=document.getElementById(idname);
console.log(newBox)
}
//调用方法：
<a href=”#none” onClick=“showid(‘box’)”>测试按钮</a>
<div id=”box”>测试内容</div>

function showid(idname){
    var newBox=document.getElementById(idname);
    console.log(newBox)
}
//调用方法： 
<a href="#none" onClick="showid('box')">测试按钮</a>
<div id="box">测试内容</div>

3. js 获取文档高度

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

4. js获取对象字符串，截取所需位数的内容

[javascript] view plain copy

print ?

var data = ('a').text();  </li><li class="">data = data.length > 20 ? (data.substring(0,20)+"…") : data;  </li></ol><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png"></a></div></div><pre name="code" class="javascript" style="display: none;">var data =(‘a’).text(); data = data.length > 20 ? (data.substring(0,20)+”…”) : data;
5. Javascript获取地址栏参数的三种方法
[javascript] view plain copy
print ?
1. //方法一：
2. <script type=”text/javascript”>
3. String.prototype.getQuery = function(name) {
4. var reg = new RegExp(“(^|&)”+ name +“=([^&]*)(&| $)");  </li><li class="alt">    var r = this.substr(this.indexOf("\?")+1).match(reg);  </li><li class="">    if (r!=null)   </li><li class="alt">        return unescape(r[2]);   </li><li class="">    return null;  </li><li class="alt">}  </li><li class="">var strHref = "www.cnlei.org/index.htm?a=aaa&b=bbb&c=ccc";  </li><li class="alt">console.log(strHref.getQuery("a"));  </li><li class="">console.log(strHref.getQuery("b"));  </li><li class="alt">console.log(strHref.getQuery("c"));  </li><li class=""></script>  </li><li class="alt">//方法二：  </li><li class=""><script type="text/javascript">  </li><li class="alt">function getUrlPara(paraName){  </li><li class="">    var sUrl = location.href;  </li><li class="alt">    var sReg = "(?:\\?|&){1}"+paraName+"=([^&]*)";  </li><li class="">    var re=new RegExp(sReg,"gi");  </li><li class="alt">    re.exec(sUrl);  </li><li class="">    return RegExp.$ 1;
5. }
6. //应用实例：test_para.html?a=11&b=22&c=33
7. console.log(getUrlPara(”a”));
8. console.log(getUrlPara(”b”));
9. </script>
10. //方法三：
11. <script type=”text/javascript”>
12. function Request(strName){
13. var strHref = “www.cnlei.org/index.htm?a=aaa&b=bbb&c=ccc”;
14. var intPos = strHref.indexOf(“?”);
15. var strRight = strHref.substr(intPos + 1);
16. var arrTmp = strRight.split(“&”);
17. for(var i = 0; i < arrTmp.length; i++) {
18. var arrTemp = arrTmp[i].split(“=”);
19. if(arrTemp[0].toUpperCase() == strName.toUpperCase())
20. return arrTemp[1];
21. }
22. return “”;
23. }
24. console.log(Request(”a”));
25. console.log(Request(”b”));
26. console.log(Request(”c”));
27. </script>
```
//方法一：
<script type="text/javascript">
String.prototype.getQuery = function(name) {
 var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
 var r = this.substr(this.indexOf("\?")+1).match(reg);
 if (r!=null) 
 return unescape(r[2]); 
 return null;
}
var strHref = "www.cnlei.org/index.htm?a=aaa&b=bbb&c=ccc";
console.log(strHref.getQuery("a"));
console.log(strHref.getQuery("b"));
console.log(strHref.getQuery("c"));
</script>
//方法二：
<script type="text/javascript">
function getUrlPara(paraName){
 var sUrl = location.href;
 var sReg = "(?:\\?|&){1}"+paraName+"=([^&]*)";
 var re=new RegExp(sReg,"gi");
 re.exec(sUrl);
 return RegExp.$1;
}
//应用实例：test_para.html?a=11&b=22&c=33
console.log(getUrlPara("a"));
console.log(getUrlPara("b"));
</script>
//方法三：
<script type="text/javascript">
function Request(strName){
 var strHref = "www.cnlei.org/index.htm?a=aaa&b=bbb&c=ccc";
 var intPos = strHref.indexOf("?");
 var strRight = strHref.substr(intPos + 1);
 var arrTmp = strRight.split("&");
 for(var i = 0; i < arrTmp.length; i++) {
 var arrTemp = arrTmp[i].split("=");
 if(arrTemp[0].toUpperCase() == strName.toUpperCase()) 
 return arrTemp[1];
 }
 return "";
}
console.log(Request("a"));
console.log(Request("b"));
console.log(Request("c"));
</script>
```
6. div已经有一个class值，s再给它添加一个class值
[javascript] view plain copy
print ?
1. document.getElementById(“comn”).className+=“ comn”;
```
document.getElementById("comn").className+=" comn";
```
7. iframe操作
a. 在iframe子页面中获取当前iframe的id(firefox可以)
[javascript] view plain copy
print ?
1. var frameId = window.frameElement && window.frameElement.id || ”;
```
var frameId = window.frameElement && window.frameElement.id || '';
```
遍历父页面所有iframe并输出ID(firefox可以)
[javascript] view plain copy
print ?
1. function iframeID(){
2. var fs = window.parent.window.frames;
3. for(var i = 0; i < fs.length; i++){
4. if (window == fs[i]){
5. console.log(window.parent.document.getElementsByTagName(”iframe”)[i].id)
6. return window.parent.document.getElementsByTagName(“iframe”)[i].id;
7. }
8. }
9. };
```
function iframeID(){
 var fs = window.parent.window.frames;
 for(var i = 0; i < fs.length; i++){
 if (window == fs[i]){
 console.log(window.parent.document.getElementsByTagName("iframe")[i].id)
 return window.parent.document.getElementsByTagName("iframe")[i].id;
 }
 }
};
```
b. js判断iframe是否加载完成
[javascript] view plain copy
print ?
1. var iframe = document.createElement(“iframe”);
2. iframe.src = ”http://www.planabc.net”;
3. if (iframe.attachEvent){
4. iframe.attachEvent(”onload”, function(){
5. alert(”Local iframe is now loaded.”);
6. });
7. } else {
8. iframe.onload = function(){
9. alert(”Local iframe is now loaded.”);
10. };
11. }
```
var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";
if (iframe.attachEvent){
 iframe.attachEvent("onload", function(){
 alert("Local iframe is now loaded.");
 });
} else {
 iframe.onload = function(){
 alert("Local iframe is now loaded.");
 };
}
```
c. js判断iframe是加载成功还是加载失败
[javascript] view plain copy
print ?
1. url = document.getElementById(‘iframe1’).src;
2. var xmlhttp = new XMLHttpRequest();
3. xmlhttp.open(”GET”,url,true);
4. xmlhttp.send();
5. xmlhttp.onreadystatechange = function(){
6. if(xmlhttp.readyState == 4){
7. if (xmlhttp.status == 200){
8. alert(”加载成功！”);
9. } else {
10. alert(”加载失败！”);
11. }
12. }
13. }
14. var oFrm = document.getElementById(“ifrm”);
15. oFrm.onload = oFrm.onreadystatechange = function() {
16. if (this.readyState && this.readyState != ‘complete’)
17. return;
18. else {
19. onComplete();
20. }
21. }
```
url = document.getElementById('iframe1').src;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET",url,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
 if(xmlhttp.readyState == 4){
 if (xmlhttp.status == 200){
 alert("加载成功！");
 } else {
 alert("加载失败！");
 }
 }
}
var oFrm = document.getElementById("ifrm");
oFrm.onload = oFrm.onreadystatechange = function() {
 if (this.readyState && this.readyState != 'complete') 
 return;
 else {
 onComplete();
 }
}
```
d 加载iframe 禁用缓存
1. 将http header访问设置成no-cache的：
[html] view plain copy
print ?
1. <meta HTTP-EQUIV=“CACHE-CONTROL” CONTENT=“NO-CACHE”>
2. <meta HTTP-EQUIV=“PRAGMA” CONTENT=“NO-CACHE”>
```
<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
```
2. 在web site 后面加个随机参数，绕过相同url读取cache问题
[javascript] view plain copy
print ?
1. iframeObj.src = “http://www.example.com/page/myframe.html?random=” + (new Date()).getTime() + Math.floor(Math.random() * 1000000);
```
iframeObj.src = "http://www.example.com/page/myframe.html?random=" + (new Date()).getTime() + Math.floor(Math.random() * 1000000);
```
8. 验证邮箱格式是否正确
[javascript] view plain copy
print ?
1. function chkEmail(strEmail) {
2. if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(strEmail)) {
3. return false;
4. }
5. else {
6. return true;
7. }
8. }
```
function chkEmail(strEmail) {
 if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(strEmail)) {
 return false;
 }
 else {
 return true;
 }
}
```
9. 判断设备为PC或是移动终端
[javascript] view plain copy
print ?
1. //判断平台
2. isPCByPlat = function(){
3. var platForm = navigator.platform.toLowerCase();
4. var isWin = (platForm==“win32”)||(platForm==“win64”)||(platForm==“windows”)||(platForm.indexOf(“win”) > -1);
5. if(isWin)
6. return “windows”;
7. var isMac = (platForm==“mac68k”)||(platForm==“macppc”)||(platForm==“macintosh”)||(platForm==“macintel”);
8. if(isMac)
9. return “mac”;
10. return false;
11. };
12. //判断UA
13. isPCByOSList = function(uaArg){
14. var pcOS = [“AIX”,“Amiga”,“BeOS”,“DragonFly”,“FreeBSD”,“GNU”,“Haiku”,“HP-UX”,“IRIX”,“Joli”,“Java”,“Macintosh”,“Minix”,“MorphOS”,“NetBSD”,“OpenBSD”,“PClinuxOS”,“QNX x86pc”,“SunOS”,“Ubuntu”,“Mint”,“Red Hat”,“Slackware”,“SUSE”,“PCLinuxOS”,“Debian”,“Fedora”,“CentOS”,“Vine”,“Arch Linux”,“Gentoo”,“Kanotix”,“Mandriva”];
15. for (var i = 0; i < pcOS.length; i++){
16. if(uaArg.indexOf(pcOS[i]) > -1){
17. return true;
18. }
19. };
20. return false;
21. };
23. if(isPCByPlat() || isPCByOSList(navigator.userAgent)){
24. console.log(”PC”);
25. } else {
26. console.log(”Mobile”);
27. };
```
//判断平台
isPCByPlat = function(){
 var platForm = navigator.platform.toLowerCase();
 var isWin = (platForm=="win32")||(platForm=="win64")||(platForm=="windows")||(platForm.indexOf("win") > -1);
 if(isWin) 
 return "windows";
 var isMac = (platForm=="mac68k")||(platForm=="macppc")||(platForm=="macintosh")||(platForm=="macintel");
 if(isMac) 
 return "mac";
 return false;
};
//判断UA
isPCByOSList = function(uaArg){
 var pcOS = ["AIX","Amiga","BeOS","DragonFly","FreeBSD","GNU","Haiku","HP-UX","IRIX","Joli","Java","Macintosh","Minix","MorphOS","NetBSD","OpenBSD","PClinuxOS","QNX x86pc","SunOS","Ubuntu","Mint","Red Hat","Slackware","SUSE","PCLinuxOS","Debian","Fedora","CentOS","Vine","Arch Linux","Gentoo","Kanotix","Mandriva"];
 for (var i = 0; i < pcOS.length; i++){
 if(uaArg.indexOf(pcOS[i]) > -1){
 return true;
 }
 };
 return false;
};

if(isPCByPlat() || isPCByOSList(navigator.userAgent)){
 console.log("PC");
} else {
 console.log("Mobile");
};
```
10. 动态插入js
[javascript] view plain copy
print ?
1. function loadScript(url, callback) {
2. //创建script
3. var script = document.createElement(“script”);
4. script.type = ”text/javascript”;
5. script.src = url;
6. document.getElementsByTagName(”head”)[0].appendChild(script);
7. //加载完毕回调
8. if(script.readyState) { //for IE
9. script.onreadystatechange = function() {
10. if(script.readyState == “loaded” || script.readyState == “complete”) {
11. script.onreadystatechange = null;
12. if(callback){
13. callback();
14. }
15. }
16. };
17. }else { //for Others
18. script.onload = function() {
19. if(callback){callback();}
20. };
21. }
22. }
23. //加载script
24. loadScript(”http://www.ueder.net/testhtml/jquery/jquery.js”);
```
function loadScript(url, callback) {
 //创建script
 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = url;
 document.getElementsByTagName("head")[0].appendChild(script);
 //加载完毕回调
 if(script.readyState) { //for IE
 script.onreadystatechange = function() {
 if(script.readyState == "loaded" || script.readyState == "complete") {
 script.onreadystatechange = null;
 if(callback){
 callback();
 }
 }
 };
 }else { //for Others
 script.onload = function() {
 if(callback){callback();}
 };
 }
}
//加载script
loadScript("http://www.ueder.net/testhtml/jquery/jquery.js");
```
11. js实现页面跳转的几种方式
a. window.location.href=”login.jsp?backurl=”+window.location.href;
b. window.history.back(-1); //返回
c. window.navigate(“top.jsp”); //针对IE的
d. self.location=”top.htm”;
e. top.location=”xx.jsp”; //非法访问

12. js获取css属性值
[javascript] view plain copy
print ?
1. /**
2. * GetCurrentStyle
3. */
4. function GetCurrentStyle(obj, style){
5. if (obj.currentStyle) { //IE浏览器
6. return obj.currentStyle[style];
7. } else if (window.getComputedStyle) { //W3C标准浏览器
8. propprop = style.replace(/([A-Z])/g, ”-$1”);
9. propprop = style.toLowerCase();
10. return document.defaultView.getComputedStyle(obj, null)[propprop];
11. }
12. return null;
13. }; //GetCurrentStyle
16. var dd = document.getElementById(“box”);
17. console.log(GetCurrentStyle(dd, ”display”));
```
/**
* GetCurrentStyle
*/
function GetCurrentStyle(obj, style){
 if (obj.currentStyle) { //IE浏览器
 return obj.currentStyle[style];
 } else if (window.getComputedStyle) { //W3C标准浏览器
 propprop = style.replace(/([A-Z])/g, "-$1");
 propprop = style.toLowerCase();
 return document.defaultView.getComputedStyle(obj, null)[propprop];
 }
 return null;
}; //GetCurrentStyle


var dd = document.getElementById("box");
console.log(GetCurrentStyle(dd, "display"));
```
13. 日期转数值
[javascript] view plain copy
print ?
1. var d = +new Date();
```
var d = +new Date();
```
14. 漂亮的随机码
[javascript] view plain copy
print ?
1. Math.random().toString(16).substring(2); //14位
2. Math.random().toString(36).substring(2); //11位
```
Math.random().toString(16).substring(2); //14位
Math.random().toString(36).substring(2); //11位
```
15. 用0补全位数
[javascript] view plain copy
print ?
1. function prefixInteger(num, length) {
2. return (num / Math.pow(10, length)).toFixed(length).substr(2);
3. };
4. prefixInteger(31, 4);//0031
```
function prefixInteger(num, length) {
 return (num / Math.pow(10, length)).toFixed(length).substr(2);
};
prefixInteger(31, 4);//0031
```

Denny辉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS常用代码块

转载于：http://blog.csdn.net/ligang2585116！1. 加入收藏夹代码[javascript] view plain copy print?<script type=“text/javascript”> function AddFavorite(sURL,sTitle){ try{ window.external.addFavorite(s
复制链接

扫一扫