jsp页面：
</head>
<body>
<div id="box">
<!--height:此高度不能高于id="ol1"的高度 --><!--str默认占一行 -->
<div id="box2" style="overflow:hidden; height:60px; width:400px;">
<div id="ol1"></div>
<div id="ol2"></div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript">
!function(){
var strUrl="GetHrlServlet";
$.post(strUrl, function(data){
data = JSON.parse(data)
var len = data.length;
var str = "";
for(var i=0;i<len;i++){
var hrl = data[i];
var fphone = hrl.phone.substring(0,3);
var lphone = hrl.phone.substring(7,11);
str +="<div>恭喜手机号码为:"+fphone+'***'+lphone+'的'+hrl.name+'获得'+hrl.prize+"</div>";
/* str +="<div>"+hrl.phone+'的'+hrl.name+'获得'+hrl.prize+"</div>"; */
}
$("#ol1").append(str)
ol2 = document.getElementById('ol2').innerHTML = document.getElementById('ol1').innerHTML;//将ol1的内容赋值给ol2使得ol2与ol1的数据内容一致
})
}();
var area = document.getElementById('box2');
var ol1 = document.getElementById('ol1');
var ol2 = document.getElementById('ol2');
area.scrollTop = 0;
var myScroll = setInterval('scroll()',20)//20秒执行一次
function scroll(){
//1.在这里加20
//2.在div加
/*area.scrollTop的滚动最高高度为id="box2到box的高度(包含ol2和ol1)-box2的高度，所以为了保证此if可以运行，box2的高度不能高于ol1的高度。如166.4-60=100>ol1(ol1.setHeight)" */
if(area.scrollTop>=ol1.offsetHeight){//当滚动的区域大于ol1时
area.scrollTop=0; //将滚动区域初始化为0，回到初始位置
}else{
area.scrollTop++;
}
}
area.onmouseover = function(){//鼠标事件
clearInterval(myScroll);
}
area.onmouseout = function(){//鼠标事件
myScroll = setInterval('scroll()',20);
}
</script>
</html>
Dao页面：
public class ShowHrlDao extends BaseAbstractDao {
public List<Map<String, Object>> getHrl(){
String sql = "select id,name,phone,prize from hrl";
return super.queryForList(sql);
}
servlet页面：
private ShowHrlDao shi = new ShowHrlDao();
List<Map<String, Object>> hrlList = this.shi.getHrl();
System.out.println(hrlList.size());
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
//JSNO格式字符串
out.write(JSONObject.toJSONString(hrlList));
网友评论