javascript zmiana tekstu w divie i wyświetlanie całego diva przez zadany okres np 24h ktoś ma pomysł?

Question

Witam potrzebuje włączać i wyłączać diva na określony czas np 24h i zmieniać tekst w nim wyświetlany. Jest to mini banerek umiejscowiony na zdjęciu

<div class="info">
              <p>nowy</p>
              <p>towar</p>
              <p>12-12-2021</p>
            </div>

zmienianym tekstem ma być tylko data tj 12-12-2021 na np 21-12-2021 i wyświetlać całego diva 24h i następnie go ukryć.

Answer 1

Zakładając, że data w tag-u <p> jest datą "bazową" to można zapisać tak, np.:

 

<div class="gallery-item kolonia-mala">
  <a href="">
    <div class="card">
      <div class="info" id="info">
        <p>nowy</p>
        <p>towar</p>
        <p>16-12-2021</p>
      </div>
    </div>
  </a>
</div>

const HOURS_24 = 24 * 60 * 60 * 1000;
let pElement;

window.addEventListener('DOMContentLoaded', load);

function load() {
  pElement = document.querySelector('div.info p:last-child');
  const arrTime = pElement.textContent.split('-'),
        setTime = new Date(arrTime[2], parseInt(arrTime[1], 10) - 1, arrTime[0]),
        offTime = new Date(setTime.getTime() + HOURS_24),
        curTime = Date.now();
  
  if (curTime >= offTime.getTime())
    pElement.closest('div.info').style.display = 'none';
  
  //console.log(curTime, setTime.getTime(), offTime.getTime(), pElement.textContent)
}

 

 

[ Converting a datetime string to timestamp in Javascript ]  [ Funkcja closest ] 

Comments

Dla przedziału czasowego proponuje taki zapis, gdzie w html-u podana jest data bazowa a przedział czasowy -3 dni i +3 dni od tej daty bazowej oblicza javascript, np.

<style>
  .hide {
    display: none;
  }
</style>
<div class="gallery-item kolonia-mala">

  <a href="">
    <div class="card hide" data-start="23-06-2022">
      <div class="info">
        <p>nowy</p>
        <p>towar</p>
        <p></p>
      </div>
    </div>
  </a>
  <a href="">
    <div class="card hide" data-start="25-06-2022">
      <div class="info">
        <p>nowy</p>
        <p>towar</p>
        <p></p>
      </div>
    </div>
  </a>  
  <a href="">
    <div class="card hide" data-start="07-06-2022">
      <div class="info">
        <p>nowy</p>
        <p>towar</p>
        <p></p>
      </div>
    </div>
  </a>
  <a href="">
    <div class="card hide" data-start="29-06-2022">
      <div class="info">
        <p>nowy</p>
        <p>towar</p>
        <p></p>
      </div>
    </div>
  </a>

</div>

const HOURS_24 = 24 * 60 * 60 * 1000,
      THREE_DAYS = HOURS_24 * 3;
 
window.addEventListener('DOMContentLoaded', load);
 
function load() {
  const elements = document.querySelectorAll('.card div.info p:last-child');
 
  for (const element of elements) {     
    const arrTime = element.closest('.card').dataset.start.split('-'),
          setTime = new Date(arrTime[2], parseInt(arrTime[1], 10) - 1, arrTime[0]),
          /*offTime = new Date(setTime.getTime() + HOURS_24),*/
          minTime = new Date(setTime.getTime() - THREE_DAYS),
          maxTime = new Date(setTime.getTime() + THREE_DAYS),
          curTime = Date.now(),
          offerFrom = formatDayMonth(minTime),
          offerTo = formatDayMonth(maxTime);
 
    element.textContent = `Oferta ważna od dnia ${offerFrom} (od północy) do dnia ${offerTo} (do północy)`;
    //console.log(minTime.getTime(), curTime, maxTime.getTime());
 
    if (curTime >= minTime.getTime() && curTime <= maxTime.getTime())
      element.closest('.card').classList.remove('hide');
    else
      element.closest('.card').classList.add('hide');
  }
 
  function formatDayMonth(dateValue) { // "dd.mm"
    return ((new Date(dateValue.getTime())).getDate()).toString().padStart(2, '0') + '.'
      + (parseInt((new Date(dateValue.getTime())).getMonth()) + 1).toString().padStart(2, '0');
  }
}

 

---

Przykład gdy w php-ie obliczymy przedział czasowy na podstawie daty bazowej z bazy danych i zapiszemy jako atrybut typu data dla danego elementu html
(data-start="22-06-2022" data-stop="28-06-2022")

 

<style>
  .hide {
    display: none;
  }
</style>
<div class="gallery-item kolonia-mala">
 
  <a href="">
    <div class="card hide" data-start="22-06-2022" data-stop="28-06-2022">
      <div class="info">
        <p>nowy</p>
        <p>towar</p>
        <p></p>
      </div>
    </div>
  </a>
  <a href="">
    <div class="card hide" data-start="25-06-2022" data-stop="01-07-2022">
      <div class="info">
        <p>nowy</p>
        <p>towar</p>
        <p></p>
      </div>
    </div>
  </a>  
  <a href="">
    <div class="card hide" data-start="07-06-2022" data-stop="13-06-2022">
      <div class="info">
        <p>nowy</p>
        <p>towar</p>
        <p></p>
      </div>
    </div>
  </a>
  <a href="">
    <div class="card hide" data-start="26-06-2022" data-stop="02-07-2022">
      <div class="info">
        <p>nowy</p>
        <p>towar</p>
        <p></p>
      </div>
    </div>
  </a>
 
