滚动显示问题再问

0041123 2010-05-12 10:29:32
网页上要显示一组滚动数据（电话号码）。
要求是所有打开网页的人看到的滚动数据都相同，（比如所有打开网页的人都看到滚动数据滚动到第33个），
数据由管理员后台添加，添加后不重新开始滚动，继续当前的滚动状态，只是数据总数多了一个，
能让他定时停止。
感谢toury上次的回答，虽然深受启发，单仍然没有实现。希望能够得到比较详细的代码，感激不尽！
...全文
167 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
toury 2010-05-13
  • 打赏
  • 举报
 回复
忘记说了：
/********************************************************************
/* 滚动器 *
/*******************************************************************/
function upRoller(){
if(rollwords.length==0)return
if(stopscroll) return;
if(currentTop<=boxHeight-lineHeight){
currentTop +=1;//滚动速度，每次滚动px数
}
else{currentTop=0;}
container.scrollTop=currentTop;
$("abcd").innerHTML=defaultTop+'-----'+currentTop//调试用，用后删除
if(currentTop%lineHeight==0&¤tTop!=0&¤tTop!=boxHeight-lineHeight){
clearInterval(tRollerID);
currentID++//当前的数据位置
currentID=rollCount<currentID?1:currentID//大于数据条数重置
myAjax("1.asp?currentTop="+currentTop+"&t="+new Date().getTime(),'currentTop')
setTimeout("init()",1500);//停顿时间
}
}

红字这句AJAX，需要斟酌：
如何只让一台机去后台更新APPLICATION("currentTop")。否则N台机器一起向服务器发送这个重复的请求，浪费资源不说，可能会引起混乱
toury 2010-05-13
  • 打赏
  • 举报
 回复 


<!--#include file="conn.asp"-->

<%

'注意：此上不要加任何HTML代码，连库文件conn.asp的代码中也不能有；否则程序需要改动，或用新文件做AJAX后台

'我写到本页是为了方便

'-----------------------AJAX  start----------------------------------------

  Response.CharSet="gb2312"

  flag=Request.QueryString("flag")

  if len(flag)>0 then

    Response.Write getdata

    Response.End 

  end if

  

  id=Request.QueryString("id")

  if len(id)>0 then

    sName=Request.QueryString("sName")

    sTel=Request.QueryString("sTel")

    Response.Write alterdata(sName,sTel)

    Response.End 

  end if

  

  currentTop=Request.QueryString("currentTop")

  if len(currentTop)>0 then

    application("currentTop")=currentTop

    Response.Write application("currentTop")

    Response.End 

  end if

  

function getdata()

  on error resume next

  dim s

  set rs = server.CreateObject("adodb.recordset")

  sql = "select M_tel from Member order by id"

  rs.Open sql,Conn,1,1    

  do while not rs.Eof    

    if s="" then s=rs("M_tel") else s=s&"|"&rs("M_tel")

    rs.movenext

  loop

  rs.close

  if len(s)>0 then r = Split(s,"|")

  dim starttime,ssss

  sql = "select C_start,C_end from choujiang where id=1"

  rs.Open sql,conn,1,1 

  if not rs.EOF then

    starttime=rs("C_start"):  endtime=rs("C_end")

  else

    starttime="infinite":  endtime="infinite"

  end if   

  rs.close

  set rs=nothing

  '将数据、开始时间、结束时间、服务器时间一起返回给前台

  s=s&","&starttime&","&endtime&","&now()

  if s="" then s="NULL"

  getdata=s

  if err then getdata="@error:"&err.Description 

end function



function alterdata(sName,sTel)

  on error resume next

  sql="INSERT INTO [Member](M_name,M_tel) VALUES('"&sName&"','"&sTel&"')"

  conn.execute sql

  alterdata="OK"

  if err then   alterdata="@error:"&err.Description 

end function

'-----------------------AJAX  END----------------------------------------





'单台机测试用：

application("currentTop")=110



