ASP.NET：基于Timer更改.aspx的背景图像

Question

I created a program that will display the target and achievement of a group of Media and Subscription. So I have a timer, where the data will change every 10 seconds. My questions is, how can I also update or change the background-image of .aspx every 10 seconds?.

I have two background named: background_black.jpg and background_blue.jpg

Here's my CSS:

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

and here's my source in .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>

And lastly, here's my code for the 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;
        }

Thank you for advance!

Answer 1

You can use simple javascript to achieve this

On load, use settimeout method to change the background after 10 seconds

Settimeout method

Answer 2

You can't update it from the Server Side. You have you use client side update or update callback. Because until the client requests, server does nothing. Better you use client side libraries. The best suited for your case is JavaScript. Here would be a simple example of it -

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

add ClientIDMode1 attribute of use panels to be Static , so that you can refer them from client side then you simply get the items by -

       <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>

Therefore you would do something like -

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

But again, it seems that you are changing it based on some value, so to get the value try ajax call..and update it on success method like this - (I used 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