• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud - Virtual Private Server VPS
+1 głos
633 wizyt
pytanie zadane 15 grudnia 2021 w JavaScript przez gatka84 Bywalec (2,150 p.)

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

3 odpowiedzi

+1 głos
odpowiedź 16 grudnia 2021 przez VBService Ekspert (256,600 p.)
wybrane 23 czerwca 2022 przez gatka84
 
Najlepsza

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

komentarz 25 czerwca 2022 przez VBService Ekspert (256,600 p.)
edycja 26 czerwca 2022 przez VBService

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');
  }
}

 

komentarz 26 czerwca 2022 przez VBService Ekspert (256,600 p.)

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');
  } 
}

 

komentarz 26 czerwca 2022 przez gatka84 Bywalec (2,150 p.)

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

komentarz 27 czerwca 2022 przez VBService Ekspert (256,600 p.)
edycja 27 czerwca 2022 przez VBService

Tu jest dość dobrze opisany dataset  laugh

 

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 smiley

<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

1
komentarz 27 czerwca 2022 przez gatka84 Bywalec (2,150 p.)
mmm ciekawe może to wykorzystam przy nowym projekcie :), dziękuje kolejny raz za wyjaśnienie i podzielenie się wiedzą
0 głosów
odpowiedź 15 grudnia 2021 przez qax Dyskutant (8,060 p.)
edycja 15 grudnia 2021 przez qax
<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.

0 głosów
odpowiedź 15 grudnia 2021 przez gatka84 Bywalec (2,150 p.)

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

komentarz 16 grudnia 2021 przez qax Dyskutant (8,060 p.)

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

Podobne pytania

0 głosów
1 odpowiedź 342 wizyt
pytanie zadane 7 lipca 2022 w C i C++ przez RufinB Bywalec (2,020 p.)
0 głosów
2 odpowiedzi 563 wizyt
pytanie zadane 19 lipca 2015 w Algorytmy przez demo094 Użytkownik (630 p.)
0 głosów
0 odpowiedzi 193 wizyt

93,327 zapytań

142,325 odpowiedzi

322,396 komentarzy

62,657 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...