71街 » Javascript

文本域(textarea)的高度自适应实现两法

杜工 — Thu, 11 Mar 2010 03:51:51 +0000

随着HTML5的即将退出，相信大家对页面更加人性化有了一定的期待，这里我介绍两种方法，让你的textarea能够实现根据内容自动调整高度，让你的页面也炫起来！

方法一，使用JS自动调整

<textarea name="mytextarea" cols="80" style="overflow-y:hidden;height:80px;" onpropertychange="this.style.height=this.scrollHeight+'px';" oninput="this.style.height=this.scrollHeight+'px';"></textarea>

方法二，使用css控制，只需给文本域设置overflow-y:visible样式，比较简单，推荐使用

<textarea style="width:300px;overflow-y:visible"></texarea>

JS数据压缩算法

杜工 — Fri, 04 Sep 2009 04:18:40 +0000

研究Google chart API的时候发现它提供的数据压缩算法不错，可以把纯数字的数组压缩成很短的一个字符串，分享如下：

var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
function simpleEncode(values,maxValue) {
 
var chartData = ['s:'];
for (var i = 0; i < values.length; i++) { var currentValue = values[i]; if (!isNaN(currentValue) && currentValue >= 0) {
chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));
} else {
chartData.push('_');
}
}
return chartData.join('');
}

测试例子：

var valueArray = new Array(20,100,40,50,60,81,74);
var maxValue = 100;
document.write(simpleEncode(valueArray,maxValue));

用js计算时间差，得到比较人性化的结果

杜工 — Thu, 03 Sep 2009 09:48:21 +0000

我们经常看到一些文章或者评论的发表时间不是直接显示出死板的Y-m-d格式，而是算了一个时间差，如：发表于2分钟前，这样显得比较人性化，多用于一些非正式网站。下面提供JavaScript的实现方法：

var minute = 1000 * 60;
var hour = minute * 60;
var day = hour * 24;
var halfamonth = day * 15;
var month = day * 30;
 
function getDateDiff(dateTimeStamp){
var now = new Date().getTime();
var diffValue = now - dateTimeStamp;
 
if(diffValue < 0){
 //非法操作
 //alert("结束日期不能小于开始日期！");
 }
 
var monthC =diffValue/month;
var weekC =diffValue/(7*day);
var dayC =diffValue/day;
var hourC =diffValue/hour;
var minC =diffValue/minute;
 
if(monthC>=1){
 result="发表于" + parseInt(monthC) + "个月前";
 }
 else if(weekC>=1){
 result="发表于" + parseInt(weekC) + "个星期前";
 }
 else if(dayC>=1){
 result="发表于"+ parseInt(dayC) +"天前";
 }
 else if(hourC>=1){
 result="发表于"+ parseInt(hourC) +"个小时前";
 }
 else if(minC>=1){
 result="发表于"+ parseInt(minC) +"分钟前";
 }else
 result="刚刚发表";
? return result;
}

如果你得到的原始数据不是时间戳，可以采用下面的函数把字符串转换为标准时间戳, 它相当于JS版的strtotime，只不过精度不同罢了：

function getDateTimeStamp(dateStr){
 return Date.parse(dateStr.replace(/-/gi,"/"));
}

使用javascript从url获取参数值

杜工 — Tue, 01 Sep 2009 10:04:07 +0000

随着Ajax的泛滥，有时需要我们从url获取变量进行用户交互，本函数提供了获取方法：

function getQuery(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}

如需要从下面地址中获取id的值：

http://71j.cn/a.php?a=my&id=7&m=1

只需要在当前页面调用getQuery(“id”)即可。

我也收集了一些常用的正则表达式

杜工 — Tue, 01 Sep 2009 09:54:16 +0000

兄弟姊妹们，这可是极品文章，强烈建议大家收藏，以后不用每次都费劲脑汁编正则表达式了！
匹配中文字符的正则表达式： [\u4e00-\u9fa5]

匹配双字节字符(包括汉字在内)：[^\x00-\xff]

应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}

匹配空行的正则表达式：\n[\s| ]*\r

匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/

匹配首尾空格的正则表达式：(^\s*)|(\s*$)

应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：

String.prototype.trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}

利用正则表达式分解和转换IP地址：

下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的javascript程序：

function IP2V(ip)
{
re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正则表达式
if(re.test(ip))
{
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
}
else
{
throw new Error("Not a valid IP address!")
}
}

不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下：

var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))

匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

利用正则表达式去除字串中重复的字符的算法程序：[注：此程序不正确，原因见本贴回复]

var s="abacabefgeeii"
var s1=s.replace(/(.).*\1/g,"$1")
var re=new RegExp("["+s1+"]","g")
var s2=s.replace(re,"")
alert(s1+s2) //结果为：abcefgi

我原来在CSDN上发贴寻求一个表达式来实现去除重复字符的方法，最终没有找到，这是我能想到的最简单的实现方法。思路是使用后向引用取出包括重复的字符，再以重复的字符建立第二个表达式，取到不重复的字符，两者串连。这个方法对于字符顺序有要求的字符串可能不适用。

得用正则表达式从URL地址中提取文件名的javascript程序，如下结果为page1

s="http://www.71j.cn/page1.htm"
s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2")
alert(s)

利用正则表达式限制网页表单里的文本框输入内容：

用正则表达式限制只能输入中文：

onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"

用正则表达式限制只能输入全角字符：

 onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"

用正则表达式限制只能输入数字：

onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

用正则表达式限制只能输入数字和英文：

onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

判断是否为数字

function isNumber(oNum)
{
if(!oNum) return false;
var strP=/^\d+(\.\d+)?$/;
if(!strP.test(oNum)) return false;
try{
if(parseFloat(oNum)!=oNum) return false;
}
catch(ex)
{
return false;
}
return true;
}

Javascript入门第一秘籍：$

杜工 — Mon, 31 Aug 2009 10:00:48 +0000

这年头，做什么东西都要符合标准，赶潮流。这不，获取页面元素的方法也要符合w3c标准，可是那个document.getElememtById(‘obj_id’)也太长了，写起来很是心烦。

不怕，我们可以给它来个缩写：

var $=function(obj)
{
return document.getElementById(obj);
};

这样，只需要用$(‘obj_id’)就可以获得我们想要的元素了。嘿嘿，是不是很方便？类似的，也可以定义一些其它比较繁琐但又经常用到的方法：

function $F(obj)
{
 return document.getElementById(obj).value;
}
function $E(str)
{
 return encodeURIComponent(str);
}

当然，如果你使用一些js框架，如jquery等，$符号一般都被赋予了其它功能，使用时要注意不要冲突了。