JS(六)简单练习 - 好文

一、省市级二级联动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市级二级联动</title>
</head> <body>  <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>
相关链接：点击打开链接 <http://www.jb51.net/article/100667.htm>，点击打开链接
<http://www.techweb.com.cn/network/system/2017-07-18/2559006.shtml>，点击打开链接
<http://www.jb51.net/article/35589.htm>

热门工具换一换