From 869dd2069c695ee7040cd3261713212155819f42 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Mon, 14 Dec 2020 12:18:12 -0500 Subject: final dump 2020-12-14 --- .../index.html" | 175 +++++++++++++++++++++ .../web/api/htmlformelement/submit/index.html | 4 +- files/zh-cn/web/css/background-image/index.html | 16 +- files/zh-cn/web/css/flex/index.html | 10 +- files/zh-cn/web/css/gradient/index.html | 26 +-- files/zh-cn/web/css/image/index.html | 86 +--------- .../object/defineproperties/index.html | 16 +- .../global_objects/promise/all/index.html | 2 +- 8 files changed, 218 insertions(+), 117 deletions(-) create mode 100644 "files/zh-cn/web/api/filereader/\344\270\255\346\255\242\344\272\213\344\273\266(abort)/index.html" (limited to 'files/zh-cn/web') diff --git "a/files/zh-cn/web/api/filereader/\344\270\255\346\255\242\344\272\213\344\273\266(abort)/index.html" "b/files/zh-cn/web/api/filereader/\344\270\255\346\255\242\344\272\213\344\273\266(abort)/index.html" new file mode 100644 index 0000000000..8e36dbb3dd --- /dev/null +++ "b/files/zh-cn/web/api/filereader/\344\270\255\346\255\242\344\272\213\344\273\266(abort)/index.html" @@ -0,0 +1,175 @@ +--- +title: 'FileReader: 中止事件(abort)' +slug: Web/API/FileReader/中止事件(abort) +tags: + - API + - FileReader + - ProgressEvent + - Reference + - Web + - abort + - 中止 + - 事件 +translation_of: Web/API/FileReader/abort_event +--- +
{{APIRef}}
+ +

在中止读取时会触发 abort 事件: 例如程序调用{{domxref("FileReader.abort()")}}.

+ + + + + + + + + + + + + + + + + + + + +
BubblesNo
可取消No
接口{{domxref("ProgressEvent")}}
事件处理属性{{domxref("FileReader.onabort")}}
+ +

例子

+ +

实例

+ +

HTML

+ +
<div class="example">
+
+    <div class="file-select">
+        <label for="avatar">选择你的头像:</label>
+        <input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg">
+    </div>
+
+    <img src="" class="preview" height="200" alt="图像预览...">
+
+    <div class="event-log">
+        <label>事件日志:</label>
+        <textarea readonly class="event-log-contents"></textarea>
+    </div>
+
+  </div>
+ + + +

JS

+ +
const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+    reader.abort();
+}
+
+fileInput.addEventListener('change', handleSelected);返回返回发的
+
+ +

返回结果

+ +

{{ EmbedLiveSample('Live_example', '100%', '300px') }}

+ +

参数

