CSS--流程控制

选择结构

1,if语句

1,if(条件表达式){
	条件成立时执行
}

2,if-else语句
if(条件){
	条件成立时执行
}else{
	条件不成立时执行
}

3,多重分支if-else if
if(条件1){
	条件1成立时执行
}else if(条件2){
	条件2成立时执行
}
...
else{
	条件n不成立时执行
}

2,switch语句

switch(变量){
	 case 值1:
	 	变量与值1匹配全等之后执行的代码段
	 	break;//结束匹配
	 case 值2:
	 	匹配全等后执行
	 	break;
	 ...
	 default:
	    所有case都不匹配才执行的默认操作
	    break;
	 }
    <script>
        // 练习:接收用户收入的年月日,判断当日是该年的第几天?
        var year=prompt("请输入年份:");
        var month=prompt("请输入月份:");
        var day=prompt("请输入日期:");
        var sum=0;
        var isrunnian=year%4==0&&year%100!=0||year%400==0;

        switch(month-1){
            // month-1的结果为number值
            case 11:
                sum+=30;
            case 10:
                sum+=31;
            case 9:
                sum+=30;
            case 8:
                sum+=31;
            case 7:
                sum+=31;
            case 6:
                sum+=30;
            case 5:
                sum+=31;
            case 4:
                sum+=30;
            case 3:
                sum+=31;
            case 2:
                sum+=28;
            case 1:
                sum+=31;
        }
        day=Number(day);
        sum+=day;
        if(isrunnian && month>2){
            // sum+=1;
            sum++;
        }
        console.log(year,month,day,"总天数为:",sum);

    </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<body>[removed][removed] <div class='progress'>   <div class='progress_inner'>     <div class='progress_inner__step'>       <label for='step-1'>Start order</label>     </div>     <div class='progress_inner__step'>       <label for='step-2'>Prepare gift</label>     </div>     <div class='progress_inner__step'>       <label for='step-3'>Pack gift</label>     </div>     <div class='progress_inner__step'>       <label for='step-4'>Decorate box</label>     </div>     <div class='progress_inner__step'>       <label for='step-5'>Send gift</label>     </div>     <input checked='checked' id='step-1' name='step' type='radio'>     <input id='step-2' name='step' type='radio'>     <input id='step-3' name='step' type='radio'>     <input id='step-4' name='step' type='radio'>     <input id='step-5' name='step' type='radio'>     <div class='progress_inner__bar'></div>     <div class='progress_inner__bar--set'></div>     <div class='progress_inner__tabs'>       <div class='tab tab-0'>         <h1>Start order</h1>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>       </div>       <div class='tab tab-1'>         <h1>Prepare gift</h1>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>       </div>       <div class='tab tab-2'>         <h1>Pack gift</h1>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>       </div>       <div class='tab tab-3'>         <h1>Decorate box</h1>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>       </div>       <div class='tab tab-4'>         <h1>Send gift</h1>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>       </div>     </div>     <div class='progress_inner__status'>       <div class='box_base'></div>       <div class='box_lid'></div>       <div class='box_ribbon'></div>       <div class='box_bow'>         <div class='box_bow__left'></div>         <div class='box_bow__right'></div>       </div>       <div class='box_item'></div>       <div class='box_tag'></div>       <div class='box_string'></div>     </div>   </div> </div> <div 0; font:normal 14px/24px 'MicroSoft YaHei';">  </div> </body> CSS3步骤流程查看动画特效是一款分为5个步骤的查看商品订单流程代码,简洁又好看,推荐下载。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值