JS 输出

创建时间:2019.05.19 修改时间:2019.05.19

程序的输入和输出是人机交互的重要形式。

JavaScript 的四种输出数据的方式:

弹出警告框

function myFunction1()
{
	var x=document.getElementById("demo1").value;
	if (x.replace(/(^\s*)|(\s*$)/g,"")=="") {
	    window.alert(" 输入内容为空字符 ");
	} else {
	    window.alert(x);
	}
}
<p> 点击弹出输入框中的内容。</p>
<input id="demo1" type="text">
<button type="button" onclick="myFunction1()">  点击弹出  </button>

效果如下:

点击弹出输入框中的内容。

写到 HTML 文档

<script>
document.write(Date());
</script>

效果如下:

注: 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

写到 HTML 元素

<script>
function myFunction2()
{
	document.getElementById("demo2").innerHTML=Date();
}
</script>
<p id="demo2"> 点击按钮改变元素内容。</p>
<button type="button" onclick="myFunction2()"> 显示日期 </button>

效果如下:

点击按钮改变元素内容。

写到控制台

<script>
function myFunction3()
{
	var a=document.getElementById("a").value;
	var b=document.getElementById("b").value;
	console.log(a+b);
}
function myFunction4()
{
	var a=Number(document.getElementById("a").value);
	var b=Number(document.getElementById("b").value);
	console.log(a+b);
}
</script>
<p><input id="a" type="text">+<input id="b" type="text">
<button type="button" onclick="myFunction3()">  字符串相加  </button>
<button type="button" onclick="myFunction4()">  数字相加  </button>
</p>

效果如下:

+

查看方法: 按 F12 来启用浏览器的调试模式,在调试窗口中点击 "Console" 菜单。