js中switch语句中case值可以表示一个范围。
1、打开浏览器的控制台，在控制台中定义一个函数，函数中使用switch命令，case后面的条件是一个范围：
2、调用函数，函数的参数值为“90”，由于“90”大于“80”，所以函数返回“优秀”：
3、调用函数，函数的参数值为“59”，由于“59”大于“0”，所以函数返回“不及格”：
关于switch的用法，其实也就是类似if else的另外一种用法而已
具体的运行逻辑就是，
首先计算switch后边括号里面的表达式，得出一个值，
然后在机选每个case后边的表达式，进行对比，如果相等，就执行case冒号后边的逻辑，否则就计算下一个case后边的表达式
如果计算的case里面包含了break语句，则会跳出switch的语句
如果switch里面包含default语句，则不管switch计算的值是否与case里面的值匹配，都会执行，除非遇到break语句跳出
case后边可以包含的语法就是一个正常的表达式，不一定是个常量，只要是正确的js表达式，都可以的
举个例子吧:
var id = 2var s = 1
switch(id){//计算id的值
case 2://计算常量
alert('2 true')
case 1 + 1://计算数字相加
alert('1 + 1 true')
case 1 * 2://计算数字相乘
alert('1 * 2 true')
case s * 2://计算变量
alert('s * 2 true')
default : //默认执行
alert('default')
}
//具体的执行，就是这样
//1. 计算switch小括号里面的表达式，得出结果a
//2. 计算case后边的表达式，得出结果b
//3. 进行验证 a === b 如果相等，则执行case，否则跳过这个case，继续2步骤
//4. 强制中断switch语句可以用return , break这俩个关键字在case后边的执行语句里，
// 可以跳出switch的验证
//然后加上break语句
//这样，只要有一次可以匹配通过，就会跳出其他的判断条件和if else if else 差不多
switch(id){//计算id的值
case 2://计算常量
alert('2 true')
break
case 1 + 1://计算数字相加
alert('1 + 1 true')
break
case 1 * 2://计算数字相乘
alert('1 * 2 true')
return //return也可以中断switch的case，并且会将整个方法中断
case s * 2://计算变量
alert('s * 2 true')
break
default : //默认执行
alert('default')
}
//一个简单的例子
function type(obj){
switch(typeof obj){
case 'string' :
return 'string'
case 'function':
return 'function'
case 'object':
return 'object'
case 'number':
return 'number'
}
}
alert(type('字符串'))
添加多个class 其实可以先从添加一个class然后对其进行封装
好的我废话就不多说了下面给出一份演示
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.asdasd{
width:100px
height: 100px
background-color: #cccccc
}
.hello{
background-color: #00AEEF
}
</style>
</head>
<body>
<div class="asdasd" id="demo">
</div>
<script>
//清楚空格
function trim(str,t){
if(typeof t == "undefined"){
t="lr"
}
switch (t){
case "l":{
return str.replace(/(^\s*)/g, "")
}
case "r":{
return str.replace(/(\s*$)/g, "")
}
case "lr":{
return str.replace(/(^\s*)|(\s*$)/g, "")
}
}
}
//增加Class
function addClass(ele,cls){
if(!ele.getAttribute)return
var allClass=[]
cls=trim(cls)
if(ele.getAttribute("class") == null){}else{
allClass=ele.getAttribute("class").split(" ")
}
if(!inArr(allClass,cls)){
allClass.push(cls)
ele.setAttribute("class",allClass.join(" "))
}
}
//循环
function each(arr,f){
if(!arr.length)return console.log("error:array is not length")
for(var i = 0i<arr.lengthi++){
f.call(arr[i],i,arr[i])
}
}
//是否在数组里面 其实可以通过indexof判断但是indexof是匹配了数据类型的
function inArr(arr,v){
if(!arr.length)return false
for(var i = 0i<arr.lengthi++){
if(v==arr[i]){return true}
}
return false
}
//增加多个Class
function addClassArr(ele,arr){
each(arr,function(){
addClass(ele,this)
})
}
addClassArr(document.getElementById("demo"),["a1","hello","world"])
</script>
</body>
</html>
可以看到 如果没有执行addClassArr这个函数显示的效果的这样的
执行了addClassArr这个函数显示的效果是这样的
