<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <button id="btn" οnclick="fun()">按钮</button>
<button id="btn">按钮</button>
<input type="text" id="num1" value="1">
<button οnclick="fun()">按钮</button> -->
<!-- 应用一
<input type="text" id="num1"><br>
<input type="text" id="num2"><br>
<button οnclick="jia()">+</button>
<button οnclick="jian()">-</button><br>
<input type="text" id="and"> -->
<!-- 应用二 -->
第一个数:<input type="text" id="num1"><br>
第二个数:<input type="text" id="num2"><br>
<button οnclick="calc('+')">+</button>
<button οnclick="calc('-')">-</button>
<button οnclick="calc('x')">x</button>
<button οnclick="calc('/')">/</button>
<br>
结果:<input type="text" id="res">
</body>
<script>
// var ipt1 = document.getElementById("num1");//获取input元素对象
// function fun() {
// // alert(ipt1.value);//通过 input对象.value 可以获取input框里输入值
// ipt1.value = 100;
// }
// var b = document.getElementById("btn");
// console.log(b);
// alert(b)
// js
// ecmascript
// BOM
// DOM
// document.write()
// document.getElementById()
// document 文档对象
// get 获取
// Element 元素（标签）
// By 通过
// Id
</script>
<!-- 应用一
<script>
var nu1 = document.getElementById("num1");
var nu2 = document.getElementById("num2");
var an = document.getElementById("and");
function jia() {
if (isNaN(nu1.value) == false && isNaN(nu2.value) == false) {
an.value = (+nu1.value) + (+nu2.value);
} else {
alert('请输入数字');
}
}
function jian() {
if (isNaN(nu1.value) == false && isNaN(nu2.value) == false) {
an.value = (+nu1.value) - (+nu2.value);
} else {
alert('请输入数字');
}
}
</script> -->
<!-- 应用二 -->
<script>
var ipt1 = document.getElementById("num1");//标签对象 input
var ipt2 = document.getElementById("num2");//标签对象 input
var res = document.getElementById("res");//input标签
function calc(fh) {
var n1 = +ipt1.value;//第一个input里输入值
var n2 = +ipt2.value;//第二个input里输入值
if (fh === "+") {
res.value = n1 + n2;
} else if (fh === "-") {
res.value = n1 - n2;
} else if (fh === "x") {
res.value = n1 * n2;
} else if (fh === "/") {
res.value = n1 / n2;
}
}
// 可以通过.value 来获取值的标签：
// input
// textarea
// select
</script>
</html>