现在的位置: 首页 > 综合 > 正文

使用 AJAX 实现 打字效果 、、 、

2013年08月22日 ⁄ 综合 ⁄ 共 1759字 ⁄ 字号 评论关闭

新建 Default9.aspx 页面

使用 SriptManager   和 UpdataPanel  在 UpdataPanel  放一个 、 timer 实现 、 使用两个  Viewstate,     ViewState[“index”]存储下标和ViewState[“content”] 打印的内容、、、

代码 :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;

public partial class Default6 : System.Web.UI.Page
{

    public int index {
        get {  return (int)ViewState["index"]; }
        set { ViewState["index"] = value; }
    }
    public String content
    {
        get { return (String)ViewState["content"]; }
        set { ViewState["content"] = value; }
    }
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            content = "你们好,我是你爷爷、、、、";
            index = 0;
            Timer1.Enabled = true;
        }
     
    }
   
    protected void Timer1_Tick(object sender, EventArgs e)
    {

        this.Label1.Text+=content[index].ToString();
        index++;
        if (index >=content.Length) {

            Timer1.Enabled = false;
        }
    }
   
   
 
}

页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default9.aspx.cs" Inherits="Default9" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                    <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
            </asp:Timer>
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            </ContentTemplate>
            
            
        </asp:UpdatePanel>
    
    </div>
    </form>
</body>
</html>

抱歉!评论已关闭.