前端学习day03-js高级

    
    
    
    
    


    

        

            

            1、练习一:验证密码
            ①密码长度必须是6位的任意字符
            ②当鼠标离开文本输入框的时候就会触发的事件，所以我们需要在密码的input标签中添加一个离焦事件onblur,用来验证密码是否合法。  
            
            

                输入密码:
            
        
        

            

                练习二:表格隔行换色，能够使用js实现表格隔行换色功能。
            
            
点击换色
            

                

                    

                        

                            

                                序号
                            
                            

                                名称
                            
                            

                                状态
                            
    
                        
                    
                    

                        

                            

                                序号
                            
                            

                                名称
                            
                            

                                状态
                            
  
                        
                        

                            

                                序号
                            
                            

                                名称
                            
                            

                                状态
                            
  
                        
                        

                            

                                序号
                            
                            

                                名称
                            
                            

                                状态
                            
  
                        
                    
                
            
        
        

            

                练习三:日期
                ①使用Date对象，在页面回显当前年月日时分秒星期
            
            


            
        
    

.flex1{
    display: flex;
    flex-direction: column;
}
.flex1-1{
    display: flex;
    flex-direction: column;
    background-color: hotpink;
    height: 100px;
    width: 100%;
}

.flex1-2{
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 100%;
}

.flex1-3{
    display: flex;
    flex-direction: column;
    background-color: hotpink;
    height: 200px;
    width: 100%;
}
.flex1-2-1{
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    background-color: lightblue;
}
table{
    height: 200px;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    }
    
table,table tr td {
    border:1px solid #ccc;
    height: 70px;
    
}
    
table tr td{

padding: 5px 10px;

}
.selected1 {
    background-color: red;    
}
.selected2 {
    background-color: blue;    
}