js 输出内容 怎么显示在当前页面

JavaScript020

js 输出内容 怎么显示在当前页面,第1张

<html>

<head>

<script type="text/javascript">

function page_onload(){

document.getElementById("name").value = "XXX小明"

}

</script>

</head>

<body onload="page_onload()">

<input id="name" name="name" type="text" value="" />

</body>

</html>

将id为name选框设置为:XXX小明

自己把这段代码在浏览器上运行一下,就明白了。

这个很简单,LZ稍微研究下就能写出来。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>简单计算器</title>

</head>

<body>

<input placeholder="数字1" id="num1" />

<select id="rule">

<option value="add">+</option>

<option value="sub">-</option>

<option value="multi">*</option>

<option value="division">/</option>

</select>

<input placeholder="数字2" id="num2" /> =

<input placeholder="结果" disabled="disabled" id="result" />

<button id="calcBtn" onclick="execute()">计算</button>

<script>

/**

 * 执行计算,提取数据,交给计算函数

 */

function execute() {

var num1 = document.getElementById("num1").value

var num2 = document.getElementById("num2").value

var rule = document.getElementById("rule").value

var rs = calc(num1, num2, rule)

var result = document.getElementById("result")

result.value = rs

}

/**

 * 计算函数,简单策略模式,严格来说应该给每个算法抽象接口。

 * @param {Object} num1

 * @param {Object} num2

 * @param {Object} rule

 */

function calc(num1, num2, rule) {

num1 = parseFloat(num1)

num2 = parseFloat(num2)

if (isNaN(num1) || isNaN(num2)) {

return "非法的操作数"

}

switch (rule) { //简单选中算法规则

case "add":

return add(num1, num2)

case "sub":

return sub(num1, num2)

case "multi":

return multi(num1, num2)

case "division":

return division(num1, num2)

default:

return "不支持的运算符"

}

}

/**

 * 加法规则,操作数必须合法。

 * @param {Object} num1

 * @param {Object} num2

 */

function add(num1, num2) {

return num1 + num2

}

/**

 * 减法,对于js和java这种方法有财务精度bug

 * @param {Object} num1

 * @param {Object} num2

 */

function sub(num1, num2) {

return num1 - num2

}

/**

 * 乘法

 * @param {Object} num1

 * @param {Object} num2

 */

function multi(num1, num2) {

return num1 * num2

}

/**

 * 除法

 * @param {Object} num1

 * @param {Object} num2

 */

function division(num1, num2) {

if (num2 == 0) {

return "除数不能为零"

}

return num1 / num2

}

</script>

</body>

</html>

你查查document.write是什么意思,如果使用不合理它会把当前页面清空然后再输出,所以才会出现select标签不见了。

一般的话,只有在页面加载的时候才会使用document.write这个函数,如果你在方法中调用这个方法,由于此时的document已经加载而且分析完了,那么document.write()将会重新加载document,而且在加载之前它会把以前加载的东西清除掉。这就是问什么你的select标签不见得原因。

对于你的程序你可以把要加载的东西用innerHTML输出到一个div中,这样的话就没有问题了,而且也比较的规范。