js显示屏特效火车站高铁站列车时刻表切换特效.rar资源-CSDN文库

共2个文件

js：1个

html：1个

需积分: 50 37 浏览量 2020-04-12 11:14:04 上传评论收藏 33KB RAR 举报

《JS实现显示屏特效：火车站高铁站列车时刻表切换特效详解》在网页设计与开发中，动态效果常常能提升用户体验，使网站或应用更具吸引力。本教程将详细讲解如何使用JavaScript（JS）来创建一种独特的显示屏特效，模拟火车站或高铁站的列车时刻表切换效果。这个特效不仅能够展示列车时刻表信息，还能模拟数据库动态读取数据并随机滚动显示，为用户带来更加真实的交互体验。我们需要理解基础的HTML结构。在项目中，`ttt.html`文件应该是主页面，它将包含用于展示时刻表的HTML元素。通常，我们可以创建一个表格（`<table>`）或者使用列表（`<ul>`，`<li>`）来展示列车信息，如车次、始发站、终点站、发车时间等。接下来，我们引入了jQuery库，这是JavaScript的一个强大框架，简化了许多DOM操作。`jquery-1.11.0.min.js`是jQuery的压缩版本，通过`<script>`标签链接到HTML文件中，确保在执行JS代码时可以使用jQuery的功能。在JS代码中，我们首先需要获取HTML中的列车时刻表元素，并动态填充数据。这里的数据可以从模拟的数组中获取，也可以模拟数据库查询的结果。例如： ```javascript var trainData = [ {trainNo: 'G123', from: '北京', to: '上海', time: '08:00'}, // 更多列车数据... ]; // 使用jQuery选择器获取元素 var table = $('#trainTable'); // 遍历数据并填充到表格中 for (var i = 0; i < trainData.length; i++) { var row = $('<tr>'); row.append($('<td>').text(trainData[i].trainNo)); row.append($('<td>').text(trainData[i].from)); row.append($('<td>').text(trainData[i].to)); row.append($('<td>').text(trainData[i].time)); table.append(row); } ``` 为了实现随机滚动显示的效果，我们可以使用定时器（`setInterval`）每隔一段时间更新表格内容，使其看起来像实时更新。同时，可以使用CSS动画或者jQuery的滑动效果来增加视觉冲击力： ```javascript function updateTrainSchedule() { // 随机选取一个列车数据 var randomIndex = Math.floor(Math.random() * trainData.length); var data = trainData[randomIndex]; // 更新表格数据 $('#trainTable tr').eq(0).find('td').eq(1).text(data.from); // 更新其他列... // 添加滑动动画 $('#trainTable').slideUp(500, function() { $(this).slideDown(500); }); } // 每隔5秒更新一次 setInterval(updateTrainSchedule, 5000); ``` 以上代码仅为示例，实际项目中可能需要根据具体需求进行调整，例如添加更复杂的动画效果，优化数据加载方式，或者与其他后端服务进行交互等。通过JavaScript和jQuery，我们可以轻松地实现这种火车站高铁站列车时刻表的切换特效，为用户呈现一个生动、真实的在线列车时刻查询体验。

资源推荐

资源详情

资源评论

收起资源包目录

js显示屏特效火车站高铁站列车时刻表切换特效.rar （2个子文件）

jquery-1.11.0.min.js 94KB

ttt.html 6KB

