JavaScript经典应用案例

########JavaScript#######

 

 

 

## JS注册表单的校验雏形

 

    
    
    




    
    用户名:

    密码:

    

 

 

 

## 注册表单校验用户名是否为空

 

    
    
    



    用户名:

    密码:

    

 

## 注意：

在JS里 ‘==’ // 两个等号做比较时， 会将字符串转换为整形进行比较; ' === ' 作比较时不同数据类型不能做比较

 

 

 

 

## 轮播图

 

## 实现图片的切换

 

分析：
    1. 确定事件类型为onclick事件；
    2. 并跟对应的函数changeImg绑定在一起；
    3. 实现函数功能；
      当点击下一页按钮之后， 修改img标签里面的src属性内容;

 

 

## 实现图片的轮播

## 每隔1s自动执行某一个函数
            setInterval('changeImg()', 1000);

 

Tips:

## 外部引入CSS样式与JS

Js的引入方式:
        - 内部引入: 直接在head标签里面的

执行代码:

 

 

## 定时弹出广告
 

目标:
    实现网页定时弹出广告， 并定时取消弹出的广告;

步骤:
    1. 在页面设置一个隐藏的图片; style="display: none"
    2. 确定事件类型为onload， 为其绑定一个函数;
    3. 设置定时执行显示图片的函数showAd();
    4. 编写定时任务里面的函数showAd()----
            - 获取标签的样式display=‘block’;
            - 清除显示广告的定时任务;
            - 编写隐藏广告图片的定时任务;

    5. 实现定时任务里面的函数hiddenAd();
        - 获取标签的样式display=‘none’;
        - 清除隐藏广告的定时任务;

 

 

 

 

## _用户注册

 

注意：

    1). 确定事件类型(onfocus-聚焦事件)， 并为其绑定一个函数;
    2). 确定事件类型(onblur-离焦事件)， 并为其绑定一个函数;

 

 

 

 

 

## _表格的全选和全部选

 

需求:
    实现批量选中和批量不选中

步骤分析:
    1). 确定事件类型:鼠标单击单选按钮时(onclick事件)， 绑定一个函数；
    2). 编写函数checkAll()
 

    
    
    



    

        
        
    
    

        
全选
        
编号
        
姓名
        
性别
        
年龄
    
    

        

        
1
        
kobe
        
male
        
40
    
    

        

        
2
        
james
        
male
        
34
    
    

        

        
3
        
curry
        
male
        
30
    
    

        

        
4
        
durant
        
male
        
29
    
    

        

        
5
        
hardan
        
male
        
28
    

 

 

 

 

#######################################