javascript - Show Div After 30 Sec - Stack Overflow

admin管理员组

文章数量:1415664

I'm trying to make a wele message for the user.

My planning is:

• if the user visits the first time the page then show a div message after 30 sec.;
• if the user already visited the page there is no need to show div message.

I have writed this code:

My cookies code

<script type="text/javascript">
function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}
</script>

I'm trying to make a wele message for the user.

My planning is:

• if the user visits the first time the page then show a div message after 30 sec.;
• if the user already visited the page there is no need to show div message.

I have writed this code:

My cookies code

<script type="text/javascript">
function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}
</script>

My display code

<script type="text/javascript">
function showbox() {
    document.getElementById("apDiv1").style.visibility = "visible";

}
setTimeout("showbox()", 30000); // after 5 secs
</script>
<script type="text/javascript">
if (!readCookie('visitedPreviously')) {
    showbox();
    //document.write(' Your Message Goes Here And You See It Only Once ');
    createCookie('visitedPreviously', 'visitedPreviously', 3); // 365 days persistence
}

//eraseCookie('visitedPreviously');  // FOR TEST PURPOSES
</script>

My problem is when a visitor visits the page first time, the div shows immediately (30 sec.) - Doesn't work

But when a returning visitor visits again the page the div shows after 30 sec.

I want for a first time user visit to show a div message after 30 sec.

Please help me.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 2, 2015 at 10:36 Tiberiu C. 3,52311 gold badge3333 silver badges4141 bronze badges asked Jun 2, 2015 at 9:06 Shanmuganathan ShanshayanShanmuganathan Shanshayan 6977 bronze badges 3

• The reason that it doesn't work is that you pass in the call to the function. that call is immediately evaluated. Use setTimeout(showBox, 30000); – Hauke S Commented Jun 2, 2015 at 9:10
• change return null to return false in readCookie . maybe this will call showbox function first .. i think not problem with setTimeout function – Nishit Maheta Commented Jun 2, 2015 at 9:16
• I think the divs shows immediately because if (!readCookie('visitedPreviously')) { is getting executed. And there is NO problem with setTimeout – Shaunak D Commented Jun 2, 2015 at 9:16

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

According to your explanation you want to show a dialog after 30 seconds only to new user. So you need to change your code into below:

<script type="text/javascript">
function showbox() {
    document.getElementById("apDiv1").style.visibility = "visible";
}
if (!readCookie('visitedPreviously')) { //if he/she is a new user
     setTimeout("showbox()", 30000); // after 30 secs
    //document.write(' Your Message Goes Here And You See It Only Once ');
    createCookie('visitedPreviously', 'visitedPreviously', 3); // 365 days persistence
}

//eraseCookie('visitedPreviously');  // FOR TEST PURPOSES
</script>

You need to remove quotes around showbox.

This the syntax of the setTimeout fnction,

setTimeout(function,milliseconds,param1,param2,...)

setTimeout expects the first parameter to be a function call.

function showbox() {
  document.getElementById("apDiv1").style.visibility = "visible";
  alert();

}
setTimeout(showbox, 30000); // after 5 secs

if (!readCookie('visitedPreviously')) {
  //I added a set timeout here which is what you need
  setTimeout(showbox, 30000); // after 5 secs
  //document.write(' Your Message Goes Here And You See It Only Once ');
  createCookie('visitedPreviously', 'visitedPreviously', 3); // 365 days persistence
}

//eraseCookie('visitedPreviously');  // FOR TEST PURPOSES

Remove the quote and the brackets in the "showbox()". Like this:

setTimeout(showbox, 30000);

I've corrected your code below, you had the setTimeout being called before the cookie had been checked!

function showbox() {
    document.getElementById("apDiv1").style.visibility = "visible";
}

if (!readCookie('visitedPreviously')) {
    setTimeout("showbox()", 30000); // after 30 seconds
    //document.write(' Your Message Goes Here And You See It Only Once ');
    createCookie('visitedPreviously', 'visitedPreviously', 3); // 365 days persistence
}

Please try it out.

You don't need quotes around showbox:

setTimeout(showbox, 30000);

Docs: https://developer.mozilla/en-US/docs/Web/API/WindowTimers/setTimeout

You should modify your display code to:

<script type="text/javascript">
function showbox() {
    document.getElementById("apDiv1").style.visibility = "visible";

}
setTimeout(showbox, 30000); // after 5 secs
</script>
<script type="text/javascript">
if (!readCookie('visitedPreviously')) {
    //I added a set timeout here which is what you need
    setTimeout(showbox, 30000); // after 5 secs
    //document.write(' Your Message Goes Here And You See It Only Once ');
    createCookie('visitedPreviously', 'visitedPreviously', 3); // 365 days persistence
}

//eraseCookie('visitedPreviously');  // FOR TEST PURPOSES
</script>

Please note the change is made above is:

//I added a set timeout here which is what you need
setTimeout(showbox, 30000); // after 5 secs

It is not a good practice to send a function as a string as you have done in the set timeout.

You need to modify your code to this

<script type="text/javascript">
function showbox() {
if (!readCookie('visitedPreviously')) {
    document.getElementById("apDiv1").style.visibility = "visible";
    //document.write(' Your Message Goes Here And You See It Only Once ');
    createCookie('visitedPreviously', 'visitedPreviously', 3); // 365 days 
}

//eraseCookie('visitedPreviously');  // FOR TEST PURPOSES

}
setTimeout(showbox, 30000); // after 5 secs
</script>

本文标签： javascriptShow Div After 30 SecStack Overflow