这次有点短,就一段,不过挺重要的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
/*
关于事件驱动函数:
在和页面交互的过程钟所调用的函数被称之为事件驱动函数。
此处的“事件”是指和页面交互的行为。例如鼠标点击某个按钮时(onclick)
、鼠标浮动或离开某个区域时(onmouseover, onmouseout)、到文本框获取焦点和失去焦点时(onfocus,
onblur)等
因此,可以通过document.getElementById()函数找到符合条件的标签节点。
然后可以同事件驱动函数,给当前的按钮绑定一系列的操作,完成用户交互。
*/
function square(a){
var Txt = document.getElementById("input_n");
var Btn = document.getElementById("btn1");
var result = Txt.value;
result = result * result;
document.writeln(Txt.value + "的平方是" + result);
}
</script>
</head>
<body>
<div class="mui-input-row">
输入数字来作平方(默认为1):<input type="text" value="1" id="input_n">
<button type="button" value="按钮" id="btn1" onclick="square()">提交</button>
</div>
</body>
运行结果: