initial commit

2 files changed, 183 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/progressevent/index.html b/files/zh-cn/web/api/progressevent/index.html
new file mode 100644
index 0000000000..b889227df2
--- /dev/null
+++ b/files/zh-cn/web/api/progressevent/index.html
@@ -0,0 +1,94 @@
+---
+title: ProgressEvent
+slug: Web/API/ProgressEvent
+tags:
+  - API
+  - 参考
+  - 接口
+  - 进度事件
+translation_of: Web/API/ProgressEvent
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><strong><code>ProgressEvent</code></strong> 接口是测量如 HTTP 请求（一个<code>XMLHttpRequest</code>，或者一个 {{HTMLElement("img")}}，{{HTMLElement("audio")}}，{{HTMLElement("video")}}，{{HTMLElement("style")}} 或 {{HTMLElement("link")}} 等底层资源的加载）等底层流程进度的事件。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="构造方法">构造方法</h2>
+
+<dl>
+ <dt>{{domxref("ProgressEvent.ProgressEvent", "ProgressEvent()")}}</dt>
+ <dd>用给定的参数创建一个 <code>ProgressEvent</code> 事件。</dd>
+</dl>
+
+<h2 id="属性">属性</h2>
+
+<p><em>同时继承它的父元素 {{domxref("Event")}} 的属性。</em></p>
+
+<dl>
+ <dt>{{domxref("ProgressEvent.lengthComputable")}} {{readonlyInline}}</dt>
+ <dd>是一个 {{domxref("Boolean")}} 标志，表示底层流程将需要完成的总工作量和已经完成的工作量是否可以计算。换句话说，它告诉我们进度是否可以被测量。</dd>
+ <dt>{{domxref("ProgressEvent.loaded")}} {{readonlyInline}}</dt>
+ <dd>是一个 <code>unsigned long long</code> 类型数据，表示底层流程已经执行的工作总量。可以用这个属性和 <code>ProgressEvent.total</code> 计算工作完成比例。当使用 HTTP 下载资源，它只表示内容本身的部分，不包括首部和其它开销。</dd>
+ <dt>{{domxref("ProgressEvent.total")}} {{readonlyInline}}</dt>
+ <dd>是一个 <code>unsigned long long</code> 类型数据，表示正在执行的底层流程的工作总量。当使用 HTTP 下载资源，它只表示内容本身的部分，不包括首部和其它开销。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+</dl>
+
+<p><em>同时继承它的父元素 {{domxref("Event")}} 的方法。</em></p>
+
+<dl>
+ <dt>{{domxref("ProgressEvent.initProgressEvent()")}} {{deprecated_inline}}{{non-Standard_inline}}</dt>
+ <dd>使用被弃用的 {{domxref("Document.createEvent()", "Document.createEvent(\"ProgressEvent\")")}} 方法，来初始化一个已经创建好的 <code>ProgressEvent</code>。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p>下面的示例为一个新建的 {{domxref("XMLHTTPRequest")}} 添加了一个 <code>ProgressEvent</code>，并使用它来显示请求状态。</p>
+
+<pre class="brush: js">var progressBar = document.getElementById("p"),
+    client = new XMLHttpRequest()
+client.open("GET", "magical-unicorns")
+client.onprogress = function(pe) {
+  if(pe.lengthComputable) {
+    progressBar.max = pe.total
+    progressBar.value = pe.loaded
+  }
+}
+client.onloadend = function(pe) {
+  progressBar.value = pe.loaded
+}
+client.send()</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#interface-progressevent', 'ProgressEvent')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">本页面上的兼容性表格是由结构化数据生成的。如果你想为数据作出贡献的话，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并给我们发送一个拉取请求。</div>
+
+<p>{{Compat("api.ProgressEvent")}}</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>The {{domxref("Event")}} base interface.</li>
+</ul>
diff --git a/files/zh-cn/web/api/progressevent/lengthcomputable/index.html b/files/zh-cn/web/api/progressevent/lengthcomputable/index.html
new file mode 100644
index 0000000000..e68ad4f42e
--- /dev/null
+++ b/files/zh-cn/web/api/progressevent/lengthcomputable/index.html
@@ -0,0 +1,89 @@
+---
+title: ProgressEvent.lengthComputable
+slug: Web/API/ProgressEvent/lengthComputable
+translation_of: Web/API/ProgressEvent/lengthComputable
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><code><strong>ProgressEvent.lengthComputable</strong></code> 只读属性是一个布尔{{domxref("Boolean")}} 标志，表示{{domxref("ProgressEvent")}} 所关联的资源是否具有可以计算的长度。否则 ，{{domxref("ProgressEvent.total")}} 属性将是一个无意义的值。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>flag</em> = <em>ProgressEvent</em>.lengthComputable</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#dom-progressevent-lengthcomputable', 'ProgressEvent.lengthComputable')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("ProgressEvent")}} interface it belongs to.</li>
+</ul>