%>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>toury'test demo</title>

<style type="text/css">

  #container {line-height: 22px;height: 22px;width: 300px;overflow: hidden;font-size: 12px;}

  #container #marquee {top: 0px;line-height: 22px;vertical-align: middle;}

</style>

<script language="javascript" type="text/javascript">

function $(id){return document.getElementById(id)}

/********************************************************************

/*  AJAX                                                            *

/*******************************************************************/

function getXMLHTTPObj(){

  var xmlHttp=null;

  try{xmlHttp=new XMLHttpRequest();}

  catch (MSIEx){

    try{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}

    catch (e){

      try{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}

      catch(e){alert('您的浏览器不支持AJAX！');}

    }

  }

  return xmlHttp;

}



function myAjax(url,flag){

  var x = getXMLHTTPObj();

  x.onreadystatechange=function(){

    if(x.readyState==4){

      if(x.status==200){

        ret=x.responseText;

        x=null;

        if(ret.indexOf('@error:')!=-1){ alert('出现错误：'+ret.replace('@error:','')); return;  }

        switch(flag){

        case "getdata":	      

          if (ret!="NULL"){

	    var arr=ret.split(',')

            handledata(arr[0],arr[1],arr[2],arr[3])//数据,开始时间,结束时间,服务器时间

            arr=arr[0].split('|')

            $("abc").innerHTML=arr.join('<br>')//调试用，用后删除

          }

          break;

	case "currentTop"://调试用，用后删除

          $("abcd").innerHTML +="-------各客户端同步显示的application:"+ret

          break				  

        case "alterdata"://*********************模拟后台改变数据，调试后删除

          //alert(ret)

          break;

        }

      }

    }

  }

  x.open('GET',url,true);

  x.setRequestHeader("Content-Type","text/XML");		

  x.send(null);

}



/********************************************************************

/*  处理数据                                                        *

/*******************************************************************/

function handledata(s,startTime,endTime,svrTime){

  if(!s||s.length==0)return

  //以服务器时间为准，处理滚动开始时间、结束时间

      //这个很简单你自己先试着做做，就是根据开始时间、结束时间与服务器时间比较的结果决定是继续程序，还是删除定时器

      //.....................



  //滚动数据处理

  rollwords=s

  if(lineWord==0){

    rollCount=rollwords.split("|").length

    rollwords=rollwords.replace(/\|/g,'<br>');

    boxHeight=(rollCount+1)*lineHeight+Math.round(lineHeight/2);//数据层高度

  }

  else{

    var arrRollWords=rollwords.split("|");

    rollwords="";

    var tempNum=0;

    for(var j=0;j<arrRollWords.length;j++){

      if(arrRollWords[j]=="") continue;

      var t=arrRollWords[j].length/lineWord;

      var tNum=0;  

      if(t>1){

        if(t%1==0){  tNum+=t;   }   else{  tNum+=Math.round(t)+1;    }

      }

      for(var i=0;i<tNum;i++){  rollwords+=arrRollWords[j].substr(i*lineWord,lineWord)+'<br>';  }

      rollwords+=arrRollWords[j]+(j==arrRollWords.length-1?"":'<br>');  

      tempNum+=tNum;

    }

    boxHeight=(arrRollWords.length+tempNum+2)*lineHeight;//数据层高度

  }

  with(marquee){   style.height=boxHeight;   style.width=300;  }

  marquee.innerHTML="<br>"+rollwords+"<br>"; //数据写入滚动层 

}



/********************************************************************

/*  滚动器                                                           *

/*******************************************************************/

