实训18JavaScript综合实例.doc

实训十八 JavaScript综合实例 课时：3 班级：12计算机班 实训日期：2013-5-28 编写时期：2013-5-22 一、实训目的 1、掌握使用JavaScript的时间函数制作简单的时钟 2、掌握跑马灯效果的实现方法 3、掌握使用JavaScript实现客户端换头像的方法 二、实训环境 Dreamweaver 三、实教学方法“演示、、练”相结合：实 script var now=new Date() document.write(现在是+now.getYear()+年+(now.getMonth()+1)+月+now.getDate()+日+now.getHours()+时+now.getMinutes()+分+now.getSeconds()+秒) /script (2)让页面每秒刷新一次 在head/head中加入如下代码: meta http-equiv=refresh content=1 / 2、实现跑马灯效果 在body/body中入如下代码: script var message=欢迎光临我的个人主页......; var loc=0; function pmd() { len=message.length; window.status=message.substring(0,loc); loc++; if(loclen)loc=0; window.setTimeout(pmd();,300); } pmd(); /script 3、使用JavaScript实现头像变换 (1)、找到8个头像图片文件(gif或jpg)，命名为:1.jpg—8.jpg.存放在face文件夹中。 (2)、新建一个基本页，插入一个表单，在表单中插入一个列表框，命名为“txSelect”，增加8个选项，格式如下： option value=“1”头像1/option； … (3)、在表单中插入图像“1.jpg”，并命名为“tx”。 (4)、在列表框中添加onChange事件 onchange=htx() (5)、在head/head中写htx()函数 script function htx() { document.form1.tx.src=face/+document.form1.txSelect.value+.jpg; } /script 完整代码如下： html head title使用JavaScript实现头像变换/title script function htx() { document.form1.tx.src=face/+document.form1.txSelect.value+.jpg; } /script /head body form id=form1 name=form1 method=post action= label div align=center请选择你的头像： select id=txSelect name=txSelect onchange=htx() option value=1头像1/option option value=2头像2/option option value=3头像3/option option value=4头像4/option option value=5头像5/option option value=6头像6/option option value=7头像7/option option value=8头像8/option /select img src=face/1.JPG width=48 height=48 name=tx id=tx//div /label /form /body /html 六、实训结果提交与成绩评定 1、提交有简单的时钟的网页 2、提交跑马灯效果的网页 3、提交有换头像功能的网页