<!DOCTYPE html> <html> <head> <title>FLAPPER</title> <link href="css/flapper2.css" type="text/css" rel="stylesheet" /> <script src="jquery-1.11.0.min.js"></script> <script src="src/jquery.transform-0.9.3.min.js"></script> <script src="src/jquery.flapper2.js"></script> <script language="javascript"> $(document).ready(function() { setTimeout(function(){ var toggle = false; GetList(GetData(0)) var totcout=3; var page=0; setInterval(function(){ page = Math.floor(Math.random() *3); if (toggle) { GetList(GetData(page)) } else { GetList(GetData(page)) } toggle = !toggle; }, 5000); }, 1000); }); function GetData(i) { var per=[ {"id":1,"bus":"G2345","station":"广州南1","time":"11：23","enter":"A入口/B入口","status":"正点"}, {"id":2,"bus":"G1345","station":"上海南","time":"11：43","enter":"A入口/B入口","status":"正点"}, {"id":3,"bus":"G1345","station":"济南","time":"11：13","enter":"A入口/B入口","status":"正点"}, {"id":4,"bus":"G1345","station":"南昌东","time":"11：23","enter":"A入口/B入口","status":"晚点"}, {"id":5,"bus":"G1345","station":"广州东","time":"11：53","enter":"A入口/B入口","status":"晚点"}, {"id":6,"bus":"G1345","station":"深圳","time":"11：33","enter":"A入口/B入口","status":"正点"} ]; var per2=[ {"id":1,"bus":"G2545","station":"广州东2","time":"10：23","enter":"A入口/B入口","status":"晚点"}, {"id":2,"bus":"G4345","station":"上海","time":"11：43","enter":"A入口/B入口","status":"正点"}, {"id":3,"bus":"G3345","station":"济南东","time":"11：13","enter":"A入口/B入口","status":"正点"}, {"id":4,"bus":"G6345","station":"南昌","time":"11：23","enter":"A入口/B入口","status":"正点"}, {"id":5,"bus":"G8345","station":"广州","time":"11：53","enter":"A入口/B入口","status":"正点"}, {"id":6,"bus":"G9345","station":"深圳东","time":"11：33","enter":"A入口/B入口","status":"正点"} ]; var per3=[ {"id":1,"bus":"G0545","station":"济南东3","time":"10：23","enter":"A入口/B入口","status":"晚点"}, {"id":2,"bus":"G345","station":"上海","time":"13：43","enter":"A入口/B入口","status":"正点"}, {"id":3,"bus":"G385","station":"南昌东","time":"14：13","enter":"A入口/B入口","status":"正点"} ]; if(i==0) return per; else if(i==1) return per2; else return per3; } </script> <style type="text/css"> html, body { margin: 0px; padding: 0px; overflow-x: hidden; background-color: white; font-family: Helvetica, Arial, sans-serif; color:#FFFFFF; } td{ height:30px} </style> </head> <body> <table width="100%" align="center" cellpadding="10" cellspacing="5" border="0" bgcolor="#0000FF"> <thead> <tr bgcolor="#3c67f5"> <td align="center">车次</td> <td align="center">终点站</td> <td align="center">到点</td> <td align="center">入站口</td> <td align="center">状态</td> </tr> </thead> <tbody id="tbMain"></tbody> </table> <script> function GetList(per) { $("#tbMain").html("") var tbody = document.getElementById('tbMain'); for(var i = 0;i < per.length; i++){ var trow = getDataRow(per[i],true); tbody.appendChild(trow); } if(per.length<6) { for(var i = 0;i < 6-per.length; i++){ var trow = getDataRow(per[i],false); tbody.appendChild(trow); } } } function getDataRow(h,empty){ var row = document.createElement('tr'); //创建行 row.setAttribute('bgcolor','#3c67f5') var idCell = document.createElement('td'); idCell.innerHTML = empty?h.id:""; // row.appendChild(idCell); var busCell = document.createElement('td'); busCell.innerHTML = empty?h.bus:""; busCell.setAttribute('align','center'); row.appendChild(busCell); var stationCell = document.createElement('td'); stationCell.innerHTML = empty?h.station:""; stationCell.setAttribute('align','center'); row.appendChild(stationCell); var timeCell = document.createElement('td'); timeCell.innerHTML = empty?h.time:""; timeCell.setAttribute('align','center'); row.appendChild(timeCell); var enterCell = document.createElement('td'); enterCell.innerHTML = empty?h.enter:""; enterCell.setAttribute('align','center'); row.appendChild(enterCell); var statusCell = document.createElement('td'); statusCell.innerHTML =empty? h.status:""; statusCell.setAttribute('align','center'); row.appendChild(statusCell); return row; //返回tr数据 } </script> </div> </body> </html>

评论收藏

内容反馈