function upRoller(){

  if(rollwords.length==0)return

  if(stopscroll) return;  

  if(currentTop<=boxHeight-lineHeight){

    currentTop +=1;//滚动速度，每次滚动px数

  }

  else{currentTop=0;}  

  container.scrollTop=currentTop;

  $("abcd").innerHTML=defaultTop+'-----'+currentTop//调试用，用后删除

  if(currentTop%lineHeight==0&¤tTop!=0&¤tTop!=boxHeight-lineHeight){

    clearInterval(tRollerID);

    currentID++//当前的数据位置

    currentID=rollCount<currentID?1:currentID//大于数据条数重置

    myAjax("1.asp?currentTop="+currentTop+"&t="+new Date().getTime(),'currentTop')

    setTimeout("init()",1500);//停顿时间

  }    

}



function init(){  tRollerID=setInterval(upRoller,30); }//滚动间隔；



/********************************************************************

/*  全局变量                                                         *

/*******************************************************************/

var rollwords='';//要滚动的文字

var rollCount=0;//数据条数

var currentID=1;//当前的数据ID(位置)，默认为1

var tRollerID=0;//滚动计时器句柄

var tAjaxID=0;//Ajax计时器句柄

var lineHeight=22;//显示的层高

var lineWord=0;//40;长字串需要分行显示时使用.   0表示不考虑

var marquee=null,  container=null;

var stopscroll=false;//停止滚动标志

var currentTop=-lineHeight;//滚动数据层的位置

var defaultTop=0;//滚动数据层的同步统一位置

var boxHeight=0//全部数据层的高度





window.onload=function(){

  //页面加载后初始化一些数据、参数、对象等

  marquee=$("marquee"),  container=$("container");

  $("container").onmouseover = function(){'stopscroll = true';}

  $("container").onmouseout  = new Function('stopscroll = false');

  container.scrollTop=0;

  //-------各客户端同步显示处理

  defaultTop='<%=application("currentTop")%>';

  defaultTop=defaultTop.length>0?defaultTop*1:currentTop  

  currentTop=defaultTop-1;

  //取数据

  myAjax("1.asp?flag=y&t="+new Date().getTime(),'getdata')

  var n=5000;

  //间隔n秒执行AJAX	取后台数据。

  tAjaxID=setInterval("myAjax('1.asp?flag=y&t="+new Date().getTime()+"','getdata')",n)

  //处理文字滚动.

  init();

}

</script> 

</head>

<body>

<div id="container">

<div id="marquee"></div>

</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

-------------------------------------------------------------------------------------------------------------

<br>调试用，用后删除<br><br><br>

姓名：<input type=text id='sName' />

电话：<input type=text id='sTel' />

<input type=button value="模拟后台更改数据" onclick="if($('sName').value==''||$('sName').value==''){alert('别空着！');return;};AlterData($('sName').value,$('sTel').value);">

<div id=abc style='border:1px solid red;'></div>

<div id=abcd style='border:1px solid blue;'></div>

<br>-------------------------------------------------------------------------------------------------------------<br>

</body>

</html>

<SCRIPT LANGUAGE=javascript>

//模拟后台改变数据，调试后删除

<!--

function AlterData(sName,sTel){

  myAjax("1.asp?id=1&sName="+sName+"&sTel="+sTel+"&t="+new Date().getTime(),'alterdata')

}

//-->

</SCRIPT>
一把编程的菜刀 2010-05-12
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 0041123 的回复:]
如果没有人打开页面的话，那么id怎么更新啊。
现在我卡在AJAX取值不成功，不更新、不同步、页面刷新不判断，
平时不怎么用AJAX，不太熟悉，希望高手能指点一下
[/Quote]
要同步，只有我说的做法
孟子E章 2010-05-12
  • 打赏
  • 举报
 回复
你只能在数据库中设置一个字段，记录当前应该滚动到哪个数字上，比如是33还是35等。否则，由于页面请求时间不确定，无法让所有用户看到的是滚动到相同的数据
一把编程的菜刀 2010-05-12
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 0041123 的回复:]
如果没有人打开页面的话，那么id怎么更新啊。
现在我卡在AJAX取值不成功，不更新、不同步、页面刷新不判断，
平时不怎么用AJAX，不太熟悉，希望高手能指点一下
[/Quote]
就算你页面不打开，那你现在的做法一样是做不到的
如果说我说的做法做不到，那别的就更没办法做到了

