Skip to content

Commit

Permalink
zh-cn: Format /web/api using Prettier (part 7)
Browse files Browse the repository at this point in the history
  • Loading branch information
@queengooborg
queengooborg committed Jul 28, 2023
1 parent 09c0ef4 commit b4550a0
Show file tree
Hide file tree
Showing 100 changed files with 1,040 additions and 910 deletions.
119 changes: 65 additions & 54 deletions files/zh-cn/web/api/keyboardevent/code/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,11 @@ slug: Web/API/KeyboardEvent/code
#### HTML

```html
<p>Press keys on the keyboard to see what the KeyboardEvent's key and code
values are for each one.</p>
<div id="output">
</div>
<p>
Press keys on the keyboard to see what the KeyboardEvent's key and code values
are for each one.
</p>
<div id="output"></div>
```

#### CSS
Expand All @@ -40,14 +41,18 @@ slug: Web/API/KeyboardEvent/code
#### JavaScript

```js
window.addEventListener("keydown", function(event) {
let str = "KeyboardEvent: key='" + event.key + "' | code='" +
event.code + "'";
let el = document.createElement("span");
el.innerHTML = str + "<br/>";

document.getElementById("output").appendChild(el);
}, true);
window.addEventListener(
"keydown",
function (event) {
let str =
"KeyboardEvent: key='" + event.key + "' | code='" + event.code + "'";
let el = document.createElement("span");
el.innerHTML = str + "<br/>";

document.getElementById("output").appendChild(el);
},
true,
);
```

