码迷,mamicode.com
首页 > 其他好文 > 详细

switch语句

时间:2017-07-13 10:30:27      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:进入   div   value   table   turn   radius   font   结果   ges   

CreateTime--2017年7月13日08:40:07
Author:Marydon

switch语句

参考链接:http://www.w3school.com.cn/js/pro_js_statements_switch.asp

switch 语句是 if 语句的兄弟语句。

一、switch语句介绍

语法:

switch (expression)
  case value: statement;
    break;
  case value: statement;
    break;
  case value: statement;
    break;
  case value: statement;
    break;
...
  case value: statement;
    break;
  default: statement;

说明:  

  每个情况(case)都是表示“如果 expression 等于 value,就执行 statement”。

  关键字 break 会使代码跳出 switch 语句。如果没有关键字 break,代码执行就会继续进入下一个 case。

  关键字 default 说明了表达式的结果不等于任何一种情况时的操作(事实上,它相对于 else 从句)。

switch 语句主要是为避免让开发者编写下面的代码:

if (i == 20)
  alert("20");
else if (i == 30)
  alert("30");
else if (i == 40)
  alert("40");
else
  alert("other");

等价的 switch 语句是这样的:

switch (i) {
  case 20: alert("20");
    break;
  case 30: alert("30");
    break;
  case 40: alert("40");
    break;
  default: alert("other");
}

举例1:

  CSS部分

/* 医嘱:长嘱,临嘱,中医样式显示 Start*/
.yz_td1 {
    line-height: 28px;
    height: 28px;
    padding-left: 10px;
    width: 100px;
}
/*灰色背景色*/
.yz_td2 {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    width: 100px;
    color: #333;
    margin: 4px;
    background: #e7e9e6;
    border-radius: 6px;
    text-align: center;
}
/*绿色背景色*/
.yz_td3 {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    width: 100px;
    color: #fff;
    margin: 4px;
    background: #42b012;
    border-radius: 6px;
    text-align: center;
}
/* End 医嘱:长嘱,临嘱,中医嘱样式显示*/

  HTML部分

<table cellspacing="0" cellpadding="1" border="0" class="medical_table" width="100%" height="100%">
    <tbody>
        <tr>
            <td class="yz_td1">查看医嘱</td>
            <td width="100">
                <div class="yz_td3" onclick="ctrlYzTitle(‘yzOption1‘);" id="yzOption1">长嘱</div>
            </td>
            <td width="100">
                <div class="yz_td2" onclick="ctrlYzTitle(‘yzOption2‘);" id="yzOption2">临嘱</div>
            </td>
            <td width="100">
                <div class="yz_td2" onclick="ctrlYzTitle(‘yzOption4‘);" id="yzOption3">中医</div>
            </td>
            <td></td><!-- 空td不要删除 -->
        </tr>
    </tbody>
</table>

  JS部分

/**
 * 控制医嘱类型显示内容
 */
function ctrlYzTitle(senderId) {
    switch (senderId) {
        case ‘yzOption1‘:
            document.getElementById(‘yzOption1‘).className = ‘yz_td3‘;
            document.getElementById(‘yzOption2‘).className = ‘yz_td2‘;
            document.getElementById(‘yzOption3‘).className = ‘yz_td2‘;
            break;
        case ‘yzOption2‘:
            document.getElementById(‘yzOption2‘).className = ‘yz_td3‘;
            document.getElementById(‘yzOption1‘).className = ‘yz_td2‘;
            document.getElementById(‘yzOption3‘).className = ‘yz_td2‘;
            break;
        case ‘yzOption3‘:
            document.getElementById(‘yzOption3‘).className = ‘yz_td3‘;
            document.getElementById(‘yzOption1‘).className = ‘yz_td2‘;
            document.getElementById(‘yzOption2‘).className = ‘yz_td2‘;
            break;
        default:
            break;
    } 
}

  实现效果:选中变色

  效果展示:

技术分享

  举例2:巧用break特性

switch (panelId) {
    case ‘panel2‘:// 患者信息
    case ‘panel4‘:// 专家选择
        if(‘0‘ == panelStatus) return;    
    case ‘panel3‘:// 病历信息
        if(‘0‘ == panelStatus || ‘3‘ == panelStatus) return;    
}

二、ECMAScript 和 Java 中的 switch 语句

  ECMAScript 和 Java 中的 switch 语句有两点不同:

    在 ECMAScript 中,switch 语句可以用于字符串,而且能用不是常量的值。

   举例:

var BLUE = "blue", RED = "red", GREEN  = "green";

switch (sColor) {
  case BLUE: alert("Blue");
    break;
  case RED: alert("Red");
    break;
  case GREEN: alert("Green");
    break;
  default: alert("Other");
}

  解说:switch 语句用于字符串 sColor,声明 case 使用的是变量 BLUE、RED 和 GREEN,这在 ECMAScript 中是完全有效的。

 

 

switch语句

标签:进入   div   value   table   turn   radius   font   结果   ges   

原文地址:http://www.cnblogs.com/Marydon20170307/p/7158634.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!