JavaScript的应用

javascript的应用

校验表单

一、步骤分析

1. 第一步： 确定事件(onsubmit)并为其绑定一个函数
2. 第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)
3. 第三步： 对用户输入的数据进行判断
4. 第四步： 数据合法(让表单提交)
5. 第五步：数据非法(给出错误提示信息， 不让表单提交)

问题： 如何控制表单提交？

关于事件 onsubmit： 一般用于表单提交的位置，那么需要在定义函数的时候给出一个
返回值。

onsubmit = return checkForm()

二、代码实现

    
        
        
        
    
    
        

            
            

                

                    
                    

                        

                            

                                ![](../img/logo2.png)
                            
                            

                                ![](../img/header.png)
                            
                            

                                登录
                                注册
                                购物车
                            
                        
                    
                
               
            
            
            

                

                        
                    
                        首页
                         
                    
                        手机数码
                        
                    
                        电脑办公
                        
                    
                        鞋靴箱包
                        
                    
                        家用电器
                    
                
            
            
            

                

                    
                    

                        

                            

                                

                                    会员注册    USER REGISTER 
                                
                            
                            

                                

                                    用户名
                                
                                

                                    
                                
                            
                            

                                

                                    密码
                                
                                

                                    
                                
                            
                            

                                

                                    确认密码
                                
                                

                                    
                                
                            
                            

                                

                                    Emaile
                                
                                

                                    
                                
                            
                            

                                

                                    姓名
                                
                                

                                    
                                
                            
                            

                                

                                    性别
                                
                                

                                    男
                                    女
                                
                            
                            

                                

                                    出生日期
                                
                                

                                    
                                
                            
                            

                                

                                    验证码
                                
                                

                                    
                                    ![](../img/yanzhengma.png)
                                
                            
                            

                                

                                    
                                
                            
                        
                    
                
               
            
            
            

                

                    ![](../img/footer.jpg)
                
            
            
            

                

                    关于我们
                    联系我们
                    招贤纳士
                    法律声明
                    友情链接
                    支付方式
                    配送方式
                    服务声明
                    广告声明
                    

                        Copyright © 2005-2016 版权所有 
                    
                
            
        
    

JS代码：

HTML部分：

需要在指定位置添加 id

使用 JS 完成首页轮播图效果案例

一、技术分析：

• 获取元素 document.getElementById(“id 名称”)
• 事件(onload)
• 定时操作： setInterval(“changeImg()”,3000);

二、步骤分析：

1. 第一步： 确定事件(onload)并为其绑定一个函数
2. 第二步：书写绑定的这个函数
3. 第三步： 书写定时任务(setInterval)
4. 第四步： 书写定时任务里面的函数
5. 第五步： 通过变量的方式， 进行循环(获取轮播图的位置，并设置 src 属性)（在循环的时候需要注意到了最后一张图片的时候要重置。）

三、代码实现：

图片切换：

    
        
        
        
        
    
    
        

            
            ![](../../img/1.jpg)
        
    

javascript代码：

三、使用 JS 完成页面定时弹出广告

1.需求分析

我们希望在首页中的顶部做一个定时弹出广告图片。

2.技术分析

• 获取图片的位置(document.getElementById(“”))
• 隐藏图片： display： none
• 定时操作： setInterval(“显示图片的函数”， 3000);

3.步骤分析

• 第一步： 在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
• 第二步： 确定事件(onload)并为其绑定一个函数
• 第三步： 书写这个函数(设置一个显示图片的定时操作)
• 第四步： 书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
• 第五步： 清除显示图片的定时操作()
• 第六步： 书写隐藏图片的定时操作
• 第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
• 第八步： 清除隐藏图片的定时操作()

4.代码实现

html代码：

    
    ![](../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg)

总结

javascript 的引入方式

• 内部引入方式：

  直接将 javascript 代码写到

• 外部引入方式：

  需要创建一个.js文件，在里面书写 javascript代码，然后在 html文件中通过 script标签的 src 属性引入该外部的 js 文件