预警事件模块分析与设计_第1页
预警事件模块分析与设计_第2页
预警事件模块分析与设计_第3页
预警事件模块分析与设计_第4页
预警事件模块分析与设计_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《物联网Web前端开发基础》课程

预警事件模块分析与设计【任务6-9】制作事件处理模块效果分析——结构分析“事件处理”模块主要由一个表格构成。另外，每一行的信息整体由<tr>标签定义。其中，表格标题由<th>标签定义，其余的每条事件信息由<td>定义。效果分析——样式分析观察事件模块，需要为<table>设置边框，并使其在浏览器中居中对齐。另外，需要为<tr>设置背景色，并通过“text-align”属性设置文字居中对齐。另外，需要设置鼠标经过“已解决”按钮时，背景色改变。【任务6-9】制作事件处理模块效果分析——JavaScript特效分析除标题行外的偶数行的单元格背景色为浅橙色，可以通过在CSS样式中定义一个类，并使用JavaScript脚本给对应的单元行添加类名实现。【任务6-9】制作事件处理模块模块制作——搭建结构（部分主要代码）<trclass="title"> <th>事件时间</th> <th>发生次数</th> <th>事件占比</th> <th>比较</th> <th>状态</th></tr>【任务6-9】制作事件处理模块模块制作——搭建结构（部分主要代码）<tr><tdclass="txt1">06:30</td><tdclass="txt2">1453次</td><tdclass="txt3">12.32%</td><td><spanclass="colors">+22%</span></td><td><ahref="#"class="buy">已解决</a></td></tr>【任务6-9】制作事件处理模块.table{ width:980px; border-collapse:collapse; margin:0auto; border:1pxsolid#e8e8e8; font-size:14px;box-shadow:0px0px10px#3efbff; color:#fff;}.tabletr{ 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效果<bodyonload="changeColor()">（1）在HTML的<body>中添加JavaScript代码（2）定义偶数行单元格的CSS样式.table.even{background-color:#fff5e6;}【任务6-9】制作事件处理模块模块制作——添加JS效果functionchangeColor(){ //获取所有行

vartrs=document.getElementById("tbl").getElementsByTagName("tr"); //为偶数行添加class属性，且不包括标题行

for(vari=2;i<

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论