JS content for time

Asked

Viewed 25 times

1

I want to make a JS code to display certain content related to the days, as in the example below.

day 1 = html a day 2 = html b day 3 = html c

Type, when it is on day 1, will appear an html content a and when finish the 24 hours goes to day 2 and displays html b and so on.

I just want to know the basis of how to run it, someone can give me a help?

javascript

  • How many different days are there? one per week, one per month, or a fixed number that goes around?

  • And another question, whether the page reload the user sees the same content as that day or could be other content?

1 answer

0


Only with JS is not a good way to do this, the ideal would be a backend that brings render only the content of the day.

But for you to understand a simplistic way it could be like this

$(document).ready(function(){
  var date = new Date()
  var today = date.getDate()
  //isso e so preguica de copiar e colar 30 divs, mas da pra entender a ideia geral
  lazyLoad()
  
  //mesmo nome de classe ali de baixo na linha 15
  var $todayContent = $('.content-day-'+today)
  $todayContent.show()
})

function lazyLoad(){
    var $main = $('#main')
    for(var i=0; i<31; i++){
      var day = i+1
      $main.append('<div class="content content-day-'+day+'">'+
        '<h2>Sou o Conteudo do dia '+day+'</h2>'+
      '</div>')
    }
  }
.content {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">

</div>

Ai Voce needs to fit your needs, like a setInerval to automatically switch to the day at 00:00 and so on, depends on your needs.

  • Thanks bro, that’s right, abs.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.