`
vipshichg
  • 浏览: 266849 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

(一)100个直接可以拿来用的JavaScript实用功能代码片段(一)

    博客分类：
  • JS
javascript浏览器脚本 
阅读更多

1、原生JavaScript实现字符串长度截取

复制代码
 1    function cutstr(str, len) {
 2         var temp;
 3         var icount = 0;
 4         var patrn = /[^\x00-\xff]/;
 5         var strre = "";
 6         for (var i = 0; i < str.length; i++) {
 7             if (icount < len - 1) {
 8                 temp = str.substr(i, 1);
 9                 if (patrn.exec(temp) == null) {
10                     icount = icount + 1
11                 } else {
12                     icount = icount + 2
13                 }
14                 strre += temp
15             } else {
16                 break
17             }
18         }
19         return strre + "..."
20     }
复制代码

 

2、原生JavaScript获取域名主机

复制代码
 1     function getHost(url) {
 2         var host = "null";
 3         if(typeof url == "undefined"|| null == url) {
 4             url = window.location.href;
 5         }
 6         var regex = /^\w+\:\/\/([^\/]*).*/;
 7         var match = url.match(regex);
 8         if(typeof match != "undefined" && null != match) {
 9             host = match[1];
10         }
11         return host;
12 }
复制代码

 

3、原生JavaScript清除空格

1   String.prototype.trim = function() {
2         var reExtraSpace = /^\s*(.*?)\s+$/;
3         return this.replace(reExtraSpace, "$1")
4     }


4、原生JavaScript替换全部

1     String.prototype.replaceAll = function(s1, s2) {
2         return this.replace(new RegExp(s1, "gm"), s2)
3     }


5、原生JavaScript转义html标签

1 function HtmlEncode(text) {
2         return text.replace(/&/g, '&amp').replace(/\"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
3     }

 
6、原生JavaScript还原html标签

1 function HtmlDecode(text) {
2         return text.replace(/&amp;/g, '&').replace(/&quot;/g, '\"').replace(/&lt;/g, '<').replace(/&gt;/g, '>')
3     }

 
7、原生JavaScript时间日期格式转换

复制代码
 1     Date.prototype.Format = function(formatStr) {
 2         var str = formatStr;
 3         var Week = ['日', '一', '二', '三', '四', '五', '六'];
 4         str = str.replace(/yyyy|YYYY/, this.getFullYear());
 5         str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100));
 6         str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1));
 7         str = str.replace(/M/g, (this.getMonth() + 1));
 8         str = str.replace(/w|W/g, Week[this.getDay()]);
 9         str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate());
10         str = str.replace(/d|D/g, this.getDate());
11         str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours());
12         str = str.replace(/h|H/g, this.getHours());
13         str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes());
14         str = str.replace(/m/g, this.getMinutes());
15         str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds());
16         str = str.replace(/s|S/g, this.getSeconds());
17         return str
18     }
复制代码


8、原生JavaScript判断是否为数字类型

复制代码
1 function isDigit(value) {
2         var patrn = /^[0-9]*$/;
3         if (patrn.exec(value) == null || value == "") {
4             return false
5         } else {
6             return true
7         }
8     }
复制代码


9、原生JavaScript设置cookie值

复制代码
1 function setCookie(name, value, Hours) {
2             var d = new Date();
3         var offset = 8;
4         var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
5         var nd = utc + (3600000 * offset);
6         var exp = new Date(nd);
7         exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000);
8         document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString() + ";domain=360doc.com;"
9     }
复制代码


10、原生JavaScript获取cookie值

1     function getCookie(name) {
2         var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
3         if (arr != null) return unescape(arr[2]);
4         return null
5     }


11、原生JavaScript加入收藏夹

复制代码
 1 function AddFavorite(sURL, sTitle) {
 2         try {
 3             window.external.addFavorite(sURL, sTitle)
 4         } catch(e) {
 5             try {
 6                 window.sidebar.addPanel(sTitle, sURL, "")
 7             } catch(e) {
 8                 alert("加入收藏失败，请使用Ctrl+D进行添加")
 9             }
10         }
11     }
复制代码

 
12、原生JavaScript设为首页

复制代码
 1 function setHomepage() {
 2         if (document.all) {
 3             document.body.style.behavior = 'url(#default#homepage)';
 4             document.body.setHomePage('http://www.jq-school.com')
 5         } else if (window.sidebar) {
 6             if (window.netscape) {
 7                 try {
 8                     netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")
 9                 } catch(e) {
10                     alert("该操作被浏览器拒绝，如果想启用该功能，请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true")
11                 }
12             }
13             var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
14             prefs.setCharPref('browser.startup.homepage', 'http://www.jq-school.com')
15         }
16     }
复制代码

 
13、原生JavaScript判断IE6

复制代码
1 var ua = navigator.userAgent.toLowerCase();
2     var isIE6 = ua.indexOf("msie 6") > -1;
3     if (isIE6) {
4         try {
5             document.execCommand("BackgroundImageCache", false, true)
6         } catch(e) {}
7     }
复制代码

 
14、原生JavaScript加载样式文件

复制代码
 1 function LoadStyle(url) {
 2         try {
 3             document.createStyleSheet(url)
 4         } catch(e) {
 5             var cssLink = document.createElement('link');
 6             cssLink.rel = 'stylesheet';
 7             cssLink.type = 'text/css';
 8             cssLink.href = url;
 9             var head = document.getElementsByTagName('head')[0];
10             head.appendChild(cssLink)
11         }
12     }
复制代码

 

15、原生JavaScript返回脚本内容

复制代码
 1 function evalscript(s) {
 2         if(s.indexOf('<script') == -1) return s;
 3         var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;
 4         var arr = [];
 5         while(arr = p.exec(s)) {
 6             var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
 7             var arr1 = [];
 8             arr1 = p1.exec(arr[0]);
 9             if(arr1) {
10                 appendscript(arr1[1], '', arr1[2], arr1[3]);
11             } else {
12                 p1 = /<script(.*?)>([^\x00]+?)<\/script>/i;
13                 arr1 = p1.exec(arr[0]);
14                 appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);
15             }
16         }
17         return s;
18     }
复制代码

 

16、原生JavaScript清除脚本内容

1 function stripscript(s) {
2         return s.replace(/<script.*?>.*?<\/script>/ig, '');
3     }

 

17、原生JavaScript动态加载脚本文件

复制代码
 1 function appendscript(src, text, reload, charset) {
 2         var id = hash(src + text);
 3         if(!reload && in_array(id, evalscripts)) return;
 4         if(reload && $(id)) {
 5             $(id).parentNode.removeChild($(id));
 6         }
 7      
 8         evalscripts.push(id);
 9         var scriptNode = document.createElement("script");
10         scriptNode.type = "text/javascript";
11         scriptNode.id = id;
12         scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset);
13         try {
14             if(src) {
15                 scriptNode.src = src;
16                 scriptNode.onloadDone = false;
17                 scriptNode.onload = function () {
18                     scriptNode.onloadDone = true;
19                     JSLOADED[src] = 1;
20                 };
21                 scriptNode.onreadystatechange = function () {
22                     if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) {
23                         scriptNode.onloadDone = true;
24                         JSLOADED[src] = 1;
25                     }
26                 };
27             } else if(text){
28                 scriptNode.text = text;
29             }
30             document.getElementsByTagName('head')[0].appendChild(scriptNode);
31         } catch(e) {}
32     }
复制代码

 

18、原生JavaScript返回按ID检索的元素对象

1 function $(id) {
2         return !id ? null : document.getElementById(id);
3     }

 

19、原生JavaScript返回浏览器版本内容

复制代码
 1 function browserVersion(types) {
 2         var other = 1;
 3         for(i in types) {
 4             var v = types[i] ? types[i] : i;
 5             if(USERAGENT.indexOf(v) != -1) {
 6                 var re = new RegExp(v + '(\\/|\\s)([\\d\\.]+)', 'ig');
 7                 var matches = re.exec(USERAGENT);
 8                 var ver = matches != null ? matches[2] : 0;
 9                 other = ver !== 0 && v != 'mozilla' ? 0 : other;
10             }else {
11                 var ver = 0;
12             }
13             eval('BROWSER.' + i + '= ver');
14         }
15         BROWSER.other = other;
16     }
复制代码

 

20、原生JavaScript元素显示的通用方法

复制代码
 1 function $(id) {
 2         return !id ? null : document.getElementById(id);
 3     }
 4     function display(id) {
 5         var obj = $(id);
 6         if(obj.style.visibility) {
 7             obj.style.visibility = obj.style.visibility == 'visible' ? 'hidden' : 'visible';
 8         } else {
 9             obj.style.display = obj.style.display == '' ? 'none' : '';
10         }
11     }
复制代码

 

21、原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法?用如下函数实现

复制代码
1 function insertAfter(newChild,refChild){ 
2     var parElem=refChild.parentNode; 
3     if(parElem.lastChild==refChild){ 
4         refChild.appendChild(newChild); 
5     }else{ 
6         parElem.insertBefore(newChild,refChild.nextSibling); 
7     } 
8 }
复制代码

 

22、原生JavaScript中兼容浏览器绑定元素事件

复制代码
1 function addEventSamp(obj,evt,fn){ 
2     if (obj.addEventListener) { 
3         obj.addEventListener(evt, fn, false); 
4     }else if(obj.attachEvent){ 
5         obj.attachEvent('on'+evt,fn); 
6     } 
7 }
复制代码

 

23、原生JavaScript光标停在文字的后面，文本框获得焦点时调用

复制代码
1 function focusLast(){ 
2     var e = event.srcElement; 
3     var r =e.createTextRange(); 
4     r.moveStart('character',e.value.length); 
5     r.collapse(true); 
6     r.select(); 
7 }
复制代码

 

24、原生JavaScript检验URL链接是否有效

复制代码
 1 function getUrlState(URL){ 
 2     var xmlhttp = new ActiveXObject("microsoft.xmlhttp"); 
 3     xmlhttp.Open("GET",URL, false);  
 4     try{  
 5         xmlhttp.Send(); 
 6     }catch(e){
 7     }finally{ 
 8         var result = xmlhttp.responseText; 
 9         if(result){ 
10             if(xmlhttp.Status==200){ 
11                 return(true); 
12             }else{ 
13                 return(false); 
14             } 
15         }else{ 
16             return(false); 
17         } 
18     } 
19 }
复制代码

 

25、原生JavaScript格式化CSS样式代码

复制代码
1 function formatCss(s){//格式化代码
2     s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
3     s = s.replace(/;\s*;/g, ";"); //清除连续分号
4     s = s.replace(/\,[\s\.\#\d]*{/g, "{");
5     s = s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2");
6     s = s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2");
7     s = s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2");
8     return s;
9 }
复制代码

 

26、原生JavaScript压缩CSS样式代码

复制代码
1 function yasuoCss (s) {//压缩代码
2     s = s.replace(/\/\*(.|\n)*?\*\//g, ""); //删除注释
3     s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
4     s = s.replace(/\,[\s\.\#\d]*\{/g, "{"); //容错处理
5     s = s.replace(/;\s*;/g, ";"); //清除连续分号
6     s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白
7     return (s == null) ? "" : s[1];
8 }
复制代码

 

27、原生JavaScript获取当前路径

复制代码
1 var currentPageUrl = "";
2 if (typeof this.href === "undefined") {
3     currentPageUrl = document.location.toString().toLowerCase();
4 }
5 else {
6     currentPageUrl = this.href.toString().toLowerCase();
7 }
复制代码

 

28、原生JavaScriptIP转成整型

复制代码
1 function _ip2int(ip){
2     var num = 0;
3     ip = ip.split(".");
4     num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);
5     num = num >>> 0;
6     return num;
7 }
复制代码

 

29、原生JavaScript整型解析为IP地址

复制代码
 1 function _int2iP(num){
 2     var str;
 3     var tt = new Array();
 4     tt[0] = (num >>> 24) >>> 0;
 5     tt[1] = ((num << 8) >>> 24) >>> 0;
 6     tt[2] = (num << 16) >>> 24;
 7     tt[3] = (num << 24) >>> 24;
 8     str = String(tt[0]) + "." + String(tt[1]) + "." + String(tt[2]) + "." + String(tt[3]);
 9     return str;
10 }
复制代码

 

30、原生JavaScript实现checkbox全选与全不选

复制代码
 1 function checkAll() {
 2     var selectall = document.getElementById("selectall");
 3     var allbox = document.getElementsByName("allbox");
 4     if (selectall.checked) {
 5         for (var i = 0; i < allbox.length; i++) {
 6             allbox[i].checked = true;
 7         }
 8     } else {
 9         for (var i = 0; i < allbox.length; i++) {
10             allbox[i].checked = false;
11         }
12     }
13 }
复制代码

 

100个直接可以拿来用的JavaScript实用功能代码片段(二) 

 

100个直接可以拿来用的JavaScript实用功能代码片段(三) 

13
顶
21
踩
分享到：
| 使用JConsole远程监控JVM
评论
11 楼 Y2N2C2J2 2013-09-13  
貌似刚在博客园中看到过这个帖子！
10 楼 guozhen_168 2013-09-13  
整体感觉好不错，不过有几个东西是会和jquery冲突的，我觉得用的人，要做些适当改动。
9 楼 oham_一1一 2013-09-13  
 
8 楼 tedeum 2013-09-13  
多谢分享，确实很实用。
7 楼 PlayGod1984 2013-09-13  
持续关注，有时候原生的很不错
6 楼 kiven 2013-09-13  
谢谢分享。。 
5 楼 liyaxi 2013-09-13  
太棒了 ， 感谢朋友分享了
4 楼 missingeverytime 2013-09-12  
不错的内容，谢谢！~
3 楼 xinglan500 2013-09-12  
好方便
2 楼 myloverjay 2013-09-12  

    [*]
55757353 写道
非常有用

1 楼 55757353 2013-09-12  
非常有用
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    100个直接可以拿来用的JavaScript实用功能代码片段

    根据提供的文件信息，我们可以归纳总结出以下几个JavaScript实用功能代码片段的知识点： ### 1. 字符串截取：中文字符的正确处理 **代码片段**： ```javascript function cutstr(str, len) { var temp; var ...

    分享100个直接可以拿来用的JavaScript实用功能代码片段

    在JavaScript的世界里，掌握一些实用的功能代码片段是提升开发效率的关键。这些代码片段涵盖了各种常见的前端开发场景，从DOM操作到事件处理，再到数据处理和动画效果，无一不是前端开发者日常所需。以下是对这些...

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    67、原生JavaScript实现打开一个窗体通用方法 68、原生JavaScript判断是否为客户端设备 69、原生JavaScript获取单选按钮的值 70、原生JavaScript获取复选框的值 71、原生JavaScript判断是否为邮箱 72、原生...

    40个直接可以拿来用的JavaScript实用功能代码

    本文将介绍40个可以直接使用的JavaScript实用功能代码，旨在帮助开发者提高效率，减少重复工作。这些功能包括字符串处理、URL解析、日期时间格式化等多个方面。 首先，字符串处理是常见的任务。例如，`cutstr()`...

    100个可以直接拿来用的javaScript代码

    本文将围绕“100个可以直接拿来用的JavaScript代码”这一主题，详细阐述其中可能涵盖的常见JavaScript知识点，以及它们在实际开发中的应用。 1. **变量与数据类型**：JavaScript支持var、let和const声明变量，以及...

    非常实用的网页制作，JavaScript功能代码片段精选

    这个压缩包中的内容显然是一些精心挑选的JavaScript功能代码片段，可以帮助开发者快速实现一些常见的网页特效和功能。接下来，我们将深入探讨这些标签和文件名所暗示的知识点。 1. **树形导航**：在网页设计中，树...

    直接拿来用的15个jQuery代码片段

    标题中提到的是“直接拿来用的15个jQuery代码片段”，这表明本文将分享十五个可以直接应用于项目中的实用jQuery代码片段。jQuery是广泛使用的一个JavaScript库，它简化了HTML文档遍历、事件处理、动画以及AJAX交互...

    JavaScript_块强大的扩展ObsidianMD，允许用户访问他们的代码片段直接在Obsidian工作空间.zip

    "JavaScript_块强大的扩展ObsidianMD，允许用户访问他们的代码片段直接在Obsidian工作空间.zip" 提供的资源可能是为Obsidian创建的一个插件，旨在帮助用户在编辑环境中直接访问和使用代码片段。 这个插件可能包括...

    Snibox是一个可自建托管的代码片段管理器

    Snibox 是一个强大的代码片段管理工具，特别适合开发者和团队用来存储、管理和分享代码片段。它的最大亮点在于支持自建托管，这意味着用户可以完全掌控自己的数据，而不必依赖第三方服务，增强了数据的安全性和隐私...

    前端常用代码片段

    ### 前端常用代码片段知识点详解 #### 一、预加载图像 预加载图像是一种优化技术，用于提高用户体验，特别是在图像密集型网站上。通过预加载，可以在图像实际可见之前将其加载到用户的浏览器中。这有助于减少等待...

    jQuery常用代码片段

    这篇博文"jQuery常用代码片段"很可能是为了分享一些实用的jQuery代码示例，帮助开发者提高工作效率。下面我们将深入探讨jQuery的一些核心功能和常见用法。 1. **选择器**: jQuery的选择器类似于CSS，可以轻松地选取...

    jquery实用代码片段集合

    ### jQuery实用代码片段集合知识点 ...以上知识点涵盖了在实际开发中常用的jQuery代码片段，它们可以提高开发效率，增强用户体验。通过这些实用的代码片段，开发者可以更灵活地处理常见的前端开发场景。

    vscode代码片段部分

    `vfor.code-snippets` 是Vue.js中的`v-for`指令的代码片段，`v-for`用来基于一个数组或对象重复渲染元素。这些片段可以帮助快速生成`v-for`循环结构。 `$set.code-snippets` 可能涉及到Vue.js的`this.$set()`方法，...

    Javascript 常用代码总结

    ### JavaScript常用代码总结 在日常开发中，JavaScript作为前端开发的核心语言之一，有着广泛的应用场景。下面将根据提供的部分文件内容来归纳总结一些常见的JavaScript代码片段及其应用场景。 #### 1. 操作DOM...

    javascript特效代码大全

    JavaScript特效代码大全是一...JavaScript特效代码大全将为你提供丰富的示例和代码片段，方便你在实际项目中快速查找和应用。通过学习和实践这些特效，你可以提升自己的JavaScript技能，为网页增加更多互动性和吸引力。

    100个常用js代码

    "100个常用js代码"这个主题涵盖了一系列实用的JavaScript代码片段，旨在帮助开发者提升工作效率，解决日常编程中遇到的问题。下面将详细解析这些知识点： 1. **DOM操作**：JavaScript可以操作文档对象模型（DOM），...

    JavaScript常用语句精选

    本文档中的代码片段虽然较为特殊且不易理解，但其中涉及到了一些关键的概念，如通过 `document.all` 访问页面元素、使用 `ExecWB` 方法进行浏览器操作以及通过 `window.external` 对象执行特定任务等。这些内容对于...

    那些精彩的JavaScript代码片段

    本文将分享一些实用的JavaScript代码片段，它们在处理数组、类型检测、对象拷贝、Cookie操作、数值处理、DOM操作、正则表达式和时间格式化等方面展现出精彩的用法。 1. **数组条件筛选**：JavaScript可以轻松地对数...

    部分常用JavaScript代码

    这篇博客文章“部分常用JavaScript代码”可能包含了作者在实际开发中经常使用的JavaScript片段，旨在帮助读者理解和掌握JavaScript的一些核心概念和实用技巧。下面我们将深入探讨一些常见的JavaScript知识点。 1. ...

Magicbox
Global site tag (gtag.js) - Google Analytics