JavaScript网页特效案例教程.ppt

JavaScript网页特效案例教程 主编 王莹副主编 印梅齐燕 第二章实现按钮点击事件 教学导航 2 1定义和调用无参函数 任务分析 本案例涉及到的知识点 无参函数的定义无参函数的调用按钮点击调用函数获得文本框的值 相关知识 知识点1 什么是函数 函数实质上就是可以作为一个逻辑单元对待的一组相关JavaScript语句 知识点2 函数的定义 语法 functionfunctionName parameters somestatements functionName 函数名称 parameters 参数名称 无参函数的参数为空 例1完整代码如下 知识点3 函数调用 例2完整代码如下 知识点3 按钮事件 例3 点击按钮弹出Hello 效果如图2 3所示 例3完整代码如下 图2 3例3运行效果 知识点4 获得文本框的值 一种是不添加表单 使用document all item name 获得控件 但这种方法有兼容性问题存在 另一种是添加表单 在表单内添加控件 然后用DOM方法来获得控件 类似于一层层的获得控件 DOM结构将在以后的章节具体介绍 练习 实现如下特效 当按 实现中间文本框中广告的轮换 效果如图2 5所示 2 2定义和调用有参函数 任务分析 本案例涉及到的知识点 有参函数的定义有参函数的调用点击单选按钮调用函数 2相关知识 知识点1 有参函数的定义和调用 此处的加号表示字符串的相连 此处的加号表示字符串的相连 知识点2 单选按钮点击事件 选择单选按钮的事件也是onclick事件 调用函数的方法同按钮的onclick事件 3操作步骤 4操作练习 2 3超链接当按钮使用 做一个改变背景颜色的效果 如图2 10所示 本案例涉及到的知识点 超链接的使用点击超链接调用函数document bgcolor的使用 2相关知识 知识点1 超链接当按钮使用 知识点2 document bgcolor 3 操作步骤 4 操作练习 2 4JavaScript内置函数 完成购物车的计算功能 运行效果如图2 13所示 图2 13购物车计算功能本案例涉及到的知识点 JavaScript的一些常见内置函数 任务分析 2相关知识 知识点1 parseInt 函数 语法 parseInt StringNum n StringNum 需要转换为整型的字符串 n 提供在2 36之间的数字表示所保存数字的进制数 这个参数在函数中不是必须的 知识点2 parseFloat 函数 语法 parseFloat StringNum StringNum 需要转换为浮点型的字符串 知识点3 isNaN 函数 isNaN Num Num 需要验证的数字 如果参数Num为NaN 函数返回值为true 如果参数Num不是NaN 函数返回值为false 知识点4 isFinite 函数 语法 isFinite Num Num 需要验证的数字 如果参数Num为无穷大 函数返回值为true 如果参数Num不为无穷大 函数返回值为false 3操作步骤 4操作练习 2 5其他典型案例 案例1 编写一个圆周长 圆面积的计算器 如图2 15所示 案例2 实现一个四则计算器 如图2 16所示 案例3 编写个人所得税计算器 月收入所得税计算的方式 月收入 起征额 所得税率 收入多出起征额1000以内 税率为0 05 1000到3000为0 1 以上为0 5 如果输入非数字 弹出错误提示 否则给出结果 案例4 判断闰年 点击超链接判断文本框中的年份是否为闰年