JavaScript网页特效案例教程.ppt

JavaScript网页特效案例教程,主编：王莹 副主编：印梅 齐燕,第二章 实现按钮点击事件,教学导航,2.1定义和调用无参函数,任务分析,本案例涉及到的知识点： 无参函数的定义 无参函数的调用 按钮点击调用函数 获得文本框的值,相关知识,知识点1：什么是函数,函数实质上就是可以作为一个逻辑单元对待的一组相关JavaScript语句。,知识点2：函数的定义,语法： function functionName(parameters) some statements; 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.4 JavaScript内置函数,完成购物车的计算功能，运行效果如图2.13所示。,图2.13购物车计算功能 本案例涉及到的知识点： JavaScript的一些常见内置函数,任务分析,2相关知识,知识点1：parseInt()函数,语法： parseInt(StringNum,n) StringNum：需要转换为整型的字符串。 n：提供在236之间的数字表示所保存数字的进制数。这个参数在函数中 不是必须的。,知识点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