word-wrap 与 word-break 属性的理...-FileReader详解与实例---读取并...-点滴积累---JS求平均值（方法）

当前位置: 编程技术>WEB前端

本页文章导读:

▪word-wrap 与 word-break 属性的理解一、浏览器默认处理文本换行现在的浏览器对文本的换行处理还是比较合理的，当文字超过容器宽度时会自动换行，那么它是怎么自动换行的呢？即：当一行的末尾容纳不下下一个文字或单词.........

▪FileReader详解与实例---读取并显示图像文件我们曾经在《HTML5 中 File 对象初探》中，使用到了FileReader，在那篇文章中，它被用来将一个文件读取为二进制字符串，并通过 xhr 发送到后端形成交互。作为 File API 的一部分，FileReader .........

▪点滴积累---JS求平均值（方法）效果：事件：当输入完三个文本框后触发blur事件。计算出平均值说明：调用方法计算出平均值，代码：文本框中：1 <asp:TextBox ID="tblmyd11" Field="lmyd11" TableName="gqls_sy" EnabledAction="/blog_article/(12._)" Css runat=.........

[1]word-wrap 与 word-break 属性的理解

来源: 发布时间: 2013-11-06

一、浏览器默认处理文本换行

现在的浏览器对文本的换行处理还是比较合理的，当文字超过容器宽度时会自动换行，那么它是怎么自动换行的呢？即：当一行的末尾容纳不下下一个文字或单词时，就会自动换行，

英文单词不会被截断，相当于一段默认的css:

{
word-wrap: normal; /*浏览器对文本默认的自动换行处理*/
}

如图：浏览器自动换行文本

二、break-word属性值

当然在网页排版中也会遇到一些特殊情况，例如：某个单词(某品牌的英文名称)够长，而容器宽度较小以至于容纳不下，那么单词就会溢出容器，你可能就会想到下面一段css代码：

{
word-wrap: break-word; /*对溢出容器的单词进行截断，截断后的部分自动换行*/
}

如图：使用break-word属性值之前使用break-word属性值之后

PS：我觉得这样处理并不合理，因为一个完整单词被拆分开了显示(就像汉字也不能拆分一样，特殊情况除外)，

除了用上一行代码进行处理，我们是否可以考虑让容器宽度变长来展示文字，这样是否更合理些呢？

三、break-all属性值

还有另外一个关于文本断行的css属性值break-all：

{
word-break: break-all;
}

这个属性值不好解释，我们可以假设把整段文本看作一个单词，当这个单词(整段文本)超出容器宽度，则截断，截断后的部分自动换行，以此类推，如图：

PS：浏览器对文本的自动换行处理已经够好了，使用该属性缺点同2，并不赞成使用。

转载请注明出处【作者：华子yjh，原文链接】

本文链接

[2]FileReader详解与实例---读取并显示图像文件

来源: 发布时间: 2013-11-06

我们曾经在《HTML5 中 File 对象初探》中，使用到了FileReader，在那篇文章中，它被用来将一个文件读取为二进制字符串，并通过 xhr 发送到后端形成交互。作为 File API 的一部分，FileReader 专门用于读取文件，根据 W3C 的定义，FileReader 接口 "提供一些读取文件的方法与一个包含读取结果的事件模型"。

接下来，我们将逐一了解 FileReader 的方法与事件模型，并最终通过一个例子程序来应用 FireRead，在这个例子中，使用支持 FileReader 浏览器的用户将能够通过一个 file input 选择一个图像文件，并不经过后台将图像显示在页面中。下面的链接指向这个例子，值得注意的是，到目前为止，只有 Firefox 3.6+ 和 Chrome 6.0+ 实现了 FileReader 接口。

点此查看最终效果

在这之前的 web 应用程序中，实现这个效果的通常做法是将用户选择的图像文件传送至后端，后端对其进行存储，再将 URL 返回到前端，前端通过这个 URL 来显示图像。 FileReader 的突破在于使得 JavaScript 拥有了处理文件的能力，它可以异步地读取存储在用户电脑中的文件，这里所指的文件，对于 JavaScript 来说是一个 File 对象，FileReader 读取文件的全部方法皆依赖于此，对于 File 对象还不是很了解的话，请先阅读《HTML5 中 File 对象初探》，这是本文的基础。

