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 文件

你可能感兴趣的:(JavaScript的应用)