JavaScript网页特效案例教程.ppt

JavaScript网页特效案例教程主编：王莹副主编：印梅齐燕第二章实现按钮点击事件教学导航2.1定义和调用无参函数1.任务分析本案例涉及到的知识点：无参函数的定义无参函数的调用按钮点击调用函数获得文本框的值相关知识知识点1：什么是函数函数实质上就是可以作为一个逻辑单元对待的一组相关JavaScript语句。知识点2：函数的定义语法：scriptlanguage=javascriptfunctionfunctionName(parameters){somestatements;}/scriptfunctionName：函数名称。parameters：参数名称。无参函数的参数为空。例1完整代码如下：scriptlanguage=javascriptfunctionprint(){alert(“hello”);//弹出对话框}/script知识点3：函数调用例2完整代码如下：htmlheadtitle函数的简单应用/titlescriptlanguage=javascriptfunctionprint(){alert(“hello”);}/script/headbodyscriptlanguage=javascriptprint();/script/body/html知识点3：按钮事件例3：点击按钮弹出Hello！效果如图2.3所示。例3完整代码如下：htmlxmlns==javascriptfunctionfunction1(){alert(hello!);}/scriptbodyinputtype=buttonname=Submitvalue=请点击我onclick=function1()//body/html图2.3例3运行效果知识点4：获得文本框的值一种是不添加表单，使用document.all.item(name)获得控件。但这种方法有兼容性问题存在。inputname=text1type=textvalue=hello/inputtype=buttonname=Submitvalue=显示文本框的值onclick=alert(document.all.item('text1').value)/另一种是添加表单，在表单内添加控件，然后用DOM方法来获得控件。类似于一层层的获得控件。DOM结构将在以后的章节具体介绍。formname=form1method=postaction=inputname=text1type=textvalue=hello/inputtype=buttonname=Submitvalue=显示文本框的值onClick=alert(document.form1.text1.value)//form练习实现如下特效，当按“”和“”实现中间文本框中广告的轮换。效果如图2.5所示。2.2定义和调用有参函数1.任务分析本案例涉及到的知识点：有参函数的定义有参函数的调用点击单选按钮调用函数2相关知识知识点1：有参函数的定义和调用此处的加号表示字符串的相连htmlheadtitle函数的简单应用/titlescriptlanguage=javascriptfunctionPrint(parameter1,parameter2,parameter3){alert(parameter1+parameter2+parameter3);}/script/headbodyscriptlanguage=javascriptPrint(“JavaScript网页特效案例教程”,”学习好帮手”,”专业工具书”);/script/body/html此处的加号表示字符串的相连知识点2：单选按钮点击事件选择单选按钮的事件也是onclick事件。调用函数的方法同按钮的onclick事件。3操作步骤4操作练习2.3超链接当按钮使用做一个改变背景颜色的效果，如图2.10所示：本案例涉及到的知识点：超链接的使用点击超链接调用函数document.bgcolor的使用2相关知识知识点1：超链接当按钮使用知识点2：document.bgcolor3.操作步骤4.操作练习2.4JavaScript内置函数完成购物车的计算功能，运行效果如图2.13所示。图2.13购物车计算功能本案例涉及到的知识点：JavaScript的一些常见内置函数1.任务分析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】判断闰年。点击超链接判断文本框中的年份是否为闰年。