6-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;}
.st11 {fill:#000000;font-family:Arial;font-size:14pt;font-weight:bold}
.st13 {fill:#303030;font-family:Arial;font-size:10pt}
.st10 {fill:#303030;font-family:Arial;font-size:14pt;font-weight:bold}
.st12 {fill:#303030}
.st9 {fill:#ffffff;font-family:Arial;font-size:18pt;font-weight:bold}
JavaScript 输出
window.alert()
document.write()
innerHTML
弹出警告框
实例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
console.log()
将内容写到 HTML 文档中
写入到 HTML 元素
写入到浏览器的控制台
实例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id=”demo”>我的第一个段落</p>
<script>
document.getElementById(“demo”).innerHTML = “段落已修改。”;
</script>
</body>
</html>
document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代
码
innerHTML = “Paragraph changed.” 是用于修改元素的 HTML 内容(innerHTML)的
JavaScript 代码
实例
document.write() 仅仅向文档输出写内容
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
实例1
实例2
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick=”myFunction()”>点我</button>
<script>
function myFunction()
{
document.write(Date());
}
</script>
</body>
</html>
实例
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击
“Console” 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
alert(c)
</script>
</body>
</html>
console.log() 方法能够让你看到你在页面中的输出内容，让你更容易调试javascript
与alert相比，console不会打断你页面的操作，console里面的内容非常丰富，你可以在
控制台输入 console。