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

图13.6 直播前友好提示信息

图13.7 直播时的赛况信息

图13.8 结束时停止更新

转载于:https://blog.51cto.com/13423192/2056572

通过Timer和UpdatePanel控件实现NBA比赛的文字直播相关推荐

  1. asp.net ajax学习系列功能强大的UpdatePanel控件

    先给一个简单的例子,后面给一个比较复杂的例子. 改进后的UpdatePanel使页面部分更新(Partial-Page Updates)实现起来非常容易. 要想在已有web页面或新建页面中加入部分更新 ...

  2. 通过Ajax来简单的实现局部刷新(主要为C#中使用的UpdatePanel控件和ScriptManager控件)...

    1. ScriptManager和UpdatePanel控件联合使用可以实现页面局部异步刷新的效果.UpdatePanel用来设置页面中局部异步刷新的区域,它必须依赖于ScriptManager,因为 ...

  3. UpdatePanel控件的简单属性学习

    一.RenderMode属性,值为Block(默认值)为Inline  在页面中输入以下代码: <asp:ScriptManager ID="ScriptManager1"  ...

  4. 学习UpdatePanel控件

    UpdatePanel控件的使用 ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果.其中的UpdatePanel就是设置页面中异 步局部更新区域,它必须依赖 ...

  5. 第三篇: UpdatePanel 控件示例

    1. 新建一个web窗体Default3.aspx 2. 加入ScriptManager控件和UpdatePanel控件.     在UpdatePanel控件中加入 一个2 * 3 的表格      ...

  6. ASP.NET AJAX入门系列(5):使用UpdatePanel控件(二)

    UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...

  7. 第四篇: UpdatePanel 控件--触发机制Triggers

    之前,我们都是通过把控件放到UpdatePanel控件里的,若想要把控件放到UpdatePanel 外呢? 就可以通过Triggers 来实现. 我们通过一个例子来说明: 1.新建三个控件:Scrip ...

  8. C#运用ajax实现updatepanel控件更新及弹窗

    C#运用ajax实现updatepanel控件更新 一个页面要有不同的主题,如"我的主页"."我的帖子"."我的收藏"等等. 在点击相应功能 ...

  9. ScriptManager和UpdatePanel控件的使用

    ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果.其中的UpdatePanel就是设置页面中异步局部更新区域,它必须依赖于ScriptManager存在,因 ...

最新文章

  1. 【linux】图形界面基础知识(X、X11、GNOME、Xorg、KDE的概念和它们之间的关系)
  2. mysql学习【第10篇】:数据库之索引与慢查询优化
  3. python编写程序模拟硬币的投掷、假设0表示硬币的反面_修改了Python中的硬币投掷程序,无法完成循环...
  4. 工业轨式 1-16路 4-20MA 模拟量光端机产品介绍
  5. React中的组件通信——父传子、子传父、Context
  6. 电脑配置清单_2020年4月最新高性价比电脑配置清单放送,装机不迷路
  7. linux系统存储文件系统,Linux文件系统的深入分析
  8. 数据分析系统DIY1/3:CentOS7+MariaDB安装纪实
  9. netstat查看占用端口
  10. 消息中间件学习总结(21)——RocketMQ 消息丢失场景分析及如何解决!
  11. 字符编码:ASCII,Unicode和UTF-8
  12. 剑指offer——面试题55:字符流中第一个不重复的字符
  13. 前端项目总结与分享(PPT整理)
  14. 学生寝室管理系统-C语言版
  15. autoCAD编辑图案填充
  16. 解决用U盘重装Mac系统中电脑无法识别U盘的问题
  17. 哈希算法----猜词游戏
  18. python计算机器人运动学分析_orocos_kdl学习(二):KDL Tree与机器人运动学
  19. 《算法图解》系列笔记(七)—— 狄克斯特拉算法
  20. 计算机网络之应用层Tips

热门文章

  1. 用户登录注册流程图-所有项目论文通用计算机毕业设计
  2. error: void value not ignored as it ought to be
  3. python有趣小程序代码,简单的小程序代码
  4. 7年测试工程师,裸辞掉17K的工作,想跳槽找更好的,还是太高估自己了....
  5. 护卫神6588端口提权
  6. Vue-Router前端路由的两种模式、区别、原理?
  7. 推荐系统_基于内容的推荐
  8. 应用层协议 HTTP HTTPS
  9. http服务器的实现
  10. 三创赛优秀作品_全国-电子商务-三创赛省赛优秀作品.doc