预警事件模块分析与设计.pptx

《物联网Web前端开发基础》课程 预警事件模块分析与设计 【任务6-9】制作事件处理模块效果分析——结构分析“事件处理”模块主要由一个表格构成。另外，每一行的信息整体由tr标签定义。其中，表格标题由th标签定义，其余的每条事件信息由td定义。 效果分析——样式分析观察事件模块，需要为table设置边框，并使其在浏览器中居中对齐。另外，需要为tr设置背景色，并通过“text-align”属性设置文字居中对齐。另外，需要设置鼠标经过“已解决”按钮时，背景色改变。【任务6-9】制作事件处理模块 效果分析——JavaScript特效分析除标题行外的偶数行的单元格背景色为浅橙色，可以通过在CSS样式中定义一个类，并使用JavaScript脚本给对应的单元行添加类名实现。【任务6-9】制作事件处理模块 模块制作——搭建结构（部分主要代码） tr class=title th事件时间/th th发生次数/th th事件占比/th th比较/th th状态/th/tr【任务6-9】制作事件处理模块 模块制作——搭建结构（部分主要代码） tr td class=txt106:30/td td class=txt21453次/td td class=txt312.32%/td tdspan class=colors+22%/span/td tda href=# class=buy已解决/a/td /tr【任务6-9】制作事件处理模块 .table{ width:980px; border-collapse:collapse; margin:0 auto; border:1px solid #e8e8e8; font-size:14px; box-shadow:0px 0px 10px #3efbff; color:#fff;}.table tr{ height:90px; text-align:center; background-color:#ffe8c8; }.table .title{ background-color:#f8f8f8; height:30px; color:#999; font-size:16px;}模块制作——添加样式【任务6-9】制作事件处理模块 模块制作——添加样式.txt1,.colors{ font-size:24px; color:#ff7000;}.table .txt2{ width:120px; text-align:left; font-size:24px; color:#fff;}【任务6-9】制作事件处理模块 模块制作——添加样式.buy{ width:100px; height:30px; background:#ff7600; display:inline-block; line-height:30px; color:#fff;}.buy:link,.buy:visited{color:#fff;}.buy:hover{background:#ff9942;}【任务6-9】制作事件处理模块 模块制作——添加JS效果body onload=changeColor()（1）在HTML的body中添加JavaScript代码（2）定义偶数行单元格的CSS样式.table .even{background-color:#fff5e6;}【任务6-9】制作事件处理模块 模块制作——添加JS效果function changeColor(){ //获取所有行 var trs = document.getElementById(tbl).getElementsByTagName(tr); //为偶数行添加class属性，且不包括标题行 for(var i=2; itrs.length; i=i+2){ trs[i].className = even; }}【任务6-9】制作事件处理模块 模块制作——最终效果预警事件模块分析与设计 谢谢