因为页面不打开，你的那些数据也是不会滚动的

你这一点难道还要想复杂了？
0041123 2010-05-12
  • 打赏
  • 举报
 回复
如果没有人打开页面的话，那么id怎么更新啊。
现在我卡在AJAX取值不成功，不更新、不同步、页面刷新不判断，
平时不怎么用AJAX，不太熟悉，希望高手能指点一下
一把编程的菜刀 2010-05-12
  • 打赏
  • 举报
 回复
很简单的一个想法，有什么不好理解的？

里面有哪一句话是难以理解的呢？
一把编程的菜刀 2010-05-12
  • 打赏
  • 举报
 回复
打个比方，如果总共有100个电话，现在ID记录为95，那我要是取值的话，是不是只有5个电话了


这样理解只能对一半

因为循环100完以后，你还可以从头开始

因为是每循环一条他就会更新一下记录ID，还可以通过判断是否最后一条数据，如果是最后一条，那么下一条又从头开始
0041123 2010-05-12
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 chinmo 的回复:]
滚动一个就记录一个ID，然后通过大于这个ID或者是小于这个ID的做法来提取下一条是最简单直接也是最准确的做法

你竟然说不行

那我对你也真的无话可说
[/Quote]
不好意思，可能我没理解你的想法

打个比方，如果总共有100个电话，现在ID记录为95，那我要是取值的话，是不是只有5个电话了
一把编程的菜刀 2010-05-12
  • 打赏
  • 举报
 回复
滚动一个就记录一个ID，然后通过大于这个ID或者是小于这个ID的做法来提取下一条是最简单直接也是最准确的做法

你竟然说不行

那我对你也真的无话可说
一把编程的菜刀 2010-05-12
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 0041123 的回复:]
引用 6 楼 chinmo 的回复:
要求是所有打开网页的人看到的滚动数据都相同，（比如所有打开网页的人都看到滚动数据滚动到第33个），

这个做法只有如我说的那样做才可以实现。否则不管你使用什么方法都无法实现，就算你使用cookie和session也没用

select * from table where id>1
这个语句不行吧，我是想取开始位置。
我用的是时间判断的，设置了一……
[/Quote]
为什么不行呢？

我很不明白你的什么思路，一个很简单的问题
搞这么复杂了

你自己看完我上面的说明，仔细琢磨吧，本来是一个很简单的问题，让你想复杂了
0041123 2010-05-12
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 chinmo 的回复:]
要求是所有打开网页的人看到的滚动数据都相同，（比如所有打开网页的人都看到滚动数据滚动到第33个），

这个做法只有如我说的那样做才可以实现。否则不管你使用什么方法都无法实现，就算你使用cookie和session也没用
[/Quote]
select * from table where id>1
这个语句不行吧，我是想取开始位置。
我用的是时间判断的，设置了一个开始时间，根据时间差取开始位置（想设置成每秒滚动一个电话号码），
一把编程的菜刀 2010-05-12
  • 打赏
  • 举报
 回复
要求是所有打开网页的人看到的滚动数据都相同，（比如所有打开网页的人都看到滚动数据滚动到第33个），

这个做法只有如我说的那样做才可以实现。否则不管你使用什么方法都无法实现，就算你使用cookie和session也没用
0041123 2010-05-12
  • 打赏
  • 举报
 回复
2.asp


<!--#include file="../include/function.asp"-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<%

'开始时间 

sstr=""

Dim rsLink2,linksql2

	dim starttime,ssss

	set rs01 = server.CreateObject("adodb.recordset")

    sql01 = "select C_start from choujiang where id=1"

	rs01.Open sql01,Conn,0,1	

	starttime=rs01("C_start")



ssss=datediff("s",rs01("C_start"),now) 









sql="select M_tel from Member order by id"

set rs=conn.execute(sql)

