Prosta ale przydatna funkcja, dopełniająca na początku zero np. przy dopełnieniu miesiąca czy dni. Zamiast 1 robimy 01 (dzień/miesiąc)
// Do testów ustawiam 5 sierpnia
const now = new Date("Aug 5, 2019 10:10:10");
const zerofill = value => (value < 10 && value > -1 ? '0' : "") + value;
// Dzień: 05 (zamiast 5)
console.log(`Dzień: ${zerofill(now.getDate())}`);
// Miesiąc: 08 (zamiast 8)
console.log(`Miesiąc: ${zerofill(now.getMonth()+1)}`);
Co to jest ten baner, to nic innego zdjęcie znajdujące się w div, które przesuwa się z góry na dół i ponownie na górę i tak w nieskończoność.
Oczywiście nic nas nie ogranicza można dodać np. jakiś tekst 🙂
Najpierw prosty html, na potrzeby tego przykładu kontener będzie centrowany w pionie i poziomie na całej stronie.
<div class="container">
<div class="image-bgr">
<img decoding="async" src="http://www.grzegorztomicki.pl/images/lwow/992/IMG_0014.jpg" alt="" class="image-responsive"/>
</div>
</div>Losowo generowany kolor, a do czego może się to przydać spytacie, a no nie wiem, tak może dla zabawy ;). Ja zrobię coś innego czyli zmiana koloru tła diva po otworzeniu strony, oraz oraz zmiana koloru podczas zmiany wielkości strony.
Najpierw style.
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
.box {
width: 200px;
height: 200px;
}Mały html
<div class="box"></div>No i oczywiście javascript. Najpierw stwórzmy funkcję do zmiany kolor.
Naszym celem jest dodanie przy każdym artykule liczby komentarzy, które są dodane do artykułu.
Najpierw konfigurujemy nasz kod. W zakładce
TWOJEKONTO.disqus.com/admin/settings/community/znajdują się trzy pola "Zero comments", "One comment", "Multiple comments".
Jeżeli chcemy mieć PL tłumaczenie należy je w tych miejscach zmienić.
Niestety w Disqus nie przewidzieli, że nasz język jest tak skomplikowany i występują pewne trudności, przydało by się jeszcze jedno miejsce na wpis.
Bo: 0 komentarzy, 1 komentarz, 2 komentarze ale gdzie miejsce na wpisać 10 komentarzy 🙂
No niestety nie da się tego obejść ja ostatnie pole zmodyfikowałem na taki wpis - komentarzy: 10
Teraz czas na konkrety, na dole strony dodajemy przed zamknięciem body
<script id="dsq-count-scr" src="//kodywig.disqus.com/count.js" async>Oczywiście poprzednio było HEX na RGB to oczywiście logiczne jest aby też podać i konwersję w drugą stronę 😉
function rgbToHex(rgb) {
let hex = Number(rgb).toString(16);
if(hex.length < 2) {
hex = '0' + hex;
}
return hex;
}
function colorHex(r,g,b) {
return rgbToHex(r) + rgbToHex(g) + rgbToHex(b);
}A wywołanie to zwyczajne przekazanie funkcji trzech liczb na które składa się kolot rgb(0, 161, 255).
console.log(colorHex(0, 161,255));
// => w wyniku otrzymujemy #00a1ff