作者: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
微信小程序番茄时钟的源码,支持进一步的修改。番茄钟,指的是把工作任务分解成半小时左右,集中精力工作25分钟后休息5分钟,如此视作种一个“番茄”,而“番茄工作法”的流程能使下一个30分钟更有动力。
电子元件 电子行业 行业分析 数据分析 数据报告 行业报告
安享智慧理财测试项目Mock服务代码
【资源说明】 课程设计 基于SparkMLlib的ALS算法的电影推荐系统源码+详细文档+全部数据齐全.zip课程设计 基于SparkMLlib的ALS算法的电影推荐系统源码+详细文档+全部数据齐全.zip 【备注】 1、该项目是高分毕业设计项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!
华中科技大学电信专业 课程资料 作业 代码 实验报告-雷达与信息对抗-内含源码和说明书.zip
私信博主免费获取真题解析以及代码
【资源说明】 基于Bilibili公开的数据,通过Flink实时分析计算,做成需要的动态图表源码+部署文档+全部资料齐全 高分项目.zip基于Bilibili公开的数据,通过Flink实时分析计算,做成需要的动态图表源码+部署文档+全部资料齐全 高分项目.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
私信博主免费获取真题解析以及代码
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
【资源说明】 基于Hadoop的智能购书系统的设计与实现+部署文档+全部资料 高分项目.zip基于Hadoop的智能购书系统的设计与实现+部署文档+全部资料 高分项目.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
在面对机械装备制造行业日益增长的信息化需求时,本PPT格式的解决方案文档旨在提供一个全面、高效的数字化转型蓝图。这个资料包涵盖了从生产流程自动化到智能数据分析,再到供应链管理优化的各个方面,旨在帮助机械制造企业实现更高层次的生产智能化和运营效率。解决方案中,我们首先强调了制造执行系统(MES)的集成,它能够实时监控工厂的生产线,确保生产过程的透明度和可追溯性。通过与物联网(IoT)设备的结合,可以实现设备状态的远程监控和维护预测,从而减少停机时间并提高生产效率。其次,方案中还包含了一套完整的企业资源规划(ERP)系统,它能够帮助企业管理从原材料采购到成品出库的整个流程,确保物流和信息流的无缝对接。ERP系统的应用不仅提升了资源的使用效率,也为企业决策提供了数据支持。此外,我们还提出了基于大数据和人工智能技术的智能分析模块,该模块能够对生产过程中产生的海量数据进行深度分析,帮助企业发现潜在的生产瓶颈,优化产品设计,提升产品质量,同时也能够根据市场趋势调整生产计划,增强企业的市场响应能力。最后,为了确保整个信息系统的安全性和稳定性,解决方案还包括了先进的网络安全措施和数据备份机制,保障企业