dim str



if not rs.bof and not rs.eof then



	do while not rs.bof and not rs.eof

	str=str&rs("M_tel")&"|"

	rs.movenext

	loop

	

	aaa=split(str,"|")

	num=ubound(aaa)+1

	

	num1=ssss mod num	

	

 	'response.Write(num1)

	'response.End()

	for i=0 to 9

	

	sstr=sstr&aaa(num1-1)&" "

	if num1+1>=num then

	num1=0

	end if

	num1=num1+1

	i=i+1

	

	next

	

	

	

	

	response.write sstr

else

	response.write "0"

end if

%>
0041123 2010-05-12
  • 打赏
  • 举报
 回复 


<!--#include file="../include/function.asp"-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>显示页</title>

<style type="text/css" media="all">

.d1 {

	margin:0px auto;

	width:670px;

	background-color:#ffffff;

	height:auto;

	overflow:hidden;

	white-space:nowrap;

}

.d2 {

	margin:0px auto;

	background-color:#FF9933;

}

.div2 {

	width:auto;

	height:auto;

	font-size:12px;

	float:left;

	overflow:hidden;

}

ul{

margin:0px;

padding:0px;

list-style:none;

line-height:19px;

font-size:12px;

}

a:link,a:visited{

color:#3F78CF;

text-decoration:none;

}

a:hover{

color:#FF00CC;

text-decoration:underline;

}

