会议室的安排（会议数据库信息在jsp中显示，会议信息实现自动滚动）

最新推荐文章于 2023-08-10 10:51:03 发布

weixin_34176694

最新推荐文章于 2023-08-10 10:51:03 发布

阅读量161

点赞数

文章标签：数据库 java javascript ViewUI

原文链接：http://www.cnblogs.com/huanght/p/5732860.html

版权

刚走上Java的道路，希望和每个大神一起交流学习！今天因为一个项目就个人实现了一个小型的自动滚动界面。具体的内容如下：

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <%@ page import="java.sql.*" %>
 4 <% 
 5 //获取数据库的地址，端口号，数据库名，用户名，密码还有使用的编码
 6 String url = "jdbc:mysql://localhost:3306/test?user=root&password=123456&useUnicode=true&characterEncoding=UTF8";
 7 
 8     Class.forName("com.mysql.jdbc.Driver");//加载数据库驱动
 9     Connection conn = DriverManager.getConnection(url);//连接数据库
10     Statement st = conn.createStatement();//使用Statement对象获取sql语句
11     String sql = "select * from meeting1";
12     ResultSet rs = st.executeQuery(sql);//调用sql语句执行statement.executeQuery查询
13 
14 %>
15 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
16 <html>  
17 <head>  
18 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
19 <title>会议室的安排（会议数据库信息在jsp中显示，会议信息实现自动滚动）</title> 
20 <style type="text/css">
21 
22 .showdiv{
23 height: 400px;
24 width: 300px;
25 overflow-y:scroll;
26 background-color: #FFFFFF;
27 position: absolute;
28 }
29 
30 .biaoti{
31 position: absolute;
32 margin-top:0;
33 margin-left: 20px;
34 }
35 
36 .biaoshi{
37 margin-left: 20px;
38 margin-top: 30px;
39 line-height: 0px;
40 }
41 </style> 
42 </head>  
43   
44 <body>  
45 <div id="show" class="showdiv">
46 
47 <h3 class="biaoti">会议室安排</h3>
48     
49     <% while(rs.next()){    /* ResultSet 对象具有指向其当前数据行的光标。最初，光标被置于第一行之前。next 方法将光标移动到下一行；因为该方法在 ResultSet 对象没有下一行时返回 false，所以可以在 while 循环中使用它来迭代结果集*/
50                            /*光标向前移动一位后，发现这个位置有对象，那么rs.next 就返回true，否则返回false*/
51                            /*ResultSet  中获取数据有两种方式，一种是通过列序号getString(1)，一种通过字段名getString("name")两种方式，都可以通过getString 来通用的取数据 */
52                            /* next 相当于指针 ，它的起始位置是在结果集的第一条数据之前的，而不是正指着第一条数据本身 ，循环条件下执行一次后 才指向第一条数据 ，同理 当指到最后一条数据再执行一次后 它的位置是最后一条数据的下方 ,next()相当于指针一样，每读取一条，它就会自动向下移动*/%>
53     
54     <p class="biaoshi">主题：<span id="theme"><% out.print(rs.getObject("theme")); %></span> </p>
55     <p class="biaoshi">日期：<span id="dates"><% out.print(rs.getObject("dates")); %></span> </p>
56     <p class="biaoshi">时间：<span id="times"><% out.print(rs.getObject("times")); %></span> </p>
57     <p class="biaoshi">会议室：<span id="boardroom"><% out.print(rs.getObject("boardroom")); %></span> </p>
58     <p class="biaoshi">联系人：<span id="contacts"><% out.print(rs.getObject("contacts")); %></span> </p>
59     <p class="biaoshi">使用部门：<span id="department"><% out.print(rs.getObject("department")); %></span> </p>
60     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
61     <%} %>
62     <%
63     conn.close();//释放connection的资源
64     rs.close();//释放ResultSet的资源
65     st.close();//释放Statement的资源
66     %>
67     
68     
69 </div>
70 
71 </body> 
72 <script type="text/javascript" src="js/meeting.js"></script>
73 </html>

以上是一个显示的jsp 里面包含的只是简单的div和<p>等标签！其实现阶段我也只是能在jsp直接和数据库做连接，对于其他方案还需大神们做出指导。因为我个人完全是还不知道其他方案呢。

最后就是一个自动滚动的js，代码如下：

 1 /*函数startmarquee的参数：
 2  1h:文字一次滚动的距离或高度
 3  speed:滚动的速度
 4  delay:滚动停顿的时间间隔
 5  */
 6 function startmarquee(lh, speed, delay) { 
 7         var t;
 8         var p = false;
 9         var oHeight = 400;//div的高度　  
10         var o = document.getElementById("show"); //获取文档中的滚动区域对象，赋值给o 
11         var preTop = 0;  
12         o.scrollTop = 0;//文字内容顶端与滚动区域顶端的距离，初始值为0  
13         function start() {  
14             t = setInterval(scrolling, speed); /*setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。;每隔一段时间，setInterval便会执行一次scrolling函数；speed数值越大，滚动时间间隔越大，滚动速度越慢；*/
15                      
16             if(!p){o.scrollTop += 1;}//滚动的停止或开始，取决于p传过来的布尔值
17         }  
18         function scrolling() {  
19             if (o.scrollTop % lh != 0  
20                     && o.scrollTop % (o.scrollHeight - oHeight - 1) != 0) { 
21                 /*如果不被整除，即上一次移动的高度达不到1h,则内容会继续滚动*/
22                 preTop = o.scrollTop;  
23                 o.scrollTop += 1;  
24                 if (preTop >= o.scrollHeight || preTop == o.scrollTop) {  
25                     o.scrollTop = 0;  
26                 }  
27             } else {  
28                 clearInterval(t); //清除t，暂停滚动
29                 setTimeout(start, delay); //经过delay间隔后，启动start()再连续滚动 
30             }  
31         }  
32         setTimeout(start, delay); //第一次启动滚动，setTimeout会在一定的时间后执行函数start()，且只执行一次 
33     }  
34     window.οnlοad=function(){  
35         
36         startmarquee(20, 20, 1500); //startmarquee(一次滚动高度,速度,停留时间);　  
37     }