Last active
February 25, 2019 02:40
-
-
Save Foair/1f585e2710341f08a1401ddc635cefd1 to your computer and use it in GitHub Desktop.
一个用于展示大屏汉字的网页
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="cmn-Hans"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=Edge"> | |
| <title>学汉字</title> | |
| <style> | |
| body { | |
| height: 100vh; | |
| font-family: "汉仪字典宋"; | |
| margin: 0; | |
| padding: 0 60px; | |
| text-align: center; | |
| box-sizing: border-box; | |
| } | |
| #show { | |
| font-size: 100px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| #container { | |
| margin-top: 50px; | |
| display: flex; | |
| height: 80%; | |
| justify-content: center; | |
| } | |
| input[type=text] { | |
| border: 1px solid #000; | |
| padding: 2px 4px; | |
| } | |
| input[type=text]:focus { | |
| outline: none; | |
| } | |
| </style> | |
| <script> | |
| function show() { | |
| document.getElementById("show").innerText = document.getElementsByName("text")[0].value; | |
| } | |
| function inputFocus() { | |
| document.getElementsByName("text")[0].select(); | |
| } | |
| function ifEnter(event) { | |
| if (event.keyCode == 13) { | |
| document.getElementsByName("text")[0].value = ""; | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body onclick="inputFocus()" onkeydown="ifEnter(event)"> | |
| <input type="text" name="text" oninput="show()" autofocus> | |
| <div id="container"> | |
| <div id="show"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment