一、省市级二级联动
<!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>