<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
800px;
height: 50px;
border: 1px solid #000;
padding: 0 20px;
font-size: 30px;
line-height: 50px;
color: blue;
}
</style>
</head>
<body>
请您输入商品编号: <input type="text"><br>
<button>查询</button>
<div></div>
<script>
// switch语句
// if语句 和 switch语句 都是分支结构语句
// 两个语句应用环境是有区别的
// if语句更适合做 范围条件的判断以及 嵌套的判断
// > < >= <= 以及 判断的嵌套
// switch语句,更适合做判断是否是某个具体数值的判断
// ===
// switch的语法格式
/*
switch( 变量 ){
case 数值1:
执行程序1;
break;
case 数值2:
执行程序2;
break;
....
default:
default执行程序;
break;
}
switch 是 语句的关键词
switch() ()中是要判断的变量
case 数值 判断变量中的数据,是否是某个具体的数值
在JavaScript中 switch 语句 执行的 是 === 全等判断 数据类型和数值必须都是一致的
执行程序 当变量中存储的数值 全等于 case 后定义的数值,所执行的程序
break 终止语句
switch语句,默认会从定位的程序处,一直执行到所有程序的结束,除非遇到break语句,才会终止执行
if判断,执行完一个条件的语句之后,不会执行之后条件的语句
switch,执行完一个条件的语句之后,默认会执行之后条件的语句,不管满足不满足判断条件
switch语句中,每一个判断条件case执行的程序,最后一定要加一个break
除非特殊需要的情况,才会不写break
default 就相当于 if语句 的 else
当 变量的数值 , 不满足所有 case 定位的数据时
执行default中定义的程序
也是做容错处理的
一般都把 default 写在代码的最后
break 关键词 可以不写
*/
// 例如有 5种 商品 输入对应的商品编号,可以获取到指定的商品信息
var oBtn = document.querySelector('button');
var oDiv = document.querySelector('div');
oBtn.onclick = function () {
var num = document.querySelector('input').value;
// input输入获取的数据都是字符串类型
// if( num === '1' ){
// oDiv.innerHTML = '商品编号1,商品名称 可口可乐 , 单价 1 元,库存 1 件';
// }else if(num === '2'){
// oDiv.innerHTML = '商品编号2,商品名称 百事可乐 , 单价 2 元,库存 2 件';
// }else if(num === '3'){
// oDiv.innerHTML = '商品编号3,商品名称 非常可乐 , 单价 3 元,库存 3 件';
// }else if(num === '4'){
// oDiv.innerHTML = '商品编号4,商品名称 就是可乐 , 单价 4 元,库存 4 件';
// }else if(num === '5'){
// oDiv.innerHTML = '商品编号5,商品名称 反正是可乐 , 单价 5 元,库存 5 件';
// }else{
// oDiv.innerHTML = '没有您输入的产品编号,输入错误,您是不是瞎啊';
// }
// 总结:
// if语句,执行效果,没有任何问题,只是执行效率偏低
// if语句,是从第一个条件开始判断,如果是true就执行输出,不再执行之后的程序
// 如果是false,继续执行下一个条件判断
// 如果现在输入的是错误数据,需要从第一个条件,依次判断,一直到最后一个条件,都是false
// 之后执行else中的程序
// 实际上会执行判断所有的条件,效率就比较低
// 在判断是否是某个数值时 如果使用 switch 语句
// 会直接将执行程序定位 至 匹配的数值程序 上 直接执行对应的程序
// 不用依次执行判断
// 像这样 多个条件 都是 判断 === 某个数值 使用 switch 语句,效率更高
switch (num) {
case '1':
oDiv.innerHTML = '商品编号1,商品名称 可口可乐 , 单价 1 元,库存 1 件';
break;
case '2':
oDiv.innerHTML = '商品编号2,商品名称 百事可乐 , 单价 2 元,库存 2 件';
break;
case '3':
oDiv.innerHTML = '商品编号3,商品名称 非常可乐 , 单价 3 元,库存 3 件';
break;
case '4':
oDiv.innerHTML = '商品编号4,商品名称 就是可乐 , 单价 4 元,库存 4 件';
break;
case '5':
oDiv.innerHTML = '商品编号5,商品名称 反正是可乐 , 单价 5 元,库存 5 件';
break;
default:
oDiv.innerHTML = '没有您输入的产品编号,输入错误,您是不是瞎啊';
break;
}
}
</script>
</body>
</html>