在C#ASP.Net应用程序中使用JavaScript淡入淡出（闪烁）文本

在我的应用程序（WebFormASP.Net）的一部分中，我更改了网页上的文本。为了让用户注意到更改，我想淡出文本直到完全消失，然后更改文本，然后淡入以显示新文本

我已经用JavaScript部分实现了这一点。我可以使用以下代码淡出和淡入文本：

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>

函数toHex（d）{
return（“0”+（Number（d）.toString（16））.slice（-2）.toUpperCase（）
}
var方向=1；
var定时器_为_on=0；
var-rgb=0；
函数timedCount（）{
var lab=document.getElementById（'lblMessage'）；
如果（方向==1）{
rgb=rgb+15；
}
如果（方向==-1）{
rgb=rgb-15；
}
lab.style.color=“#”+toHex（rgb）+toHex（rgb）+toHex（rgb）；；
如果（rgb>=255 | | rgb，我认为可能有一些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>

这是一个具有挑战性的问题：）
这只是一个建议，如果你用css动画进行淡入淡出效果会更好。至于你的问题，根据你想更改文本的内容还不清楚。至于你的第二个问题，你不能真正将js/css代码放在c中，因为每种代码都有不同的用途。制作你想要的东西有点问题，因为你是使用webforms，它们基于回发工作，回发将用新数据重新加载您的页面，这会破坏用户“交互”点对于带有js/css动画的页面。你是对的。我已经尝试了很多事情，但都无法让它工作，因为所有asp.net回发和updatepanel技巧。我认为我最大的问题是混合了JavaScript和代码。如果都是js，这会容易得多，但我涉及到服务器端代码。如果可以，你应该尝试MVC而不是webforms，如果您需要继续使用webforms，那么根据数据量的不同，您可以使用ajax调用获取它们，并通过自己的处理程序提供它们，然后适当地应用js/css，或者您可以使用已经存在的数据创建页面，只需更改可见性，或者在回发时更改数据，只需执行淡入动画、转储淡出动画即可o您不会延迟用户获取包含新数据的页面。无论如何，最好使用css动画。
<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);
}