作者:Ei Sabai
翻译:Terry li - GBin1.com
英文:
10 most useful Javascript snippets from snipplr
下面的代码片段来自snipplr,一个代码片段库。他们都是用纯javascript书写的,没有实用任何javascript类库,比如,jQuery,Mootools,或者Dojo。
function checkMail(email){
var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(email)) {
return true;
}
return false;
}
<script type="text/javascript">
function toggle_checkboxes(id) {
if (!document.getElementById){ return; }
if (!document.getElementsByTagName){ return; }
var inputs = document.getElementById(id).getElementsByTagName("input");
for(var x=0; x < inputs.length; x++) {
if (inputs[x].type == 'checkbox'){
inputs[x].checked = !inputs[x].checked;
}
}
}
</script>
<div id="parent_box">
<input type="checkbox" name="foo" value="1" /> 1<br/>
<input type="checkbox" name="foo" value="2" checked="checked" /> 2<br/>
<input type="checkbox" name="foo" value="3" checked="checked" /> 3<br/>
<br/>
<input type="button" value="Toggle checkboxes"
onclick="toggle_checkboxes('parent_box')" />
</div>
var images = new Array();
function preloadImages(){
for (i=0; i < preloadImages.arguments.length; i++){
images[i] = new Image();
images[i].src = preloadImages.arguments[i];
}
}
preloadImages("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg");
4. javascript cookies设置 Source
/**
* Sets a Cookie with the given name and value.
*
* name Name of the cookie
* value Value of the cookie
* [expires] Expiration date of the cookie (default: end of current session)
* [path] Path where the cookie is valid (default: path of calling document)
* [domain] Domain where the cookie is valid
* (default: domain of calling document)
* [secure] Boolean value indicating if the cookie transmission requires a
* secure transmission
*/
function setCookie(name, value, expires, path, domain, secure) {
document.cookie= name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
/**
* Gets the value of the specified cookie.
*
* name Name of the desired cookie.
*
* Returns a string containing value of specified cookie,
* or null if cookie does not exist.
*/
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
/**
* Deletes the specified cookie.
*
* name name of the cookie
* [path] path of the cookie (must be same as path used to create cookie)
* [domain] domain of the cookie (must be same as domain used to create cookie)
*/
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
function sortList(id) {
var obj = document.getElementById("id");
var values = new Array();
for(var i = 0; i < obj.options.length; i++) {
values.push(obj.options[i].innerHTML + "--xx--" + obj.options[i].value);
}
values = values.sort();
for(var i = 0; i < values.length; i++) {
valueArray = values[i].split('--xx--');
obj.options[i].innerHTML = valueArray[0];
obj.options[i].value = valueArray[1];
}
}
function sortList(id) {
var obj = document.getElementById("id");
var values = new Array();
for(var i = 0; i < obj.options.length; i++) {
values.push(obj.options[i].innerHTML + "--xx--" + obj.options[i].value);
}
values = values.sort();
for(var i = 0; i < values.length; i++) {
valueArray = values[i].split('--xx--');
obj.options[i].innerHTML = valueArray[0];
obj.options[i].value = valueArray[1];
}
}
function sortList(id) {
var obj = document.getElementById("id");
var values = new Array();
for(var i = 0; i < obj.options.length; i++) {
values.push(obj.options[i].innerHTML + "--xx--" + obj.options[i].value);
}
values = values.sort();
for(var i = 0; i < values.length; i++) {
valueArray = values[i].split('--xx--');
obj.options[i].innerHTML = valueArray[0];
obj.options[i].value = valueArray[1];
}
}
6. 检测浏览器是否支持HTML5 video
Source
// Check if the browser understands the video element.
function understands_video() {
return !!document.createElement('video').canPlayType; // boolean
}
if ( !understands_video() ) {
// Must be older browser or IE.
// Maybe do something like hide custom
// HTML5 controls. Or whatever...
videoControls.style.display = 'none';
}
7. 得到浏览器的viewport宽度和高度 Source
<script type="text/javascript">
<!--
var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>
8. 由class名字取得对象元素 Source
/*
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
*/
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "-");
var oRegExp = new RegExp("(^|s)" + strClassName + "(s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
/*
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
*/
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "-");
var oRegExp = new RegExp("(^|s)" + strClassName + "(s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
setTimeout( "window.location.href="http://walkerwines.com.au/'", 5*1000 );
10. iphone类型的方向变化效果
Source
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);
function setOrientation() {
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
var cl = document.body.className;
cl = cl.replace(/portrait|landscape/, orient);
document.body.className = cl;
}
原文出处:来自snipplr的10个最实用的javascript代码片段
分享到:
相关推荐
## snip-eclipse 是一个非常简单的应用程序,无需打开网络浏览器即可在 Snipplr 数据库中搜索代码片段! ##Usage## 可以使用“ CTRL + ~ ”打开窗口。 这将打开一个带有文本框和列表的简单方形对话窗口。 在文本框...
与 snipplr.com 交谈的 eclipse 插件
简单的Java Swing应用程序可检索您喜欢的Snipplr.com代码段。
一:让layout的间距和图片与图片之间的间距相等!看图帮助理解! 左右方向都可以应用!...看这个地址的方法:http://snipplr.com/view/7393/css-multi-columns-layout/崩溃般的设置… 原帖地址:http://weilaixu
基于matlab实现实现了基于项目的协同过滤代码,MATLAB实现.rar
数据来源:中国劳动统计NJ-2023版
企业固定资产信息管理系统设计与实现.doc
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
【作品名称】:基于VB实现的学生成绩管理系统(源代码+系统+开题报告+答辩PPT) 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
银行信贷管理系统设计与实现-(毕业设计)1.docx
【作品名称】:基于VB实现的银行代扣代发工资系统(源代码+系统+开题报告) 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
数据来源:中国人口与就业统计NJ-2023版
java,大学课后作业
数据来源:中国电力统计NJ-2021版
【作品名称】:基于VB实现的网上餐饮管理系统设计(论文+源代码+开题报告+英文文献) 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
基于matlab实现烟花算法进行函数最小_最大值寻优,对十多个测试函数进行了寻优,效果良好,代码附带详细说明.rar
数据来源:中国电力统计NJ-2021版
【作品名称】:基于VB实现的商场管理系统设计(源代码+系统) 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。