Skip to content

Commit

Permalink
AutoCorrect files/zh-cn/web/{d,e,g,html}*/
Browse files Browse the repository at this point in the history
  • Loading branch information
huacnlee authored and irvin committed May 28, 2022
1 parent 03429c5 commit 13cc1e2
Show file tree
Hide file tree
Showing 39 changed files with 288 additions and 288 deletions.
6 changes: 3 additions & 3 deletions files/zh-cn/web/demos/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
translation_of: Web/Demos_of_open_web_technologies
original_slug: Web/Demos_of_open_web_technologies
---
<p class="summary">Mozilla 支持各种令人兴奋的开源 Web 技术,我们鼓励大家使用它们。此页面提供了有关这些技术的一些有趣演示链接。</p>
<p class="summary">Mozilla 支持各种令人兴奋的开源 Web 技术我们鼓励大家使用它们。此页面提供了有关这些技术的一些有趣演示链接。</p>

<p>如果你知道开源 Web 技术的优秀演示或者应用,就在这里(以及 <a href="https://developer.mozilla.org/en-US/docs/Web/Demos_of_open_web_technologies">英文页面</a>)添加一个合适的链接吧。</p>
<p>如果你知道开源 Web 技术的优秀演示或者应用就在这里(以及 <a href="https://developer.mozilla.org/en-US/docs/Web/Demos_of_open_web_technologies">英文页面</a>)添加一个合适的链接吧。</p>

<h2 id="2D_图形">2D 图形</h2>

Expand Down Expand Up @@ -94,7 +94,7 @@ <h2 id="CSS">CSS</h2>
<p>旧项目:</p>

<ul>
<li><a href="https://s.codepen.io/SoftwareRVG/debug/OXkOWj">CSS floating logo "Mozilla" developed by Rober Villar, from Software RVG. </a>(debug模式)</li>
<li><a href="https://s.codepen.io/SoftwareRVG/debug/OXkOWj">CSS floating logo "Mozilla" developed by Rober Villar, from Software RVG. </a>(debug 模式)</li>
<li><a href="https://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Bootstrap Contact Form Design</a></li>
<li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
<li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Responsive Login Page Design</a></li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
- NeedsContent
- events
---
<p>本文演示了如何创建和分派DOM事件。这些事件通常称为<strong>合成事件</strong>,而不是浏览器本身触发的事件。</p>
<p>本文演示了如何创建和分派 DOM 事件。这些事件通常称为<strong>合成事件</strong>,而不是浏览器本身触发的事件。</p>

<h2 id="创建自定义事件">创建自定义事件</h2>

Expand Down Expand Up @@ -44,7 +44,7 @@ <h3 id="添加自定义数据_–_CustomEvent">添加自定义数据 – CustomE

<h3 id="过时的方式">过时的方式</h3>

<p>早期的创建事件的方法使用了受Java启发的API。下面展示了一个示例:</p>
<p>早期的创建事件的方法使用了受 Java 启发的 API。下面展示了一个示例:</p>

<pre class="brush: js">// Create the event.
var event = document.createEvent('Event');
Expand Down Expand Up @@ -107,7 +107,7 @@ <h3 id="动态创建和派发事件">动态创建和派发事件</h3>

<h2 id="触发内置事件">触发内置事件</h2>

<p>下面的例子演示了一个在复选框上点击(click)的模拟(就是说在程序里生成一个click事件),这个模拟点击使用了DOM方法<a href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">参见这个动态示例</a></p>
<p>下面的例子演示了一个在复选框上点击(click)的模拟(就是说在程序里生成一个 click 事件),这个模拟点击使用了 DOM 方法<a href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">参见这个动态示例</a></p>

