通过定时器和UpdatePanel控件实现NBA比赛的文字直播

  

文字直播是满足一些观看视频直播而条件不足的球迷所设定的比赛直播方式,例如在长途车上为了能够了解比赛的实时赛况但又限于流量和网速等问题,就出现了文字直播的方式,无论是拥有无线上网卡的笔记本电脑或者手机等终端设备都可以通过访问文字直播满足用户需求,本实例将通过预先定义好的直播数据来模拟文字直播效果,具体实现步骤如下:
(1)新建一个网站并创建一个违约。aspx页面,在页面将使用div标签进行直播窗口的布局,除了要实时更新的数据信息外,还包含一个控制复选框,用于启用或停止自动更新。页面源中要更新的布局标签如下:
01 & lt; divclass=發ivecontent"在
02 & lt; divclass=發ivecontenttitle"祝辞& lt; span>球队& lt;/span> & lt; span>时间& lt;/span>
03 & lt; span>解说& lt;/span> & lt; span>比分& lt;/span> & lt;/div>
04 & lt; asp: ScriptManagerID=癝criptManager1" runat=皊erver"祝辞& lt;/asp: ScriptManager>
05 & lt; asp: UpdatePanelID=癠pdatePanel1" runat=皊erver"在
06 & lt; ContentTemplate>
07 & lt; divclass=發ivecontentbody" id=發ivecontentbody" runat=皊erver"祝辞& lt;/div>
08年& lt; asp: TimerID=癟imer1" runat=皊erver"
09年间隔=?0000“OnTick=癟imer1_Tick"祝辞& lt;/asp: Timer>
10 & lt;/ContentTemplate>
11 & lt;/asp: UpdatePanel>
12 & lt;/div>
(2)为了模拟直播员录入的比赛信息,在实例中将通过程序填充一些比赛数据,并且需要定义数据容器来承载这些数据,代码如下:
01 publicstaticStringBuilder str=newStringBuilder();//比赛内容数据绑定容器
02 publicstaticList 03 publicstaticint指数=1;//比赛信息数据索引
04 protectedvoid employee(对象发送方,EventArgs e)
05 06年{
如果(! IsPostBack)
07年08年{
//首次加载时填充数据容器
09年的结果。Add(部份[]{“cl",“11:48",“特里斯坦汤普森两分球进“,“0-0"});
10个结果。Add(部份[]{“ov",“00:00",“第一节结束“,“30-30"});
//11页面加载设置友好提示信息12 this.livecontentbody
。InnerHtml=
13“& lt; div类=\“\“开始在各位观众大家好,比赛已经正式开始! & lt;/div>“
14}
15}
注意:
由于篇幅的限制所以代码中只给出了开始数据和结束数据,实际数据总数为20条。
(3)再来实现启用或暂停的复选框功能,代码如下:
01 protectedvoid CheckBox1_CheckedChanged(对象发送方,EventArgs e)
02 {
03 this.Timer1。启用=((复选框)发送者)支票;//用于启用或暂停比赛直播
04}
(4)最后定义定时器定时器定时触发方法的功能,该处理方法将每隔10秒钟进行一次调用,然后在方法中随机生成1到3条数据并填充到容器,最后绑定到页面上,代码如下:
01 protectedvoid Timer1_Tick(对象发送方,EventArgs e)
02 {
03随机跑=newRandom();//创建随机类
04 int r=跑。下(1,4);//生成1 - 3随机数
05//根据生成的随机数进行循环,并判断总的数据量没有超出循环范围
06 (int i=0;我& lt;r,,指数& lt;20;我+ +)
07年{
08年指数+ +,//从0开始
09 string[](指数)arr=结果;//获取指定索引的数据
10//向绑定容器中第0个位置插入比赛信息,此方式确保最新的数据永远排在最上面
11 str.Insert (0,“& lt; div类=\“livecontentbodylist \“比;“+
12“& lt; span> & lt; img src=https://www.yisu.com/巴枷?? arr [0] +”。png/"/> " +
13“& lt; span>“+ arr [1] +“& lt;/span>“+
14“& lt; span>“+ arr [2] +“& lt;/span>“+
15“& lt; span>“+ arr [3] +“& lt;/span>“+
16“& lt;/div>“);
17}
18 this.livecontentbody。InnerHtml=str.ToString();//绑定到页面div容器中
19如果(指数比;19)//判断索引值是否超出数据总数
20 21 this.Timer1 {
。启用=false;//如果超出则本节结束,停止更新
22}
23}
执行程序,页面加载时将提示友好信息,如13.6图所示,比赛开始后效果如13.7图所示,最后第一节比赛结束后效果如13.8图所示。

  

图13.6直播前友好提示信息
通过定时器和UpdatePanel控件实现NBA比赛的文字直播

  

图13.7直播时的赛况信息
通过定时器和UpdatePanel控件实现NBA比赛的文字直播”> <br/>图13.8结束时停止更新</p>
  <p> <img src=

通过定时器和UpdatePanel控件实现NBA比赛的文字直播