.STYLE1 {color: #FF0000}

</style>

<script language="javascript" type="text/javascript">

var s,s2,s3,s4,timer;

function init(){

s=getid("div1");

s2=getid("div2");

s3=getid("div3");

s4=getid("scroll");

s4.style.width=(s2.offsetWidth*2+100)+"px";

s3.innerHTML=s2.innerHTML;

timer=setInterval(mar,10)

}

function mar(){

if(s2.offsetWidth<=s.scrollLeft){

s.scrollLeft-=s2.offsetWidth;

}else{s.scrollLeft++;}

}

function getid(id){

return document.getElementById(id);

}

//window.onload=init;

</script>

<%

aaa=""

set rsLink2 = server.CreateObject("adodb.recordset")

	linksql2 = "select M_tel from Member order by id"

	rsLink2.Open linksql2,Conn,0,1	

	If not rsLink2.Eof Then

do while not rsLink2.Eof	



if aaa="" then

aaa=rsLink2("M_tel")

else

aaa=aaa&"|"&rsLink2("M_tel")

end if

r = Split(aaa,"|")



rsLink2.movenext

	loop

End if

	rsLink2.close

	set rsLink2 = nothing	

		

%>

<%

	Dim rsLink2,linksql2

	dim starttime,ssss

	set rs01 = server.CreateObject("adodb.recordset")

	sql01 = "select C_start from choujiang where id=1"

	rs01.Open sql01,Conn,0,1	

	starttime=rs01("C_start")

	

	

	

	%>

<!----------------------------------------------------------------------------------------防沉迷开始--->

<script> 

var xmlHttp;

function jianli(){

try {

  xmlHttp = new XMLHttpRequest();

} catch (trymicrosoft) {

  try {

    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

  } catch (othermicrosoft) {

    try {

     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    } catch (failed) {

      request = null;

    }

  }

}

}

//------------------------------------------





  

function aaa2(){

jianli();

if(xmlHttp!=null){



xmlHttp.open("get","2.asp",true); //传递给处理页面

xmlHttp.onreadystatechange=aaa_panduan2;

xmlHttp.send(null);



}

else{

jianli();

aaa2();



}

}



//------------------------------------------



function aaa_panduan2(){



if(xmlHttp.readyState==4){

  if(xmlHttp.status==200){

  var dataa=xmlHttp.responseText;//接收返回的数据



 if(dataa!=0){ 

	 r = dataa;

	 r=dataa.split("|");

	 rrrrrr=dataa.split(",");

	 document.getElementById("div2").innerHTML=xmlHttp.responseText;

	 //document.write(r);

     //alert(r);

  }else{

     //否则没有超过一个小时，此处预留 

  

  }

    }

}

}

window.onload=function(){

  var n=500;

  setInterval('aaa2()',n)//间隔n秒执行rollwords刷新

 //这里写处理文字滚动的代码.......

  //init();

}

</script> 

<!----------------------------------------------------------------------------------------防沉迷结束--->



</head>

<body>



<div class="d1" id="div1" >

   <div class="scroll" id="scroll">

     <div class="div2" id="div2">

        <ul>

          <li>



</li>

        </ul>

  </div>

  <div id="div3" class="div2"></div>

 </div> 

</div>

</body>

</html>
toury 2010-05-12
  • 打赏
  • 举报
 回复
把你的代码贴上来
一把编程的菜刀 2010-05-12
  • 打赏
  • 举报
 回复
很简单的减法
不是应该有一个网站设置的表的吗？比如config这一类的一个表，在这个表中加一个字段，这个字段专门记录该滚动的当前ID，然后用大于该ID的条件来判断当前的滚动条数
比如你该字段记录ID为1
那么你滚动的SQL语句就是
select * from table where id>1

没滚动一次就UPDATE一次该字段，至于怎么更新也很简单的
用AJAX更新，这个相信你应该知道的，每触发一次滚动就调用一次AJAX来更新该字段


当然该字段你也不一定是存在表里的，也可以是一个公共的文件，每次更新该公共文件也可以


如果要数字重新开始的话，那么判断
"select * from table where id>记录的当前滚动ID"这样是否有记录，没有的话就从头开始
猜我是几娃 2010-05-12
  • 打赏
  • 举报
 回复
挺麻烦的。。。得花不少时间着磨。。。
帮顶了
html5自动出现滚动条,html展示滚动条 html 自动显示横向滚动条
html 怎么去掉网页的滚动条然后给子div添加内容，为了让滚动条可以实现，尽量多添加一些内容。html 自动显示横向滚动条假设一个页面上有一个DIV，他的宽度设为了width：70%；怎样实现当html页overflow:scroll; /*任何时候都强制显示滚动条*/ overflow:auto; /*需要的时候会出现滚动条*/ overflow-x:auto; /*控制X方向的滚动条*/ o...
移动端页面滚动穿透问题解决方案
问题描述 最近在做移动项目时遇到一个页面滚动穿透问题，具体场景是这样的，在一个可滚动的列表页中打开弹窗，底部的页面理论上是不可滚动的，但是当滑动弹窗时，底部页面会跟随滚动，这就是所谓的页面滚动穿透的问...
css解决滚动弹出层里边的滚动条时带动了整个页面滚动的问题
之前一个朋友问我说他的一个弹出层在弹出后，上下滑动弹出层或遮罩层，结果遮罩层下边的整个页面（页面超出了一屏）也跟着滚动了，他说他不想要这样的效果，我说你把弹出层和遮罩层的position:fixed设置为position:absolute就可以了，结果他说不行。当时我也没有在意，平时我也基本没有在意过这样的问题，所以就让他再查查资料。今天，我在做页面时，弹出层控制了高度，里边的内容多的话就必须要可...
vue3+ts+wow.js实现页面滚动到屏幕可视区域再显示过渡动画
vue3+ts引入wow.js实现当页面滚动到可视区域再显示元素过渡动画
html页面内容超出后显示水平滚动条的问题
这个问题已经遇到好几次，解决起来也熟练了很多。 出现这种问题一般都是html或页面中的某一内部元素宽度超了。 下面总结我遇到的几种情况： 1、某一内部元素width设为100%，然而它还有border的宽度，border的宽度不包含在width中，所以结果超了。 2、span行内元素，由于它是行内元素，不设display:block之类，宽度设定对它没用，当初弄的时候没有意识到这个问...
ASP

28,391

社区成员

357,059

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章