Topheader met atuomatische datum?

Status
Niet open voor verdere reacties.
femke98

femke98

Meubilair
Lid geworden
16 dec 2006
Berichten
6.915
Hoi,
Ik ben een website aan het maken. De stichting wil graag dat de datum in de topheader komt.
Maar hoe ga ik dat realiseren?

Ik weet, de css is:
#topheader-wrap {
background: #2277bb;
}

maar daarmee ben ik er natuurlijk nog niet.

De website is trouwens: https://www.zoekhetbedrijf.com/
(nee, klopt, de naam heeft niets met de stichting te maken, het is een van mijn eigen domeinnamen ;) , maar dat terzijde)

Wie kan mij hiermee helpen?

Edit: heb nu wel de datum in de widget.
 
Laatst bewerkt:
Dat kan je met PHP toch in je Wordpress-templates bouwen?

Kijk eens naar de functie strftime()
 
Wil je een korte of lange datum in het Nederlands?
Bij een lange datum zou dit kunnen.
PHP: 
$dagen = [
    "zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag"
];
$maanden = [
    "januari", "februari", "maart", "april", "mei", "juni", "juli",
    "augustus", "september", "oktober", "november", "december"
];
echo $dagen[intval(date("w"))] . " " . date("d") . " " . $maanden[intval(date("m"))-1] . " " . date("Y");

update. dagen aangepast want in php beginnen dagen bij zondag.

Resultaat is : donderdag 24 juni 2021

Als je 2-letterige dagen en/of 3-letterige maanden wilt dan kan je dit in de arrays aanpassen.
 
Laatst bewerkt:
Waarom niet via strftime en de juiste locales? ;)
 
Yes...

PHP: 
<?php

setlocale(LC_TIME, "nl_NL");
//setlocale(LC_TIME, "en_EN");

$time = "Het is vandaag: %e %B %Y, %H:%M ";
echo strftime($time);
?>
 
Het is inderdaad een stuk korter ;) Er zit wel een dingetje in want bij %e staat "Not implemented as described on Windows".
Alternatief is hieronder maar die geeft in de eerste 9 dagen een 2-cijferige dag. Bijvoorbeeld 3 juni wordt hiermee getoond als: donderdag 03 juni 2021. Ik heb niet verder gekeken, misschien zijn er modifiers die dit oplossen.
PHP: 
date_default_timezone_set("Europe/Amsterdam");
setlocale(LC_TIME, 'NL_nl');
echo strftime("%A %d %B %Y", time());
 
Laatst bewerkt:
Ah, dit staat op php.net ais platform onafhankelijk bij %e
PHP: 
date_default_timezone_set("Europe/Amsterdam");
setlocale(LC_TIME, 'NL_nl');
$format = "%e %B %Y, %H:%M";
if (strtoupper(substr(PHP_OS, 0, 3)) == 'WIN') {
    $format = preg_replace('#(?<!%)((?:%%)*)%e#', '\1%#d', $format);
}
$time = "Het is vandaag: " . $format;
echo strftime($time);
 
Zo, dat zijn codes! Ikzelf had de code die nu in de widget staat:

Code: 
<div id="klokbalk" style="background-color:transparent; color:#2277bb;"></div>

<script language="javascript1.2" type="text/javascript">
<!--

var Teller=null
function toontijd () {
var nu = new Date()
var maand = nu.getMonth()
if (maand == 0)
maand = "Januari";
else if (maand == 1)
maand = "Februari";
else if (maand == 2)
maand = "Maart";
else if (maand == 3)
maand = "April";
else if (maand == 4)
maand = "Mei";
else if (maand == 5)
maand = "Juni";
else if (maand == 6)
maand = "Juli";
else if (maand == 7)
maand = "Augustus";
else if (maand == 8)
maand = "September";
else if (maand == 9)
maand = "Oktober";
else if (maand == 10)
maand = "November";
else if (maand == 11)
maand = "December";

var datum = nu.getDate()

var dag = nu.getDay()
if (dag == 0)
dag = "Zondag";
else if (dag == 1)
dag = "Maandag";
else if (dag == 2)
dag = "Dinsdag";
else if (dag == 3)
dag = "Woensdag";
else if (dag == 4)
dag = "Donderdag";
else if (dag == 5)
dag = "Vrijdag";
else if (dag == 6)
dag = "Zaterdag";
var uren = nu.getHours()
if (uren <=9)
uren = "0"+uren
var minuten = nu.getMinutes()
if (minuten <=9)
minuten = "0"+minuten
var seconden = nu.getSeconds()
if (seconden <=9)
seconden = "0"+seconden
var tijdWaarde = "" + dag
tijdWaarde += " " + datum
tijdWaarde += " " + maand
tijdWaarde += " " + uren
tijdWaarde += ":"+minuten
tijdWaarde += ":"+seconden
document.getElementById('klokbalk').innerHTML=tijdWaarde;
teller =
setTimeout("toontijd()",1000)
}

