<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript输出</title>
</head>
<body>
<h3>1.window.alert() 弹出警告框。</h3>
<p style="cursor: pointer;color: red;" onclick="outPut1()">点我</p>
<!-- onclick="outPut1()"鼠标点击就执行outPut1()函数 -->
<script type="text/javascript">
function outPut1(){
window.alert("AWSL！");/* 弹窗内容 */
/* alert("AWSL！")，效果是一样的； */
}
</script>
<p>--------------------------------</p>
<h3>2.document.write() 将内容写到 HTML 文档中。</h3>
<script type="text/javascript">
document.write("<p>我是写入内容！</p>");/* 输出内容 */
/* 这里不用加函数，003一文中说过，如果写在函数中，当函数被调用时，会覆盖整个文档； */
</script>
<p>--------------------------------</p>
<h3>3.innerHTML 写入到 HTML 元素。</h3>
<p id="demo1" onclick="outPut3()" style="color: red;cursor: pointer;">点我</p>
<script type="text/javascript">
function outPut3(){
var x = document.getElementById('demo1');
x.innerHTML='我是通过innerHTML写入的内容！';
}
/*
document.getElementById('demo1').innerHTML='我是通过innerHTML写入的内容！';
可以不用函数直接输出，这样就没有鼠标点击触发的效果；
*/
</script>
<p>--------------------------------</p>
<h3>4.console.log() 写入到浏览器的控制台。</h3>
<p>浏览器中(Chrome,IE,UC)使用 F12 或 网页 右键>检查 来启用调试模式，
在调试窗口中点击 "Console" 菜单。</p>
<p onclick="outPut4()" style="color: red;cursor: pointer;">点我</p>
<script type="text/javascript">
function outPut4(){
console.log('测试控制台输出内容！');
}
/*
console.log('测试控制台输出内容！');
同上，可以不用函数直接输出；
*/
</script>
</body>
</html>
浙公网安备 33010602011771号