JavaScript 源代码大放送

简介: JavaScript 不仅是前端开发的首选语言,通过 NodeJS 还能用于开发高性能后端服务,甚至在硬件编程中也崭露头角,正逐步成为全能型语言。此段代码提供了一个自定义日期格式验证的实用函数 `isValidDate`,简化了日期有效性检查,无需依赖庞大的第三方库。此外,还提供了获取元素最大尺寸和高亮文本的函数,以及一个为文字添加动画效果的 jQuery 插件,适用于多种开发场景。

JavaScript 正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaScript的身影。JavaScript正在逐渐进化为一门全能的开发语言。

判断日期是否有效
JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要。JQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需要一个非常简单的函数,而不想引入一个庞大的第三方库。这时,你可以使用下面这段日期校验代码,它允许你自定义日期格式并进行日期有效性的校验。

function isValidDate(value, userFormat) {
// Set default format if format is not provided

userFormat = userFormat || 'mm/dd/yyyy';

// Find custom delimiter by excluding

// month, day and year characters

var delimiter = /[^mdy]/.exec(userFormat)[0];

// Create an array with month, day and year

// so we know the format order by index

var theFormat = userFormat.split(delimiter);

// Create array from user date

var theDate = value.split(delimiter);

function isDate(date, format) {
var m, d, y, i = 0, len = format.length, f;

for (i; i < len; i++) {
f = format[i];

if (/m/.test(f)) m = date[i];

if (/d/.test(f)) d = date[i];

if (/y/.test(f)) y = date[i];

}

return (

m > 0 && m < 13 &&

y && y.length === 4 &&

d > 0 &&

// Check if it's a valid day of the month

d <= (new Date(y, m, 0)).getDate()

);

}

return isDate(theDate, theFormat);

}
//代码效果参考:https://shaoguan.92demo.com/sitemap

使用方法:

下面这个调用返回false,因为11月份没有31天

isValidDate('dd-mm-yyyy', '31/11/2012')

获取一组元素的最大宽度或高度
下面这个函数,对于需要进行动态排版的开发人员非常有用。

var getMaxHeight = function ($elms) {
var maxHeight = 0;

$elms.each(function () {
// In some cases you may want to use outerHeight() instead

var height = $(this).height();

if (height > maxHeight) {
maxHeight = height;

}

});

return maxHeight;

};

使用方法:

(elements)) );

高亮文本
有很多JQuery的第三方库可以实现高亮文本的功能,但我更喜欢用下面这一小段JavaScript代码来实现这个功能,它非常短小,而且可以根据我的需要去进行灵活的修改,而且可以自己定义高亮的样式。下面这两个函数可以帮助你创建自己的文本高亮插件。
https://linyi.92demo.com/sitemap
function highlight(text, words, tag) {
// Default tag if no tag is provided

tag = tag || 'span';

var i, len = words.length, re;

for (i = 0; i < len; i++) {
// Global regex to highlight all matches

re = new RegExp(words[i], 'g');

if (re.test(text)) {
text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');

}

}

return text;

}

你同样会需要取消高亮的函数:

function unhighlight(text, tag) {
// Default tag if no tag is provided

tag = tag || 'span';

var re = new RegExp('(<'+ tag +'.+?>|</'+ tag +'>)', 'g');

return text.replace(re, '');

}

使用方法:

$('p').html( highlight(

$('p').html(), // the text

['foo', 'bar', 'baz', 'hello world'], // list of words or phrases to highlight

'strong' // custom tag

));

文字动效
有时你会希望给你的一段文字增加动效,让其中的每个字都动起来。你可以使用下面这段jQuery插件代码来达到这个效果。当然你需要结合一个CSS3 transition样式来达到更好的效果。

$.fn.animateText = function(delay, klass) {
var text = this.text();

var letters = text.split('');

return this.each(function(){
var
(this);

$this.html(text.replace(/./g, '$&'));

$this.find('span.letter').each(function(i, el){
setTimeout(function(){ $(el).addClass(klass); }, delay * i);
https://shenyang.92demo.com/sitemap
});

});

};

使用方法:

$('p').animateText(15, 'foo');

相关文章
|
6月前
|
JavaScript 前端开发
Vue 应用 main.js 里的源代码解析
Vue 应用 main.js 里的源代码解析
|
4月前
|
JavaScript 前端开发 程序员
《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
JavaScript是Web标准语言,广泛应用于各类浏览器,造就了其最广泛部署的地位。Node.js的兴起扩展了JavaScript的使用场景,使其成为开发者首选语言。无论新手还是经验丰富的程序员,都能受益于学习JavaScript。[《JavaScript权威指南第7版》资源链接](https://zhangfeidezhu.com/?p=224)
240 5
《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
|
3月前
|
JavaScript 前端开发
必备的 JavaScript 源代码大放送
必备的 JavaScript 源代码大放送
16 1
|
4月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js的附带文章和医院后台管理系统源代码设计说明文档ppt
基于springboot+vue.js的附带文章和医院后台管理系统源代码设计说明文档ppt
32 1
基于springboot+vue.js的附带文章和医院后台管理系统源代码设计说明文档ppt
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js的附带文章和医疗挂号管理系统源代码设计说明文档ppt
基于springboot+vue.js的附带文章和医疗挂号管理系统源代码设计说明文档ppt
32 1
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js的附带文章和装饰工程管理系统源代码设计说明文档ppt
基于springboot+vue.js的附带文章和装饰工程管理系统源代码设计说明文档ppt
29 0
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js的附带文章和疫情隔离管理系统源代码设计说明文档ppt
基于springboot+vue.js的附带文章和疫情隔离管理系统源代码设计说明文档ppt
26 0
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js的附带文章和欢迪迈手机商城源代码设计说明文档ppt
基于springboot+vue.js的附带文章和欢迪迈手机商城源代码设计说明文档ppt
26 0
|
6月前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码