</div>

window.addEventListener('DOMContentLoaded', load);

function load() {
  const elements = document.querySelectorAll('.card div.info p:last-child');

  for (const element of elements) {     
    const arrMinTime = element.closest('.card').dataset.start.split('-'),
          arrMaxTime = element.closest('.card').dataset.stop.split('-'),
          minTime = new Date(arrMinTime[2], parseInt(arrMinTime[1], 10) - 1, arrMinTime[0]),
          maxTime = new Date(arrMaxTime[2], parseInt(arrMaxTime[1], 10) - 1, arrMaxTime[0]),
          curTime = Date.now(),
          offerFrom = arrMinTime[0]+'.'+arrMinTime[1],
          offerTo = arrMaxTime[0]+'.'+arrMaxTime[1];

    element.textContent = `Oferta ważna od dnia ${offerFrom} (od północy) do dnia ${offerTo} (do północy)`;
    //console.log(minTime.getTime(), curTime, maxTime.getTime());

    if (curTime >= minTime.getTime() && curTime <= maxTime.getTime())
      element.closest('.card').classList.remove('hide');
    else
      element.closest('.card').classList.add('hide');
  } 
}

 

---

Super dziękuje bardzo tego szukałam :) i mam pytanko czy w html wykorzystuje się jakoś do czegoś

data-start=""

czy tylko to jest dla JavaScript

.dataset.start

bo nie spotkałam się z data-start w html

---

Tu jest dość dobrze opisany dataset  

 

BTW, za jego pomocą można też "ostylować" elementy html

<div>Lorem</div>
<div data-type="error">Lorem</div>
<div>Lorem</div>

[data-type="error"] {
  color: red;
}

 

a nawet 

<style>
  [data-type="error"] {
    color: red;
  }
  [data-type="confirm"] {
    color: lime;
  }
</style>

<div>Lorem</div>
<div data-type="error">Lorem</div>
<div>Lorem</div>

<script>
  setTimeout(() => {
    document.querySelector('[data-type]').dataset.type = 'confirm';
  }, 3000);
</script>

 

Tu masz ciekawy przykład, gdzie tworzony jest object audio, który nie jest dodawany do DOM, ale można do niego dodawać m. in. dataset

audio_player.setAttribute('data-index-form-playlist', -1);

tu data jest dodawany za pomocą setAttribute i "czytany" getAttribute

---

mmm ciekawe może to wykorzystam przy nowym projekcie :), dziękuje kolejny raz za wyjaśnienie i podzielenie się wiedzą

Answer 2

<div class="info">
  <p>nowy</p>
  <p>towar</p>
  <p>12-12-2021</p>
</div>

var divElement = document.querySelector('div.info');
var pElement = document.querySelector('div.info p:last-child');
var preSetTime = new Date(2021,11,15);
var setTime = preSetTime.getTime(); 
var currentTime = Date.now();
var differenceTime = 24 * 60 * 60 * 1000;
if (setTime < currentTime + differenceTime) {
	pElement.innerText = '21-12-2021';
  if (confirm('Zmieniono datę. Czy chcesz ukryć diva?')) {
  	divElement.style.display = 'none';
  }
} else {
	pElement.innerText = '12-12-2021';
	alert('nie zmieniono daty');
}

Nie wiem czy o to Ci chodziło - założyłem, że div będzie ukrywany do 24 godzin plus aktualny czas mierząc od daty podanej w zmiennej preSetTime.

Answer 3

Dzięki wielkie za odpowiedź. Niestety nie działa tzn podaje info, że nie zmieniono daty z alertu.

Od 2 godzin przerabiam i próbuje ale nic nie działa tzn próbowałam zastąpić

var divElement = document.querySelector('div.info');

na

var divElement = document.getElementById("info");

<div class="gallery-item kolonia-mala">
       <a href=""><div class="card"></a>
             <div class="info" id="info">
                 <p>nowy</p>
                 <p>towar</p>
                 <p></p>
              </div>
        </div>
</div>

żeby po id wybrało ale też nie

następnie z pustą zawartością <p>

i zmianą w javascript

var divElement = document.querySelector('div.info');
var pElement = document.querySelector('div.info p:last-child');
var preSetTime = new Date(2021,11,15);
var setTime = preSetTime.getTime(); 
var currentTime = Date.now();
var differenceTime = 24 * 60 * 60 * 1000;
if (setTime < currentTime + differenceTime) {
    pElement.innerText = '';
  if (confirm('Zmieniono datę. Czy chcesz ukryć diva?')) {
    divElement.style.display = 'none';
  }
} else {
    pElement.innerText = '';
    alert('nie zmieniono daty');
}

 

ale nie wiem czy tak można :/

ale za każdym razem dostaje info z alertu: nie zmieniono daty

po dodaniu do kodu

pElement.innerText = newLocal;

błędu nie podaje ale wyświetla

date z

pElement.innerText = '12-12-2021';

i kończą mi się pomysły

Comments

Dziwne bo sprawdziłem na JSFiddlu i działa - na obecną chwilę wyświelta się alert "Zmieniono datę. Czy chcesz ukryć diva?"...