12-DOM相关案例

12-关于DOM操作的相关案例

 

1.模态框案例

需求：

 打开网页时有一个普通的按钮，点击当前按钮显示一个背景图，中心并弹出一个弹出框，点击X的时候会关闭当前的模态框

代码如下：

    
        
        
        
    
    
        弹出
    
    

2.简易留言板

需求：

当在textarea中输入内容，点击留言按钮，会添加到浏览器中

图如下：

代码如下：

    
        
        
        
    
    
        
简易留言板
        

            
            
        
        
        
        统计
    
    

 

3.使用js模拟选择器中hover

    
    
    


按钮1
按钮2
按钮3
按钮4
按钮5

代码解释：

鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current，就可以达到变色的效果。核心代码是：

            //排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
            //排他思想和for循环连用
            for(var j=0;j 
    
 
      
    
 
   

4.tab栏选项卡

代码如下：

    
        
        
        
    
    
        

            

                

                    首页
                
                

                    新闻
                
                

                    图片
                
        
            
            
首页内容
            
新闻内容
            
图片内容
            
            
        
    
    

 5、购物车案例

代码如下：

    
    
    


    

        
我的购物车
        

    
    

 

 

 

作者：流浪者

日期：2019-09-06