javascript - 在 C# ASP.Net 应用程序中使用 JavaScript 淡入淡出(闪烁)文本

Question

在我的应用程序 (WebForm ASP.Net) 的一部分中，我更改了网页上的文本。为了引起用户注意变化，我想淡出文本直到完全消失，然后更改文本然后淡入以显示新文本。

我已经在 J​​avaScript 中部分实现了它。我可以使用以下代码淡出和淡入文本:

JavaScript

<script type="text/javascript">
    function toHex(d) {
        return ("0" + (Number(d).toString(16))).slice(-2).toUpperCase()
    }

    var direction = 1;
    var timer_is_on = 0;
    var rgb = 0;

    function timedCount() {
        var lab = document.getElementById('lblMessage');
        if (direction == 1) {
            rgb = rgb + 15;
        }
        if (direction == -1) {
            rgb = rgb - 15;
        }
        lab.style.color = "#" + toHex(rgb) + toHex(rgb) + toHex(rgb);;
        if (rgb >= 255 || rgb <= 0) {
            if (direction == 1) {
                direction = -1;
            }
            else {
                timer_is_on = 0;
                return;
            }
        }
        setTimeout(timedCount, 50);
    }

    function startEffect() {
        if (!timer_is_on) {
            timer_is_on = 1;
            direction = 1;
            rgb = 0;
            timedCount();
        }
    }
</script>

ASPX

<form id="frm" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="pnlMain" runat="server">
        <ContentTemplate>
            <div style="width: 400px; margin: 0 auto; text-align: center; font-size: x-large">
                <span id="lblMessage">No Record is Selected</span>
            </div>
            <button onclick="startEffect()">Start!</button>
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

问题

我不知道两件事:

1. 我如何在淡出完成后更改文本
2. 如何在 C# 代码隐藏中完成所有这些工作。

注意:我想在没有 jQuery 或任何其他 JavaScript 库的情况下执行此操作。

Answer 1

我认为可能有一些 CSS 技术可以使此代码更简单和更短，但为了使您的代码与所有浏览器兼容，我会按照您的方式进行操作。

您需要将新消息传递给您的 JS 函数。我还更改了 JS 以传递控件的 ID，以便您可以将代码用于页面中的多个元素。

<script type="text/javascript">
    function toHex(d) {
        return ("0" + (Number(d).toString(16))).slice(-2).toUpperCase()
    }

    var direction = 1;
    var timer_is_on = 0;
    var rgb = 0;

    function timedCount(controlId, newMsg) {
        var lab = document.getElementById(controlId);
        if (direction == 1) {
            rgb = rgb + 15;
        }
        if (direction == -1) {
            rgb = rgb - 15;
        }
        lab.style.color = "#" + toHex(rgb) + toHex(rgb) + toHex(rgb);
        if (rgb >= 255 || rgb <= 0) {
            if (direction == 1) {
                direction = -1;
                lab.innerText = newMsg;
            }
            else {
                timer_is_on = 0;
                return;
            }
        }
        setTimeout(timedCount.bind(null, controlId, newMsg), 50);
    }

    function startEffect(controlId, newMsg) {
        if (!timer_is_on) {
            timer_is_on = 1;
            direction = 1;
            rgb = 0;
            timedCount(controlId, newMsg);
        }
    }
</script>

同样为了解决回发问题，你需要使用隐藏字段来解决这个问题。这很重要，否则您的文本将在回发时恢复。

<form id="frm" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="pnlMain" runat="server">
        <ContentTemplate>
            <asp:HiddenField ID="hfMessage" runat="server" />
            <div style="width: 400px; margin: 0 auto; text-align: center; font-size: x-large">
                <asp:Label ID="lblMessage" runat="server" Text="No Record is Selected"></asp:Label>
            </div>
            <asp:Button ID="btnFlash" runat="server" Text="Change Text" OnClick="btnFlash_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

这是代码隐藏

protected void Page_Load(object sender, EventArgs e)
{
    // on first load, store the text message in hidden field
    if (!Page.IsPostBack)
    {
        hfMessage.Value = lblMessage.Text;
    }

    if (Page.IsPostBack)
    {
        // on postback, set the text message from hidden field which is populated in button click
        lblMessage.Text = hfMessage.Value;
    }
}

protected void btnFlash_Click(object sender, EventArgs e)
{
    // This would be your message, I just used a date-time to create dynamic message.
    string newMessage = DateTime.Now.Second.ToString() + " Records Selected";

    // store the new message in hidden field to change the text on post-back, otherwise your message will be restored on post-back
    hfMessage.Value = newMessage;

    // call JS from code-behind, pass the control ID and the new message
    ScriptManager.RegisterStartupScript(this, GetType(), "flash", "startEffect('lblMessage', '" + newMessage + "');", true);
}

这是一个具有挑战性的问题:)