toontijd()
//-->
</script>
Maar hoe krijg ik jullie code dan in die blauw balk waar nu het emailadres staat?
 
Ja gebruikt nu Javascript. Ook dat kan, maar onthoud wel dat dit de tijd gebruikt van de bezoeker zelf.
Vaak wel gewenst, maar misschien soms niet.
 
Laatst bewerkt:
Voordeel van JS in dit script is dat de seconden blijven doortellen ( setTimeout("toontijd()",1000) )
 

Kopie en pasta.....
https://jsfiddle.net/bvtfancy/

De div met ID klokbalk is de placeholder voor de klok.

Die Javascript kan je ook in een apart .js bestand zetten.
Die PHP-code is verder niet van toepassing als je expliciet een echte vooruit-tikkende klok wilt hebben.

Met PHP kan je normaliter geen aftikkende klokken maken en wordt de (server)tijd opgehaald bij elke refresh van de website. Bij JavaScript wordt de tijd van de gebruiker gebruikt.
 
Laatst bewerkt:
De code die je geeft is vreemd. Hieronder een wat netter opzet. Dit werkt goed.
Code: 
<span class="klokbalk" style="background-color:transparent; color:#2277bb;"></span>

<script type="text/javascript">
function CurrentDateTime () {
    let dag = [
        "zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag"
    ];
    let maand = [
        "januari", "februari", "maart", "april", "mei", "juni", "juli",
        "augustus", "september", "oktober", "november", "december"
    ];
    let dt = "", nu = new Date();
    // dagnaam
    dt += dag[nu.getDay()];
    // datum
    dt += " " + nu.getDate();
    dt += " " + maand[nu.getMonth()];
    dt += " " + nu.getFullYear();
    // tijd
    dt += ":" + nu.getHours();
    dt += ":" + ((nu.getMinutes() < 10) ? "0" : "") + nu.getMinutes();
    dt += ":" + ((nu.getSeconds() < 10) ? "0" : "") + nu.getSeconds();
    return dt;
}
// interval: elke seconde de function CurrentDateTime
setInterval(function() {
    document.querySelector(".klokbalk").innerText = CurrentDateTime();
}, 1000);
</script>

Zet de regel <span class="klokbalk" style="background-color:transparent; color:#2277bb;"></span> in de html waar je de klok wilt hebben. Zet het script ergens eronder, het beste is helemaal onderaan, vlak boven </body>

update: nog wat netter gemaakt, het script is nu 25 regels i.p.v. de 65 regels die je gaf ;)

Wil je geen dagnaam? Zet dan // voor deze regel
Code: 
// dt += dag[nu.getDay()];

Wil je 2-letterige dagnaam en/of 3-letterige maandnaam?
Dit kan je zelf wijzigen in de eerste 7 regels van de function.
 
Laatst bewerkt:
Thanx zover.
De code die ik al had kan ik dus ook gewoon gebruiken.

Nog een vraag:
zie screenshot, dat is de html van de bovenste blauwe balk.
De datum moet uiteraard niet blauw zijn, maar dat is makkelijk te veranderen.

Waar zet ik nu die code neer in de html?

sorry voor al deze vragen.
 

Bijlagen

  • topheader.png
    topheader.png
    76,7 KB · Weergaven: 25
  • blauwe balk.png
    blauwe balk.png
    55,6 KB · Weergaven: 15
Mijn advies: Trial and error.
Je wilt het naast of i.p.v. het mailadres? Dan is het niet echt heel lastig omdat je al een bestaande plek in je code hebt gevonden.
 
De code die ik al had kan ik dus ook gewoon gebruiken.
Klik om te vergroten...
Zou ik zeker niet doen, het is code van een schoolopdracht uit een tijdperk waarbij er nog rekening gehouden moest worden met oude Internet Explorers, bah.

Zet de regel <span class="klokbalk" style="background-color:transparent; color:#2277bb;"></span> in de html op de plek waar je de klok wilt hebben.

Zet regel <script type="text/javascript"> tot en met </script> ergens eronder, het beste is helemaal onderaan, vlak boven </body> maar je kan het ook direct onder de <span> van de klok zetten.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan