一、省市级二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市级二级联动</title>
</head>
<body>
<!--onchange 监听下拉框内容改变的事件-->
<select id="province" onchange="show()">
<option >--省份--</option>
<option value="">陕西</option>
<option value="">河南</option>
<option value="">山西</option>
</select>
<select id="city">
<option value="">--城市--</option>
</select>
</body>
<script type="text/javascript">
//需求:根据用户选择的省份，去动态生成该省对应的城市
//即：省份的变化，对应的城市也发生变化
//1、你得知道用户选的是哪个省
var provice=document.getElementById("province");
//2、定位到对应的市集合
var mycity = document.getElementById("city");
var city = [
[],["西安", "咸阳", "宝鸡", "汉中", "渭南", "安康", "商洛", "铜川"],["南阳","安阳","信阳","洛阳","商丘"],
["运城", "太原", "晋城", "长治"]
];
//3、动态的添加标签
function show() {
//(1)首先清空select中原来的城市(遗留问题)
mycity.innerHTML = "<option>--城市--</option>"; //方式1
//(2)每一个下拉框都有一个对应的编号，selectedIndex属性设置或返回下拉列表中被选项目的索引号(从0开始)
var index = provice.selectedIndex;
//(3)通过索引遍历二维数组中的一维数组--定位到当前选择的省份
var citys = city[index];
//(4)将该省份对应的城市动态的增加到selest中(通过innerHTML的形式)
for(var i = 0; i < citys.length; i++) {
//这里没有采用循环创建标签的形式，太麻烦
mycity.innerHTML += "<option>" + citys[i] + "</option>";
}
}
</script>
</html>
问题：二级联动无非是建立关系，那么如何建立关系呢？下拉框的省份发生变化时，城市是如何知道的，从而显示相应的内容。
说明：onchange时刻检测自身内容是否发生变化，如果发生变化，则触发相应 的函数，通知城市下拉框去显示对应的内容。而城市下拉框则在需要的前提下，动态的显示相应的内容。
二、简单的计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的计算器</title>
<!--第二步构建样式-->
<style type="text/css">
/*0：设计表单中表框的样式*/
input {
width: 296px;
/*主要是为了跟数字的边框一样高*/
height: 50px;
font-size: 30px;
}
/*(1)行样式的设计--居中*/
tr {
text-align: center;
}
/*(2)列样式的设计--居中(五行四列)*/
td {
width: 75px;
height: 100px;
}
/*(3)鼠标悬浮时,对应数字的背景发生变化*/
td:hover {
background: greenyellow;
}
.num:hover {
background: yellow;
}
.operator:hover {
background: blue;
}
#result:hover {
background: pink;
}
</style>
<script type="text/javascript">
window.onload = function() {
//(1)先获取计算机键盘中的各个键的对象
var show = document.getElementById("show"); //表框的显示
var result = document.getElementById("result"); //=号的运算符
var del = document.getElementById("del"); //退格键
var clean = document.getElementById("clean"); //清除键，恢复到初始化的
var nums = document.getElementsByClassName("num"); //数字键
var operations = document.getElementsByClassName("operator"); //操作符(四则)
//(2)初始化：定义三个变量,用来保存 第一个数字、第二个数字、运算符
var value1 = ""; //获取当前输入的数字
var value2 = ""; //保存上一次运算的结果
var oper = ""; //保存运算过程中的运算符
//(3)数字键：获取数字，并设置点击，显示在显示框中
for (var i = 0; i < nums.length; i++) {
//用户点击数字时，会触发该数字对应的标签
//小数点可能出现的问题：一个数字中出现多个小数点，同时小数点是第一位应自动补0
nums[i].onclick = function() {
//判断当前的运算符是啥
if (this.innerHTML == ".") {
//判断个数
if (value1.indexOf(".") == -1) {
//表示当前数字没有小数点，则接受
value1 += this.innerHTML; //待显示的数据(连续输入多个数字)
show.value = value1; //显示在表框中
} else {
//表示已经有一个了，则不追加到数字上(不管，只显示)
show.value = value1;
}
} else { //表示当前的是数字是不是0
if (this.innerHTML == 0) {
//当前点击的是0，要看首字母是不是0(以免开头连零)
if (value1.indexOf("0") == 0) {
show.value = value1; //显示在表框中
} else {
value1 += this.innerHTML; //待显示的数据(连续输入多个数字)
show.value = value1; //显示在表框中
}
} else {
value1 += this.innerHTML; //待显示的数据(连续输入多个数字)
show.value = value1; //显示在表框中
}
}
}
}
//(4)运算符
for (var i = 0; i < operations.length; i++) {
//用户点击操作符会触发，等待下一个数字的到来进行运算
operations[i].onclick = function() {
//用户一旦进行四则运算(value2就已经不为空了)---当再次出现运算符时，需要计算并显示当前的计算值()
if (value2 != "") {
if (value1 != "") {
resultFunction(); //进行计算了(得到的value2就是计算结果)
}
oper = this.innerHTML; //保存运算符
} else { //非四则的情况--看数字符号是不是
if (value1.indexOf(".") == 0) {
value1 = value1 + 0;
show.value = value1; //显示数据(补0)
}
//show.value = value1; //显示数据(保持不变--可能是上一次的运算结果)
value2 = value1; //保存运算符前面的计算结果(数字--尚未计算)
value1 = ""; //清空，准备接受下一个数据
oper = this.innerHTML; //保存运算符
}
}
}
//(5)=号操作符
result.onclick = function() {
//用户一旦点击=运算符，开始进行计算
resultFunction(); //抽取一个函数
}
function resultFunction() {
//由于是字符串，需要将字符串转化为数字
var one = Number(value2); //实际第一次输入的数据(或上次的计算结果)
var two = Number(value1); //运算符右面的结果
var temp = 0; //运算结果的保存
//根据数字中间的运算符，做相应的计算
switch (oper) {
case "+":
temp = one + two;
break;
case "-":
temp = one - two;
break;
case "*":
temp = one * two;
break;
case "/":
if (two != 0) {
temp = one / two;
} else {
alert("除数不能为0");
//恢复到初始状态
temp = 0; //要显示的值
}
break;
case "%":
temp = one % two;
break;
}
show.value = temp.toFixed(4) * 1; //显示数据(保留四位有效数字)
//为了方便四则运算，需要做下面的改进
//我们可以理解为一旦进行"一次运算"相当于输入第一个完整的数字就可以了
oper = ""; //运算符清空，等待输入第二个数据
value1 = ""; //清空数据，等待输入第二个数据
value2 = temp; //保存运算结果(相当于输入一个数字后，将要输入运算符的状态)
}
//(6)给清除键设置点击事件---还原到初始默认状态
clean.onclick = function() {
value1 = "";
value2 = "";
oper = "";
show.value = "0"; //默认显示为0
}
//(7)退格键---退到什么程度(最终可以恢复到初始状态)
del.onclick = function() {
if (value1 == "" && value2 != "") {
//表示是等号获得的结果--直接清除
value2 = "";
oper = "";
show.value = "0";
} else {
//不是等号的运算的结果
if (value1.length > 0) {
value1 = value1.substring(0, value1.length - 1); //剔除最后一位
if (value1 == "") {
show.value = "0"; //默认显示为0
oper = "";
value2 = "";
} else {
show.value = value1; //显示退格后的数字
}
}
}
}
}
</script>
</head>
<body>
<!--第一步：构建骨架(标签属性设置的说明)-->
<center>
<input type="text" value="0" disabled="disabled" id="show" />
<table width="300px" height="500px" border="1" align="center" cellspacing="0">
<tr>
<td id="clean">C</td>
<td id="del">DEL</td>
<td class="operator">%</td>
<td class="operator">/</td>
</tr>
<tr>
<td class="num">7</td>
<td class="num">8</td>
<td class="num">9</td>
<td class="operator">*</td>
</tr>
<tr>
<td class="num">4</td>
<td class="num">5</td>
<td class="num">6</td>
<td class="operator">-</td>
</tr>
<tr>
<td class="num">1</td>
<td class="num">2</td>
<td class="num">3</td>
<td class="operator">+</td>
</tr>
<tr>
<td colspan="2" class="num">0</td>
<td class="num">.</td>
<td id="result">=</td>
</tr>
</table>
</center>
</body>
</html>