in javascript

零碎知识记录–计算字符串宽度–随机打乱数组

一、计算字符串宽度

最近的一个项目中有一个部分,需要计算一个字符串在浏览器中显示所占的宽度,因为可能的字符串不仅仅只是汉字,还有可能是字母,另外还是用来微软雅黑字体,在没有雅黑的机器上,会降级用黑体显示或者其他字体,而且要测宽度的字符串中还有三个字号,所以,用工具先量一个字会占多宽,是不靠谱的,只能通过程序来计算在用户的浏览器上显示的时候占多宽。

其实思路很简单,记得我以前看到过类似的例子,所以很快就知道要怎么来做这个东西了。我们可以把这个字符串放到页面中,让它具有真正显示的区域同样的 style ,也就是相当于复制一份这个字符串包括样式一起,到相同页面的另外一个位置去,但是这个地方,要让用户看不见才行。我们可以用一个绝对定位,z-index设置为一个负数,然后用visibility:hidden 把这个隐藏掉。总之让用户既看见,也点不着,也不影响页面的长度就行了。注意这个隐藏这个元素的方法一定要用 visibility 这个属性来隐藏,而不能用 display:none。因为如果用 display:none 的话,这个元素才尺寸就是0了。用 visibility的话,元素还是具有原来的尺寸,只是不显示出来而已。这个接着用 js 获取这个元素的 offsetWidth 属性就可以了。

二、随机打乱一个数组

今天还需要打乱一个数组中元素的顺序,但是在 js 手册里没找到相关的直接方法,但是想到了一个简单的方法,效果不一定特别好,但是够我用了。看代码:

function randomSort(a,b){
    return 0.5-Math.random();
}
function randomArr(arr){
    return arr.sort(randomSort);
}
var a = ['我','是','前','端','开','发','工','程','师'];
var b = randomArr(a);
console.dir(b);

大家可以复制代码到 firebug中运行试试看。就是利用了数组的排序函数,然后给了个随机的排序规则函数。如果谁有更好的方法,麻烦赐教,谢谢!

','