网页样式制作（拓展）第13章综合运用HTML5+CSS3技巧制作门户网站页面HTML5制作统计功能的页面.docxVIP

HTML5制作统计功能的页面 1.目的 通过结合Javascript制作调查统计的网页，使学生掌握progress标签与meter标签，了解HTML5结合Javascript进行WEB开发的简单做法。 2.内容 在网页中单击“统计”按钮显示统计进度，单击“查看网友评分”按钮，显示评分结果。如图11-5所示。 图11-5拓展练习11效果 3.步骤 (1) 创建页面rw11.html，输入宋词《念奴娇·赤壁怀古》； (2) 使用progress标签建立统计进度，插入“统计”按钮，单击此按钮，执行Btn_Click1()； 单击统计网友喜欢度： input type=button value=统计 onClick=Btn_Click1(); / br/br/ span id=bt1统计进度（喜欢度）：/span progress id=objprogress min=0 max=10 value=8正在统计。。/progress Btn_Click1()；的功能是将id=bt1的容器内容改为“正在统计”，并显示统计进度，其JS代码如下： var intValue=0; var intTimer; var objPro=document.getElementById(objprogress); var objTip=document.getElementById(bt1); //定时事件 function Interval_handler(){ intValue++; objPro.value=intValue; if(intValue=objPro.max){ clearInterval(intTimer); objTip.innerHTML=统计完成：; objPro.value=8; } else{ objTip.innerHTML=正在统计 + intValue +%; } } //下载按钮单击事件 function Btn_Click1(){ intTimer=setInterval(Interval_handler,1000); } (3) 使用meter标签建立查看评分，插入“查看网友评分”按钮，单击此按钮，执行Btn_Click2()； input type=button value=查看网友评分 onClick=Btn_Click2(); / br/br/ span id=bt2 style=display:none; 流星剑: meter value=6 min=0 max=10 low=6 high=8 title=10分 optimum=106/meterbr/ 章卉卉: meter value=8 min=0 max=10 low=6 high=8 title=8分 optimum=108/meterbr/ 海龟: meter value=5 min=0 max=10 low=6 high=8 title=4分 optimum=105/meterbr/ /span Btn_Click2()；的功能是将id=bt2的容器由原来的不显示改为显示，其JS代码如下： function Btn_Click2() { document.getElementById(bt2).style.display = block; } 实践项目 1、按图11-6组织网站，其中文件夹images用于存放图片，ztlx11用于存放拓展练习11网页； 图11-6实践项目11网站结构 2、制作首页index.html，标题用“姓名，学号实践项目11”。在网页中插入两个颜色线性渐变的矩形，插入链接分别在新窗口打开任务十一:rw11.html,拓展练习11：tzlx11.html。效果见图11-7。 3、制作颜色线性渐变的矩形的JS代码如下： script function draw(id) { var context = document.getElementById(canvas).getContext(2d); var lingrad = context.createLinearGradient(0,0,0,150); lingrad.addColorStop(0, green); lingrad.addColorStop(1, yellow); context.fillStyle = lingrad; context.fillRect(10,10,130,130); } /script 图11-7实践项目11效果 习题 1.说出在HTML5中绘制图形的一般流程。 2.在一块400px*200px的画布中绘制斜线格子，应如何制作