<pre class="brush: js">function simulateClick() {
var event = new MouseEvent('click', {
Expand Down
24 changes: 12 additions & 12 deletions files/zh-cn/web/events/detecting_device_orientation/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
---
<p>{{SeeCompatTable}}</p>

<p>有越来越多的基于web的设备能够确定它们的方向; 也就是说,它们可以报告数据以指示基于重力方向的方向改变。特别地,手持设备如手机可以利用这些信息以自动旋转屏幕,保持内容直立,当设备旋转至横屏时(宽度大于高度),提供网页内容的横屏视图。</p>
<p>有越来越多的基于 web 的设备能够确定它们的方向; 也就是说,它们可以报告数据以指示基于重力方向的方向改变。特别地,手持设备如手机可以利用这些信息以自动旋转屏幕,保持内容直立,当设备旋转至横屏时(宽度大于高度),提供网页内容的横屏视图。</p>

<p>有两种Javascript事件负责处理设备方向信息。第一种是{{domxref("DeviceOrientationEvent")}},它会在加速度传感器检测到设备在方向上产生变化时触发。通过处理该事件传来的数据信息,让交互式地响应用户移动设备旋转和仰角变化成为可能。</p>
<p>有两种 Javascript 事件负责处理设备方向信息。第一种是{{domxref("DeviceOrientationEvent")}},它会在加速度传感器检测到设备在方向上产生变化时触发。通过处理该事件传来的数据信息,让交互式地响应用户移动设备旋转和仰角变化成为可能。</p>

<p>第二种是{{domxref("DeviceMotionEvent")}},它会在加速度发生改变时触发。跟{{domxref("DeviceOrientationEvent")}}不同,{{domxref("DeviceMotionEvent")}}监听的是相应方向上加速度的变化。传感器通常都具有监听{{domxref("DeviceMotionEvent")}}的能力,包括笔记本中用于保护移动中的存储设备的传感器。{{domxref("DeviceOrientationEvent")}}事件更多见于移动设备中。</p>

Expand All @@ -30,7 +30,7 @@ <h2 id="处理方向(orientation)事件">处理方向(orientation)事件
<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true);
</pre>

<p>注册完事件监听处理函数后(对应这个例子中的handleOrientation),监听函数会定期地接收到最新的设备方向数据。</p>
<p>注册完事件监听处理函数后(对应这个例子中的 handleOrientation),监听函数会定期地接收到最新的设备方向数据。</p>

<p>方向事件对象中包含四个值:</p>

Expand Down Expand Up @@ -59,9 +59,9 @@ <h3 id="相关值解释">相关值解释</h3>
<p>关于每一个轴的记录值表示的是相对于标准的坐标系,设备在某一个给定轴上的旋转量。<a href="https://developer.mozilla.org/en-US/DOM/Orientation_and_motion_data_explained" style="line-height: 1.5;" title="Orientation and motion data explained">Orientation and motion data explained</a> 这篇文章有更详细的描述,下面是对这篇文章的总结。</p>

<ul>
<li>{{ domxref("DeviceOrientationEvent.alpha") }} 表示设备沿z轴上的旋转角度,范围为0~360。</li>
<li>{{ domxref("DeviceOrientationEvent.beta") }} 表示设备在x轴上的旋转角度,范围为-180~180。它描述的是设备由前向后旋转的情况。</li>
<li>{{ domxref("DeviceOrientationEvent.gamma") }} 表示设备在y轴上的旋转角度,范围为-90~90。它描述的是设备由左向右旋转的情况。</li>
<li>{{ domxref("DeviceOrientationEvent.alpha") }} 表示设备沿 z 轴上的旋转角度,范围为 0~360。</li>
<li>{{ domxref("DeviceOrientationEvent.beta") }} 表示设备在 x 轴上的旋转角度,范围为-180~180。它描述的是设备由前向后旋转的情况。</li>
<li>{{ domxref("DeviceOrientationEvent.gamma") }} 表示设备在 y 轴上的旋转角度,范围为-90~90。它描述的是设备由左向右旋转的情况。</li>
</ul>

<h3 id="例子">例子</h3>
Expand All @@ -80,7 +80,7 @@ <h3 id="例子">例子</h3>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>

<p>花园只有200px宽(很小对吧),球在中央:</p>
<p>花园只有 200px 宽(很小对吧),球在中央:</p>

<pre class="brush: css language-css" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">.garden {
position: relative;
Expand Down Expand Up @@ -226,14 +226,14 @@ <h3 id="例子">例子</h3>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 551px; background: 0px 0px;"></div>
</div>

<p>输出结果:</p>
<p>输出结果</p>

<p>在{{LiveSampleLink("Orientation_example", "这里")}}以新窗口打开此示例;因为有些浏览器中的 {{event("deviceorientation")}} 事件不支持跨域。</p>

<div>{{EmbedLiveSample('Orientation_example', '230', '260')}}</div>

<div class="warning" style="font-size: 14px;">
<p><strong>警告:</strong> Chrome 和 Firefox 处理角度的机制不同,所以某些轴上的方向是相反的。</p>
<p><strong>警告</strong> Chrome 和 Firefox 处理角度的机制不同,所以某些轴上的方向是相反的。</p>
</div>

<h2 id="处理移动(motion)事件" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">处理移动(motion)事件</h2>
Expand All @@ -244,7 +244,7 @@ <h2 id="处理移动(motion)事件" style="margin-bottom: 20px; line-height:

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>

<p>真正不同的是做为参数传递给<em>HandleMotion函数的</em>{{ domxref("DeviceMotionEvent") }}对象所包含的信息。</p>
<p>真正不同的是做为参数传递给<em>HandleMotion 函数的</em>{{ domxref("DeviceMotionEvent") }}对象所包含的信息。</p>

<p>这个对象包含四个属性:</p>

Expand All @@ -257,7 +257,7 @@ <h2 id="处理移动(motion)事件" style="margin-bottom: 20px; line-height:

<h3 id="相关值解释_2" style="line-height: 24px; font-size: 1.71428571428571rem;">相关值解释</h3>

<p>{{ domxref("DeviceMotionEvent") }}对象提供给web开发者设备在位置和方向上的改变速度的相关信息。这些变化信息是通过三个轴来体现的。(<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" style="line-height: 1.5;" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation and motion data explained</a>有更详细的说明。)</p>
<p>{{ domxref("DeviceMotionEvent") }}对象提供给 web 开发者设备在位置和方向上的改变速度的相关信息。这些变化信息是通过三个轴来体现的。(<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" style="line-height: 1.5;" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation and motion data explained</a>有更详细的说明。)</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.acceleration" title="The acceleration property returns the amount of acceleration recorded by the device, in meters per second squared (m/s2)."><code>acceleration</code></a> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.accelerationIncludingGravity" title="The accelerationIncludingGravity property returns the amount of acceleration recorded by the device, in meters per second squared (m/s2). Unlike DeviceMotionEvent.acceleration which does not compensate for the influence of gravity, its value is the sum of the acceleration of the device as induced by the user and the acceleration caused by gravity."><code>accelerationIncludingGravity</code></a>,都包含下面三个轴:</p>

Expand All @@ -271,7 +271,7 @@ <h3 id="相关值解释_2" style="line-height: 24px; font-size: 1.71428571428571

<ul>
<li><code>alpha</code>: 设备沿着垂直于屏幕(对于桌面设备则是垂直于键盘)的轴的旋转速率</li>
<li><code>beta</code>: 设备沿着屏幕(对于桌面设备则是键盘)左至右方向的轴的旋转速率(桌面设备相对于键盘)</li>
<li><code>beta</code>: 设备沿着屏幕(对于桌面设备则是键盘)左至右方向的轴的旋转速率 (桌面设备相对于键盘)</li>
<li><code>gamma</code>: 设备沿着屏幕(对于桌面设备则是键盘)下至上方向的轴的旋转速率</li>
</ul>

Expand Down
18 changes: 9 additions & 9 deletions files/zh-cn/web/events/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
- 总览
translation_of: Web/Events
---
<p>发送DOM事件是为了将发生的相关事情通知代码。每个事件都是继承自{{DOMxRef("Event")}} 接口的对象,可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。事件可以表示任何从基本的用户交互、到发生在渲染模型自动通知的任何事情。</p>
<p>发送 DOM 事件是为了将发生的相关事情通知代码。每个事件都是继承自{{DOMxRef("Event")}} 接口的对象,可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。事件可以表示任何从基本的用户交互、到发生在渲染模型自动通知的任何事情。</p>

<p>本文提供了一个可以发送的事件的列表;一些是官方标准中的标准事件,另一些则是在特定浏览器内部使用的事件;例如,列出的 Mozilla 特定事件,使<a href="/zh-CN/docs/Mozilla/Add-ons">附加组件</a>可以借助它们与浏览器进行交互。</p>

Expand Down Expand Up @@ -191,11 +191,11 @@ <h3 id="CSS_过渡事件">CSS 过渡事件</h3>
</tr>
<tr>
<td>{{Event("transitioncancel")}}</td>
<td>CSS过渡被取消</td>
<td>CSS 过渡被取消</td>
</tr>
<tr>
<td>{{Event("transitionend")}}</td>
<td>CSS过渡已经完成</td>
<td>CSS 过渡已经完成</td>
</tr>
<tr>
<td>{{Event("transitionrun")}}</td>
Expand Down Expand Up @@ -453,15 +453,15 @@ <h3 id="拖放事件">拖放事件</h3>
</tr>
<tr>
<td>{{Event("dragstart")}}</td>
<td>用户开始拖动HTML元素或选中的文本</td>
<td>用户开始拖动 HTML 元素或选中的文本</td>
</tr>
<tr>
<td>{{Event("dragleave")}}</td>
<td>被拖动的元素或文本选区移出有效释放目标区</td>
</tr>
<tr>
<td>{{Event("dragover")}}</td>
<td>被拖动的元素或文本选区正在有效释放目标上被拖动 (在此过程中持续触发,每350ms触发一次</td>
<td>被拖动的元素或文本选区正在有效释放目标上被拖动(在此过程中持续触发,每 350ms 触发一次</td>
</tr>
<tr>
<td>{{Event("drop")}}</td>
Expand Down Expand Up @@ -788,7 +788,7 @@ <h3 id="智能卡事件">智能卡事件</h3>
{{Event("stksessionend")}}<br>
{{Event("cardstatechange")}}</p>

<h3 id="短信和USSD事件">短信和USSD事件</h3>
<h3 id="短信和USSD事件">短信和 USSD 事件</h3>

<p>{{Event("delivered")}}<br>
{{Event("received")}}<br>
Expand All @@ -809,7 +809,7 @@ <h3 id="帧事件">帧事件</h3>
{{Event("mozbrowsershowmodalprompt")}}<br>
{{Event("mozbrowsertitlechange")}}</p>

<h3 id="DOM变异事件">DOM变异事件</h3>
<h3 id="DOM变异事件">DOM 变异事件</h3>

<p><code><a href="/zh-CN/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code><br>
<code><a href="/zh-CN/docs/DOM/Mutation_events">DOMAttrModified</a></code><br>
Expand Down Expand Up @@ -844,7 +844,7 @@ <h3 id="指针事件">指针事件</h3>

<h2 id="标准事件">标准事件</h2>

<p>这些事件在官方Web规范中定义,并且应在各个浏览器中通用。 每个事件都和代表事件接收方的对象(由此您可以查到每个事件提供的数据),定义这个事件的标准或标准链接会一起列出。</p>
<p>这些事件在官方 Web 规范中定义,并且应在各个浏览器中通用。 每个事件都和代表事件接收方的对象(由此您可以查到每个事件提供的数据),定义这个事件的标准或标准链接会一起列出。</p>

<div style="overflow: auto;">
<table class="standard-table">
Expand All @@ -867,7 +867,7 @@ <h2 id="标准事件">标准事件</h2>
<td><code><a href="/zh-CN/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td>
<td>{{DOMxRef("ProgressEvent")}}</td>
<td><a href="http://www.w3.org/TR/progress-events/">Progress</a>and<a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td>
<td>Progress被终止(不是error造成的)</td>
<td>Progress 被终止 (不是 error 造成的)</td>
</tr>
<tr>
<td><code><a href="/zh-CN/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td>
Expand Down
Loading

0 comments on commit 13cc1e2

Please sign in to comment.