#### Try it out
Expand All @@ -65,9 +70,11 @@ This example establishes an event listener for [`keydown`](/zh-CN/docs/Web/API/E
```html
<p>Use the WASD (ZQSD on AZERTY) keys to move and steer.</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world">
<polygon id="spaceship" points="15,0 0,30 30,30"/>
<polygon id="spaceship" points="15,0 0,30 30,30" />
</svg>
<script>refresh();</script>
<script>
refresh();
</script>
```

#### CSS
Expand Down Expand Up @@ -95,12 +102,12 @@ The first section of the JavaScript code establishes some variables we'll be usi
```js
let shipSize = {
width: 30,
height: 30
height: 30,
};

let position = {
x: 200,
y: 200
y: 200,
};

let moveRate = 9;
Expand All @@ -115,9 +122,9 @@ Next comes the function `updatePosition()`. This function takes as input the dis

```js
function updatePosition(offset) {
let rad = angle * (Math.PI/180);
position.x += (Math.sin(rad) * offset);
position.y -= (Math.cos(rad) * offset);
let rad = angle * (Math.PI / 180);
position.x += Math.sin(rad) * offset;
position.y -= Math.cos(rad) * offset;

if (position.x < 0) {
position.x = 399;
Expand All @@ -137,8 +144,8 @@ The `refresh()` function handles applying the rotation and position by using an

```js
function refresh() {
let x = position.x - (shipSize.width/2);
let y = position.y - (shipSize.height/2);
let x = position.x - shipSize.width / 2;
let y = position.y - shipSize.height / 2;
let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) ";

spaceship.setAttribute("transform", transform);
Expand All @@ -148,39 +155,43 @@ function refresh() {
Finally, the `addEventListener()` method is used to start listening for [`keydown`](/zh-CN/docs/Web/API/Element/keydown_event) events, acting on each key by updating the ship position and rotation angle, then calling `refresh()` to draw the ship at its new position and angle.

```js
window.addEventListener("keydown", function(event) {
if (event.preventDefaulted) {
return; // Do nothing if event already handled
}

switch(event.code) {
case "KeyS":
case "ArrowDown":
// Handle "back"
updatePosition(-moveRate);
break;
case "KeyW":
case "ArrowUp":
// Handle "forward"
updatePosition(moveRate);
break;
case "KeyA":
case "ArrowLeft":
// Handle "turn left"
angle -= turnRate;
break;
case "KeyD":
case "ArrowRight":
// Handle "turn right"
angle += turnRate;
break;
}

refresh();

// Consume the event so it doesn't get handled twice
event.preventDefault();
}, true);
window.addEventListener(
"keydown",
function (event) {
if (event.preventDefaulted) {
return; // Do nothing if event already handled
}

switch (event.code) {
case "KeyS":
case "ArrowDown":
// Handle "back"
updatePosition(-moveRate);
break;
case "KeyW":
case "ArrowUp":
// Handle "forward"
updatePosition(moveRate);
break;
case "KeyA":
case "ArrowLeft":
// Handle "turn left"
angle -= turnRate;
break;
case "KeyD":
case "ArrowRight":
// Handle "turn right"
angle += turnRate;
break;
}

refresh();

// Consume the event so it doesn't get handled twice
event.preventDefault();
},
true,
);
```

#### Try it out
Expand Down
88 changes: 46 additions & 42 deletions files/zh-cn/web/api/keyboardevent/key/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,41 +82,41 @@ slug: Web/API/KeyboardEvent/key
### JavaScript

```js
let textarea = document.getElementById('test-target'),
consoleLog = document.getElementById('console-log'),
btnReset = document.getElementById('btn-reset');
let textarea = document.getElementById("test-target"),
consoleLog = document.getElementById("console-log"),
btnReset = document.getElementById("btn-reset");

function logMessage(message) {
consoleLog.innerHTML += `${message}<br>`;
}

textarea.addEventListener('keydown', (e) => {
textarea.addEventListener("keydown", (e) => {
if (!e.repeat) {
logMessage(`按下 "${e.key}" 键 [事件：keydown]`);
} else {
logMessage(`重复 "${e.key}" 键 [事件：keydown]`);
}
});

textarea.addEventListener('beforeinput', (e) => {
textarea.addEventListener("beforeinput", (e) => {
logMessage(`即将输入 "${e.data}" 键 [事件：beforeinput]`);
});

textarea.addEventListener('input', (e) => {
textarea.addEventListener("input", (e) => {
logMessage(`输入 "${e.data}" 键 [事件：input]`);
});

textarea.addEventListener('keyup', (e) => {
textarea.addEventListener("keyup", (e) => {
logMessage(`释放 "${e.key}" 键 [事件： keyup]`);
});

btnReset.addEventListener('click', (e) => {
btnReset.addEventListener("click", (e) => {
let child = consoleLog.firstChild;
while (child) {
consoleLog.removeChild(child);
child = consoleLog.firstChild;
consoleLog.removeChild(child);
child = consoleLog.firstChild;
}
textarea.value = ''
textarea.value = "";
});
```

Expand Down Expand Up @@ -149,37 +149,41 @@ btnReset.addEventListener('click', (e) => {
这个示例使用 {{domxref("EventTarget.addEventListener()")}} 监听 [`keydown`](/zh-CN/docs/Web/API/Element/keydown_event) 事件。当我们事件触发时，将检测按键的值是否为代码所关注，如果是，就进行某项操作。（可能是给飞船转向，或者是调整电子表格中选中单元格的位置。）

```js
window.addEventListener("keydown", function (event) {
if (event.defaultPrevented) {
return; // 如果事件已经在进行中，则不做任何事。
}

switch (event.key) {
case "ArrowUp":
// 按“↑”方向键时要做的事。
break;
case "ArrowDown":
// 按“↓”方向键时要做的事。
break;
case "ArrowLeft":
// 按“←”方向键时要做的事。
break;
case "ArrowRight":
// 按“→”方向键时要做的事。
break;
case "Enter":
// 按“回车”键时要做的事。
break;
case "Escape":
// 按“ESC”键时要做的事。
break;
default:
return; // 什么都没按就退出吧。
}

// 取消默认动作，从而避免处理两次。
event.preventDefault();
}, true);
window.addEventListener(
"keydown",
function (event) {
if (event.defaultPrevented) {
return; // 如果事件已经在进行中，则不做任何事。
}

switch (event.key) {
case "ArrowUp":
// 按“↑”方向键时要做的事。
break;
case "ArrowDown":
// 按“↓”方向键时要做的事。
break;
case "ArrowLeft":
// 按“←”方向键时要做的事。
break;
case "ArrowRight":
// 按“→”方向键时要做的事。
break;
case "Enter":
// 按“回车”键时要做的事。
break;
case "Escape":
// 按“ESC”键时要做的事。
break;
default:
return; // 什么都没按就退出吧。
}

// 取消默认动作，从而避免处理两次。
event.preventDefault();
},
true,
);
```

## 规范
Expand Down
48 changes: 26 additions & 22 deletions files/zh-cn/web/api/keyboardevent/keycode/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,27 @@ slug: Web/API/KeyboardEvent/keyCode
## Example

```js
window.addEventListener("keydown", function (event) {
if (event.defaultPrevented) {
return; // 如果已取消默认操作，则不应执行任何操作
}
window.addEventListener(
"keydown",
function (event) {
if (event.defaultPrevented) {
return; // 如果已取消默认操作，则不应执行任何操作
}

var handled = false;
if (event.key !== undefined) {
// 使用 KeyboardEvent.key 处理事件，并将 handled 设置为 true。
} else if (event.keyCode !== undefined) {
//使用 KeyboardEvent.keyCode 处理事件并将 handled 设置为 true。
}
var handled = false;
if (event.key !== undefined) {
// 使用 KeyboardEvent.key 处理事件，并将 handled 设置为 true。
} else if (event.keyCode !== undefined) {
//使用 KeyboardEvent.keyCode 处理事件并将 handled 设置为 true。
}

if (handled) {
// 如果事件已处理，则禁止“双重操作”
event.preventDefault();
}
}, true);
if (handled) {
// 如果事件已处理，则禁止“双重操作”
event.preventDefault();
}
},
true,
);
```

## 规范
Expand Down Expand Up @@ -70,17 +74,17 @@ Google Chrome、Chromium 和 Safari 必须根据输入字符确定值。如果
1. 如果运行 macOS 或者 Linux:

1. 如果你当前的键盘布局不支持 ASCII 并且候选支持 ASCII 键盘布局可用。
1. 如果你当前的键盘布局不支持 ASCII 并且候选支持 ASCII 键盘布局可用。

1. 如果候选支持 ASCII 的键盘布局仅通过未修改的键产生 ASCII 字符，请对该字符使用`keyCode`。
2. 如果候选支持 ASCII 的键盘布局产生带有 Shift 键修饰符的 ASCII 字符，请对该字符使用`keyCode`。
3. 否则，在美国键盘布局激活时，使用使用`keyCode`表示由按键产生的 ASCII 字符。
1. 如果候选支持 ASCII 的键盘布局仅通过未修改的键产生 ASCII 字符，请对该字符使用`keyCode`。
2. 如果候选支持 ASCII 的键盘布局产生带有 Shift 键修饰符的 ASCII 字符，请对该字符使用`keyCode`。
3. 否则，在美国键盘布局激活时，使用使用`keyCode`表示由按键产生的 ASCII 字符。

2. 否则，在美国键盘布局激活时，使用使用`keyCode`表示由按键产生的 ASCII 字符。
2. 否则，在美国键盘布局激活时，使用使用`keyCode`表示由按键产生的 ASCII 字符。

2. 如果运行 Windows：

1. 当美国键盘布局激活时，使用映射到 Windows 的相同虚拟键代码的按键产生的 ASCII 字符的`keyCode`值。
1. 当美国键盘布局激活时，使用映射到 Windows 的相同虚拟键代码的按键产生的 ASCII 字符的`keyCode`值。

由标准位置的可打印键引起的每个浏览器的 keydown 事件的 keycode 值

Expand Down Expand Up @@ -2514,7 +2518,7 @@ gecko 在 keyboardvent 中定义了许多 keycode 值，用于显式地生成映
| `DOM_VK_TAB` | 0x09 (9) | Tab key. |
| `DOM_VK_CLEAR` | 0x0C (12) | "5" key on Numpad when NumLock is unlocked. Or on Mac, clear key which is positioned at NumLock key. |
| `DOM_VK_RETURN` | 0x0D (13) | Return/enter key on the main keyboard. |
| `DOM_VK_ENTER` | 0x0E (14) | Reserved, but not used. {{Deprecated_Inline}} (Dropped, see [Firefox bug 969247](https://bugzil.la/969247).) |
| `DOM_VK_ENTER` | 0x0E (14) | Reserved, but not used. {{Deprecated_Inline}} (Dropped, see [Firefox bug 969247](https://bugzil.la/969247).) |
| `DOM_VK_SHIFT` | 0x10 (16) | Shift key. |
| `DOM_VK_CONTROL` | 0x11 (17) | Control key. |
| `DOM_VK_ALT` | 0x12 (18) | Alt (Option on Mac) key. |
Expand Down
18 changes: 9 additions & 9 deletions files/zh-cn/web/api/keyboardevent/metakey/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@ var metaKeyPressed = instanceOfKeyboardEvent.metaKey
## 示例

```js
function goInput(e) {
// 检测 metaKey 值
if (e.metaKey) {
// 继续处理事件
superSizeOutput(e);
} else {
doOutput(e);
}
}
function goInput(e) {
// 检测 metaKey 值
if (e.metaKey) {
// 继续处理事件
superSizeOutput(e);
} else {
doOutput(e);
}
}
```

{{ EmbedLiveSample('示例', 400, 36) }}
Expand Down
Loading

0 comments on commit b4550a0

Please sign in to comment.