1. 能力检测与创建实例

检测一个浏览器是否支持 FileReader 很容易做到，支持这一接口的浏览器有一个位于 window 对象下的 FileReader 构造函数，如果浏览器有这个构造函数，那么就可以 new 一个 FileReader 的实例来使用。

if ( typeof FileReader === 'undefined' ) {
alert( " 您的浏览器未实现 FileReader 接口 " );
} else {
var reader = new FileReader();
// do sth.
}

2. 方法

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名
参数
描述

abort
none
中断读取

readAsBinaryString
file
将文件读取为二进制码

readAsDataURL
file
将文件读取为 DataURL

readAsText
file, [encoding]
将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：这个方法在《HTML5 中 File 对象初探》中已经被使用过一次了，它将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URI，Data URI是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。点击这里了解更多关于 Data URI 的知识。

3. 事件

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件
描述

onabort
中断时触发

onerror
出错时触发

onload
文件读取成功完成时触发

onloadend
读取完成触发，无论成功或失败

onloadstart
读取开始时触发

onprogress
读取中

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

reader.onload = function () {
this.result // 读取结果
}

4. 实例

了解了这些知识过后，我们来还原之前的示例。第一步，创建 html 部分，主要包括一个 input 和一个用来呈现结果的 div：

<p>
<label>请选择一个图像文件：</label>
<input type="file" id="demo_input" />
</p>
<div id="demo_result">

</div>

接下来获取节点，并处理浏览器兼容部分，对于未实现 FileReader 接口的浏览器将给出一个提示并禁用 input，否则监听 input 的 change 事件。

if ( typeof FileReader === 'undefined' ){
result.innerHTML = "<p >抱歉，你的浏览器不支持 FileReader</p>";
input.setAttribute( 'disabled','disabled' );} else {
input.addEventListener( 'change',readFile,false );}

最后书写函数 readFile 的代码，当 file input 的 change 事件触发时，调用这个函数，首先获取到 file 对象，并通过 file 的 type 属性来检验文件类型，在这里，我们只允许选择图像类型的文件。然后创建一个 FileReader 实例，并且调用 readAsDataURL 方法读取文件，在实例的 load 事件中，获取到成功读取到的文件内容，并以插入一个 img 节点的方式，显示在页面中。

function readFile(){
var file =

[3]点滴积累---JS求平均值（方法）

来源: 发布时间: 2013-11-06

效果：

事件：当输入完三个文本框后触发blur事件。计算出平均值

说明：调用方法计算出平均值，

代码：

文本框中：

1 <asp:TextBox ID="tblmyd11" Field="lmyd11" TableName="gqls_sy" EnabledAction="/blog_article/(12._)" Css runat="server" self="ydpj"></asp:TextBox>

JS部分：

1 /********************硬度HRC平均值**************************/
2 $(function() {
3 $("[self='ydpj']").blur(function() { Getlmpj("11", "21", "31", "41"); });
4 $("[self='ydpj']").blur(function() { Getlmpj("12", "22", "32", "42"); });
5 $("[self='ydpj']").blur(function() { Getlmpj("13", "23", "33", "43"); });
6 $("[self='ydpj']").blur(function() { Getlmpj("14", "24", "34", "44"); });
7 //螺母
8 function Getlmpj(one, two, three, four) {
9 var avg = 0;
10 var num1 = ChangeFloat($("input[id*=tblmyd" + one + "]").val());
11 var num2 = ChangeFloat($("input[id*=tblmyd" + two + "]").val());
12 var num3 = ChangeFloat($("input[id*=tblmyd" + three + "]").val());
13 if (num1 != 0 && num2 != 0 && num3 != 0) {
14 avg = (num1 + num2 + num3) / 3;
15 $("input[id*=tblmyd" + four + "]").val(RoundValue(avg, 0.1, 1));
16 }
17 else {
18 $("input[id*=tblmyd" + four + "]").val("");
19 }
20 }
21 });
22 function ChangeFloat(data) {
23 if (data != null && data != "") {
24 return parseFloat(data);
25 }
26 else {
27 return 0;
28 }
29 }

本文链接