+ + + + + + + + + + + + + + +
参数状态
{{SpecName('File API', '#dfn-abort-event')}}{{Spec2('File API')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.FileReader.abort_event")}}

+ +

另请参见

+ + diff --git a/files/zh-cn/web/api/htmlformelement/submit/index.html b/files/zh-cn/web/api/htmlformelement/submit/index.html index 7e13885446..d000ffc11b 100644 --- a/files/zh-cn/web/api/htmlformelement/submit/index.html +++ b/files/zh-cn/web/api/htmlformelement/submit/index.html @@ -16,8 +16,8 @@ translation_of: Web/API/HTMLFormElement/submit

这个方法和触发提交表单按钮很类似，但有所不同：

如果一个表单控件（比如一个提交按钮）的 name 或 id 的值为 submit，则它将覆盖表单的 submit 方法.

diff --git a/files/zh-cn/web/css/background-image/index.html b/files/zh-cn/web/css/background-image/index.html index c16d7aa861..cf4b302680 100644 --- a/files/zh-cn/web/css/background-image/index.html +++ b/files/zh-cn/web/css/background-image/index.html @@ -30,7 +30,7 @@ translation_of: Web/CSS/background-image

可以提供由逗号分隔的多个值来指定多个背景图像：

-
background-image:
+
background-image:
   linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
   url('https://mdn.mozillademos.org/files/7693/catfront.png');

 
@@ -45,15 +45,15 @@ translation_of: Web/CSS/background-image
 
 
正规语法

 
-
{{csssyntax}}

+
{{csssyntax}}

 
-
示例

+
示例

 
 
注意星星图片部分透明且位于猫图片上方.

 
-
HTML

+
HTML

 
-
<div>
+
<div>
   <p class="catsandstars">
     This paragraph is full of cats<br />and stars.
   </p>
@@ -64,9 +64,9 @@ translation_of: Web/CSS/background-image
   <p>And no more.</p>
 </div>

 
-
CSS

+
CSS

 
-
p {
+
p {
   font-size: 1.5em;
   color: #FE7F88;
   background-image: none;
@@ -86,7 +86,7 @@ div {
 }
 

 
-
Result

+
运行结果

 
 
{{EmbedLiveSample('Examples')}}

 
diff --git a/files/zh-cn/web/css/flex/index.html b/files/zh-cn/web/css/flex/index.html
index 9911e9c77d..295d7d9f34 100644
--- a/files/zh-cn/web/css/flex/index.html
+++ b/files/zh-cn/web/css/flex/index.html
@@ -65,9 +65,9 @@ flex: unset;
 
单值语法: 值必须为以下其中之一:

 
 
    
- 
  • 一个无单位数({{cssxref("<number>")}}): 它会被当作<flex-grow>的值。
    • 
+ 
  • 一个无单位数({{cssxref("<number>")}}): 它会被当作flex:<number> 1 0; <flex-shrink>的值被假定为1，然后<flex-basis> 的值被假定为0。
    • 
  
  • 一个有效的宽度({{cssxref("width")}})值: 它会被当作 <flex-basis>的值。
    • 
- 
  • 关键字none，auto或initial.
    • 
+ 
  • 关键字none，auto或initial.
    • 
 

 
 
双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：

@@ -93,16 +93,16 @@ flex: unset;
 
 
 

- 
auto

+ 
auto

  
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".

- 
none

+ 
none

  
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。

  
<'flex-grow'>

  
定义 flex 项目的 {{cssxref("flex-grow")}} 。负值无效。省略时默认值为 1。 (初始值为 0)

  
<'flex-shrink'>

  
定义 flex 元素的 {{cssxref("flex-shrink")}} 。负值无效。省略时默认值为1。 (初始值为 1)

  
<'flex-basis'>

- 
定义 flex 元素的 {{cssxref("flex-basis")}} 属性。若值为0，则必须加上单位，以免被视作伸缩性。省略时默认值为 auto。(初始值为 0)

+ 
定义 flex 元素的 {{cssxref("flex-basis")}} 属性。若值为0，则必须加上单位，以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)

  

  
描述

  

diff --git a/files/zh-cn/web/css/gradient/index.html b/files/zh-cn/web/css/gradient/index.html
index 8cb033cb7b..a27da647f1 100644
--- a/files/zh-cn/web/css/gradient/index.html
+++ b/files/zh-cn/web/css/gradient/index.html
@@ -21,16 +21,16 @@ translation_of: Web/CSS/gradient
 
颜色值沿着一条隐式的直线逐渐过渡。由{{cssxref("linear-gradient", "linear-gradient()")}}产生。

 
 
 
-
.linear-gradient {
+
.linear-gradient {
   background: linear-gradient(to right,
       red, orange, yellow, green, blue, indigo, violet);
 }

@@ -44,16 +44,16 @@ translation_of: Web/CSS/gradient
 
颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。由{{cssxref("radial-gradient", "radial-gradient()")}}函数产生。

 
 
 
-
.radial-gradient {
+
.radial-gradient {
   background: radial-gradient(red, yellow, rgb(30, 144, 255));
 }
 

@@ -67,18 +67,18 @@ translation_of: Web/CSS/gradient
 
重复多次渐变图案直到足够填满指定元素。由 {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}和{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}函数产生。

 
 
 
-
.linear-repeat {
+
.linear-repeat {
   background: repeating-linear-gradient(to top left,
       lightpink, lightpink 5px, white 5px, white 10px);
 }
@@ -115,7 +115,11 @@ translation_of: Web/CSS/gradient
 
 
浏览器兼容性

 
-
每一种渐变都有不同的兼容性，敬请查阅特定渐变的相关文献与资料以获取更多信息。

+
+
+
+
+
{{Compat("css.types.image.gradient")}}

 
 
See also

 
@@ -123,5 +127,3 @@ translation_of: Web/CSS/gradient
  
  • Using CSS gradients,
    • 
  
  • 渐变方程：{{cssxref("<gradient>")}}, {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}};
    • 
 
-
-
     
    
diff --git a/files/zh-cn/web/css/image/index.html b/files/zh-cn/web/css/image/index.html
index c19fb0521e..99deceb577 100644
--- a/files/zh-cn/web/css/image/index.html
+++ b/files/zh-cn/web/css/image/index.html
@@ -81,7 +81,7 @@ translation_of: Web/CSS/image
 
 
    以下是有效的图像引用值：
    
 
-
    url(test.jpg)                          url()方法, 只要test.jpg是图像文件
+
    url(test.jpg)                          url()方法, 只要test.jpg是图像文件
 linear-gradient(to bottom, blue, red)  一个 <gradient>标签
 element(#colonne3)                     页面的一部分, 使用了element()方法,
                                        如果 colonne3 是存在于页面中的一个元素id即可
@@ -89,7 +89,7 @@ element(#colonne3)                     页面的一部分, 
 
 
    以下是无效的图像引用值：
    
 
-
    cervin.jpg                             图像文件必须使用url()方法定义
+
    cervin.jpg                             图像文件必须使用url()方法定义
 url(report.pdf)                        url()方法指向的文件链接必须是一个图像文件
 element(#fakeid)                       如果fakeid是一个不存在与页面的元素id
 
    
@@ -117,87 +117,11 @@ element(#fakeid)                       如果fakeid是一个不存在与页面
 
 
    浏览器兼容性
    
 
-
    {{ CompatibilityTable() }}
    
-
-
    
-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
    FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
    <uri>{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}
    <gradient>{{ compatVersionUnknown() }}
    
-    limited to {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}    		{{ compatVersionUnknown() }}{{ property_prefix("-webkit") }}IE 10{{ property_prefix("-ms") }}{{ compatVersionUnknown() }}{{ property_prefix("-o") }}{{ compatVersionUnknown() }}{{ property_prefix("-webkit") }}
    element()4.0 (2.0) limited to {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}
    
+
 
-
    
-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
    FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
    <uri>{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}
    <gradient>{{ compatVersionUnknown() }}
    
-    limited to {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}    		{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}
    element()4.0 (2.0) limited to {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}
    
-
    
+
    {{Compat("css.types.image")}}
    
 
 
    参阅：
    
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/zh-cn/web/javascript/reference/global_objects/object/defineproperties/index.html
index c36b799695..411650ccb8 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/defineproperties/index.html
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/defineproperties/index.html
@@ -14,7 +14,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
 
 
    语法
    
 
-
    Object.defineProperties(obj, props)
    
+
    Object.defineProperties(obj, props)
    
 
 
    参数
    
 
@@ -26,10 +26,10 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
  
    
  
    
   
    configurable
    
-  
    true 当且仅当该属性描述符的类型可以被改变并且该属性可以从对应对象中删除。
    
+  
    true 只有该属性描述符的类型可以被改变并且该属性可以从对应对象中删除。
    
   默认为 false
    
   
    enumerable
    
-  
    true 当且仅当在枚举相应对象上的属性时该属性显现。
    
+  
    true 只有在枚举相应对象上的属性时该属性显现。
    
   默认为 false
    
  
    
 
@@ -38,7 +38,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
   
    与属性关联的值。可以是任何有效的JavaScript值（数字，对象，函数等）。
    
   默认为 {{jsxref("undefined")}}.
    
   
    writable
    
-  
    true当且仅当与该属性相关联的值可以用{{jsxref("Operators/Assignment_Operators", "assignment operator", "", 1)}}改变时。
    
+  
    true只有与该属性相关联的值被{{jsxref("Operators/Assignment_Operators", "assignment operator", "", 1)}}改变时。
    
   默认为 false
    
  
    
 
@@ -63,7 +63,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
 
 
    例子
    
 
-
    var obj = {};
+
    var obj = {};
 Object.defineProperties(obj, {
   'property1': {
     value: true,
@@ -80,7 +80,7 @@ Object.defineProperties(obj, {
 
 
    假设一个原始的执行环境，所有的名称和属性都引用它们的初始值，Object.defineProperties几乎完全等同于（注意isCallable中的注释）以下JavaScript中的重新实现：
    
 
-
    function defineProperties(obj, properties) {
+
    function defineProperties(obj, properties) {
   function convertToDescriptor(desc) {
     function hasProperty(obj, prop) {
       return Object.prototype.hasOwnProperty.call(obj, prop);
@@ -158,12 +158,12 @@ Object.defineProperties(obj, {
   
    {{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}
    {{Spec2('ES6')}}
-    
+   
   
   
    {{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}
    {{Spec2('ESDraft')}}
-    
+   
   
  
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/all/index.html b/files/zh-cn/web/javascript/reference/global_objects/promise/all/index.html
index e81f816fbf..6208fed17a 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/promise/all/index.html
+++ b/files/zh-cn/web/javascript/reference/global_objects/promise/all/index.html
@@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
 ---
 
    {{JSRef}}
    
 
-
    Promise.all() 方法接收一个promise的idterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入，并且只返回一个{{jsxref("Promise")}}实例， 那个输入的所有promise的resolve回调的结果是一个数组。这个{{jsxref("Promise")}}的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promise了的时候。它的reject回调执行是，只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误，并且reject的是第一个抛出的错误信息。
    
+
    Promise.all() 方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入，并且只返回一个{{jsxref("Promise")}}实例， 那个输入的所有promise的resolve回调的结果是一个数组。这个{{jsxref("Promise")}}的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promise了的时候。它的reject回调执行是，只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误，并且reject的是第一个抛出的错误信息。
    
 
 
    {{EmbedInteractiveExample("pages/js/promise-all.html")}}
    
 
-- 
cgit v1.2.3-54-g00ecf