4-JavaScript 用法
body { margin: 0 }
#content-info { width: auto; margin: 0 auto; text-align: center }
#author-info { white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
#title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-top: 10px; margin-bottom: 2px; font-size: 34px; color: rgba(80, 80, 80, 1) }
.text { white-space: nowrap; text-overflow: ellipsis; display: inline-block; margin-right: 20px; margin-bottom: 2px; font-size: 20px; color: rgba(140, 140, 140, 1) }
#navBar { width: auto; height: auto; position: fixed; right: 0; bottom: 0; background-color: rgba(240, 243, 244, 1); overflow-y: auto; text-align: center }
#svg-container { width: 100%; overflow-x: scroll; min-width: 0; margin: 0 10px; overflow: visible; position: relative }
#nav-thumbs { overflow-y: scroll; padding: 0 5px }
.nav-thumb { position: relative; margin: 10px auto }
.nav-thumb>p { text-align: center; font-size: 12px; margin: 4px 0 0 }
.nav-thumb>div { position: relative; display: inline-block; border: 1px solid rgba(198, 207, 213, 1) }
.nav-thumb img { display: block }
#main-content { bottom: 0; left: 0; right: 0; background-color: rgba(208, 207, 216, 1); display: flex; height: auto; flex-flow: row wrap; text-align: center }
#svg-container>svg { overflow: visible; display: block; margin: 5px auto }
#copyright { bottom: 0; left: 50%; margin: 5px auto; font-size: 16px; color: rgba(81, 81, 81, 1) }
#copyright>a { text-decoration: none; color: rgba(119, 119, 204, 1) }
.number { position: absolute; top: 0; left: 0; border-top: 22px solid rgba(8, 161, 239, 1); border-right: 22px solid rgba(0, 0, 0, 0) }
.pagenum { font-size: 12px; color: rgba(255, 255, 255, 1); position: absolute; top: -23px; left: 2px }
#navBar::-webkit-scrollbar { width: 8px; background-color: rgba(245, 245, 245, 1) }
#navBar::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3); border-radius: 8px; background-color: rgba(255, 255, 255, 1) }
#navBar::-webkit-scrollbar-thumb { border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3); background-color: rgba(107, 107, 112, 1) }
#navBar::-webkit-scrollbar-thumb:hover { background-color: rgba(74, 74, 79, 1) }
g[ed\:togtopicid],g[ed\:hyperlink],g[ed\:comment],g[ed\:note] {cursor:pointer;}
g[id] {-moz-user-select: none;-ms-user-select: none;user-select: none;}
svg text::selection,svg tspan::selection{background-color: #4285f4;color: #ffffff;fill: #ffffff;}
.st4 {fill:#000000;font-family:Arial;font-size:10pt}
.st3 {fill:#303030;font-family:Arial;font-size:10pt}
.st2 {fill:#303030;font-family:Arial;font-size:14pt;font-weight:bold}
.st5 {fill:#303030}
.st1 {fill:#ffffff;font-family:Arial;font-size:18pt;font-weight:bold}
JavaScript 用法
body中的JavaScript
Head中的JavaScript
外部的JavaScript
实例1
实例2
<script>
alert(“我的第一个JavaScript”);
</script>
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write(“<h1>这是一个标题</h1>”);
document.write(“<p>这是一个段落</p>”);
</script>
.
.
</body>
</html>
实例3
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id=”demo”>一个段落</p>
<button type=”button” onclick=”myFunction()”>尝试一下</button>
<script>
function myFunction(){
document.getElementById(“demo”).innerHTML=”我的第一个 JavaScript 函数”;
}
</script>
</body>
</html>
实例1
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
document.getElementById(“demo”).innerHTML=”我的第一个 JavaScript 函数”;
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id=”demo”>一个段落</p>
<button type=”button” onclick=”myFunction()”>尝试一下</button>
</body>
</html>
使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件
实例
myScript.js
<!DOCTYPE html>
<html>
<body>
<script src=”myScript.js”></script>
</body>
</html>
function myFunction() {
document.getElementById(“demo”).innerHTML=”我的第一个 JavaScript 函数”;
}