前端笔记56——switch语句

最新推荐文章于 2025-06-08 14:49:01 发布

野生杂学家阿博

最新推荐文章于 2025-06-08 14:49:01 发布

阅读量1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 JavaScript switch

本文链接：https://blog.youkuaiyun.com/chengxu_kuangrexintu/article/details/85758342

前端专栏收录该内容

93 篇文章

订阅专栏

本文详细解析了switch语句的语法及执行原理，通过实例展示了如何使用switch进行条件判断，并强调了break关键字的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

switch语句语法

switch(状态值){
    case 状态值1：
        code...1
        break;
    case 状态值2:
        code...2
        break;
    case 状态值3:
        code...3
        break;
    default:
        code...4
        break;
}

switch执行原理：用switch括号里面的结果和case后面的结果做比对，如果一样就执行对应的case后面的代码。

代码举例

我这里样式方面引入了bootstrap.css，如果需要运行看效果的小伙伴，可以自定义一下样式。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style type="text/css">
			input {
				/*!important 强制提高优先级*/
				width: 100px !important;
				margin-top: 100px;
			}
		</style>
	</head>

	<body>
		<input id="ipt" type="text" class="form-control" />
		<button id="btn" class="btn btn-danger">判断</button>
		<script type="text/javascript">
			var oIpt = document.getElementById("ipt")
			var oBtn = document.getElementById("btn")
			oBtn.onclick = function() {
				var num = oIpt.value
				switch(num) {
					case "1":
						alert("星期一")
						break
					case "2":
						alert("星期二")
						break
					case "3":
						alert("星期三")
						break
					case "4":
						alert("星期四")
						break
					case "5":
						alert("星期五")
						break
					case "6":
						alert("星期六")
						break
					case "7":
						alert("星期日")
						break
					default:
						// 如果前面的都不满足就执行default里面的内容
						// default是可选的
						alert("输入不正确")
						break
				}
			}
		</script>
	</body>
</html>

switch语句中的break关键字一定要写，要不然执行了相应的case之后会跳转下一个case语句。