ASP.NET：基於Timer更改.aspx的背景圖像

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>

最后，這是我的計時器代碼：

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秒后更改背景

設置超時方法

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