Question

我创建了一个程序，用于显示一组媒体和订阅的目标和成就。所以我有一个计时器，数据每10秒钟就会改变一次。我的问题是，我怎样才能每10秒更新或更改.aspx的背景图片？

我有两个背景：background_black.jpg和background_blue.jpg

这是我的CSS：

   body{
    background-image: url('../Images/background_black.jpg');
    background-repeat:no-repeat;
    background-size: 100% auto;
    font-family: Eurostile;
    background-color:Black; 
}

这是我在.aspx中的来源：

<asp:UpdatePanel runat="server" id="UPThis2" UpdateMode="Conditional" >
        <ContentTemplate>
           <asp:Panel runat="server" ID="Panel1">
                 //Display first and the background-image is background_black.jpg
           </asp:Panel>

           <asp:Panel runat="server" ID="Panel2">
                 //After the first 10 seconds this Panel2 will displayed and also it will change also the background-image to background_blue.jpg
           </asp:Panel>
         </ContentTemplate>
</asp:UpdatePanel>

最后，这是我的Timer代码：

protected void Timer1_Tick(object sender, EventArgs e)
        {
            Timer1.Enabled = false;

            loadUserData();
            if (Global.__PUBLIC_indexcurrentdisply == _result2)
            {
                Panel2.Visible = true;
                Panel1.Visible = false;
            }
            else
            {
                Panel2.Visible = false;
                Panel1.Visible = true;
            }

            UPThis2.Update();
            Timer1.Enabled = true;
        }

感谢您提前！

Answer 1

您可以使用简单的javascript来实现此目的

加载时，使用settimeout方法在10秒后更改背景

Settimeout method

Answer 2

您无法从服务器端更新它。您是否使用客户端更新或更新回调。因为在客户端请求之前，服务器什么也不做。更好地使用客户端库。最适合您的情况是JavaScript。这是一个简单的例子 -

var _jsInterval = setInterval(function(){
     //do your task, change image etc.
}, 10 * 1000); //10s cooldown

将使用面板的ClientIDMode1属性添加为Static，以便您可以从客户端引用它们，然后只需通过 -

获取项目

       <asp:Panel ClientIDMode="Static" runat="server" ID="Panel1">
             //Display first and the background-image is background_black.jpg
       </asp:Panel>

       <asp:Panel ClientIDMode="Static" runat="server" ID="Panel2">
             //After the first 10 seconds this Panel2 will displayed and also it will change also the background-image to background_blue.jpg
       </asp:Panel>

<script>
    var panel1 = document.getElementById('Panel1');
</script>

因此你会做类似的事情 -

var _jsInterval = setInterval(function(){
     //do your task, change image etc.
     var panel1 = document.getElementById('Panel1');
     panel1.style.display = none; //etc
}, 10 * 1000); //10s cooldown

但是，再一次，似乎你是基于一些值改变它，所以要获得值尝试ajax调用..并在这样的成功方法上更新它 - （我使用jQuery ajax） -

 var _jsInterval = setInterval(function(){
     $.ajax({
          .....,
          success: function(data){
               //do your task, change image etc.
               var panel1 = document.getElementById('Panel1');
               panel1.style.display = none; //etc
          }
     });
}, 10 * 1000); //10s cooldown

ASP.NET：根据Timer更改.aspx的背景图像

2 个答案: