na bepaalde tijd, een bericht tonen
Is het volgende mogelijk, en zo ja hoe?
Als een gebruiker komt op mijn website, wil ik dat er automatisch na 5 minuten een bepaalde text ofafbeelding moet worden getoond. Vervolgens weer 5 minuten wachtenen dan weer iets anders. Alles wat getoond word hoeft maar 20seconden zichtbaar te zijn.
Is dat mogelijk, zo ja hoe?
Ik zou eerder in de hoek van JS kijken als je dit opeens wilt. SetTimeout bijvoorbeeld.
enig idee hoe ik het dan kan opbouwen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="myFunction()">
<script>
function myFunction() {
setTimeout(function(){alert("Hallo")},5000);
if (confirm('Select a button'))
myFunction2();
else myFunction2();
}
function myFunction2() {
setTimeout(function(){alert("Christiaan")},10000);
if (confirm('Select a button'))
myFunction3();
else myFunction3();
}
function myFunction3() {
setTimeout(function(){alert("Dag")},20000);
}
</script>
Uitproberen<br />
Na 2 seconden: Hallo<br />
Na 10 seconden: Christiaan<br />
Na 20 seconden: Dag<br />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="myFunction()">
<script>
function myFunction() {
setTimeout(function(){alert("Hallo")},5000);
if (confirm('Select a button'))
myFunction2();
else myFunction2();
}
function myFunction2() {
setTimeout(function(){alert("Christiaan")},10000);
if (confirm('Select a button'))
myFunction3();
else myFunction3();
}
function myFunction3() {
setTimeout(function(){alert("Dag")},20000);
}
</script>
Uitproberen<br />
Na 2 seconden: Hallo<br />
Na 10 seconden: Christiaan<br />
Na 20 seconden: Dag<br />
</body>
</html>
dit gaat via confirm boxen, wil het graag als alert box
Gewijzigd op 08/07/2013 16:54:16 door christiaan de kleine
dan pas je de confirm() toch aan naar een alert()?
Wat ben je daar van plan? Heb je ergens een array van boodschappen of zo?
Moet dat blijven draaien? indien ja, is dit cyclisch (na de laatste boodschap terug de eerste ...)?
Of moet die informatie van de server komen (bv. met Ajax ophalen)?
Het zou te zot zijn om 1 functie per boodschap te maken. Best 1 functie die het regelt en de informatie ergens opgeslagen (in een array of zo).
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html>
<head>
<style>
#secret {
position: absolute;
display: none;
border: 1px solid #000;
right: 30px;
top: 30px;
width: 200px;
height: 200px;
}
</style>
<script>
var index = 0; //
window.onload = function() { // dit wordt uitgevoerd als de pagina geladen is
// over 5 minuten wordt dit getriggerd
var t = setTimeout(
showPicture,
5 * 1000 * 60 // in milliseconden
);
}
function showPicture() {
var div = document.getElementById('secret');
div.innerHTML = "Hallo, een berichtje";
div.style.display = 'block';
// over 20 seconden terug verstoppen
var t = setTimeout(
hidePicture,
20 * 1000
);
}
function hidePicture() {
var div = document.getElementById('secret');
div.style.display = 'none';
// opnieuw
var t = setTimeout(
showPicture,
5 * 1000 * 60 // eventueel trek je hier die 20 seconden nog af ...
);
}
</script>
</head>
<body>
<h1> Een titel </h1>
<p>Lorem ipsum en de rest ...</p>
<div id="secret"></div>
</body>
</html>
<html>
<head>
<style>
#secret {
position: absolute;
display: none;
border: 1px solid #000;
right: 30px;
top: 30px;
width: 200px;
height: 200px;
}
</style>
<script>
var index = 0; //
window.onload = function() { // dit wordt uitgevoerd als de pagina geladen is
// over 5 minuten wordt dit getriggerd
var t = setTimeout(
showPicture,
5 * 1000 * 60 // in milliseconden
);
}
function showPicture() {
var div = document.getElementById('secret');
div.innerHTML = "Hallo, een berichtje";
div.style.display = 'block';
// over 20 seconden terug verstoppen
var t = setTimeout(
hidePicture,
20 * 1000
);
}
function hidePicture() {
var div = document.getElementById('secret');
div.style.display = 'none';
// opnieuw
var t = setTimeout(
showPicture,
5 * 1000 * 60 // eventueel trek je hier die 20 seconden nog af ...
);
}
</script>
</head>
<body>
<h1> Een titel </h1>
<p>Lorem ipsum en de rest ...</p>
<div id="secret"></div>
</body>
</html>
Toevoeging op 09/07/2013 17:01:07:
...