Countdown

Elvis L · December 19, 2014

Sveiki, ko Jūs varētu ieteikt, sakarā ar countdown timeri.

Ideja tāda, ka iet pieņemsim 10 sec countdown, ieteicams javascriptā, lai ir vizuāli redzams laiks, pēc attiecīgā countdown atveras lapa ( piemērs, līdzīgi kā lattelecom hotspotam )

internetā meklēju, bet neatradu vajadzīgo risinājumu, ceru uz Jūsu ieteikumiem un palīdzību, Paldies

e-remit · December 19, 2014

var c = 10;

var interval = setInterval(function() {

c--;

funkcija_kas_ieraksta_timeri_lapaa(c);

if (!c) {

clearInterval(interval);

window.location = 'http://google.com/';

}

}, 1000);

Sasa · December 19, 2014

sveiks, https://github.com/hilios/jQuery.countdown ,te labāk ar angulāru http://siddii.github.io/angular-timer/

Edited December 19, 2014 by Sasa

Elvis L · December 19, 2014

Paldies Jums, jautājums Tev Sasa, šim kodam ir jau klāt kāda redirect funckija, vai izmantot parastu header redirect?

Sasa · December 19, 2014

Ja izmantosi pirmo tad tur piemēros var atrast http://hilios.github.io/jQuery.countdown/examples/advanced-coupon-site.htmlun tur būs 'finish.countdown' šajā eventā dari ko gribi kad laiks iztecēs.

Otrajā pie finish-callback norādi funkciju kas izpildīsies, kad laiks beigsies.

Šie countdown'i nenāk kopā ar redirect funkcijām, kas ir arī pareizi, jo redirektēt nav viņu uzdevums.

Elvis L · December 19, 2014

Paldies.

Vēl viens jautājums, es atradu šādu pavisam vienkārši risinājumu

<p>You will be redirected in <span id="counter">10</span> second(s).</p>
<script type="text/javascript">
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)<=0) {
location.href = 'login.php';
}
i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },1000);
</script>

Kā tehniski pareizi izdarīt lai location.href = 'login.php'; vietā ir mans lapas saturs, līdzīgi kā php piemnēram

<?php

if ($count == "0"){

echo "<html>lasdla</html>";

}

Sasa · December 19, 2014

apmēram šādi http://stackoverflow.com/questions/1309452/how-to-replace-innerhtml-of-a-div-using-jquery

Edit:

Izdomā līdz galam ko gribi, sākumā gribi redirektēt uz citu lapu, tagad jau tajā pašā lapā rādīt kaut kādu saturu., pēc laika iztecēšanas.

Edited December 19, 2014 by Sasa

Elvis L · December 19, 2014

Es sapratu to, ka primāro lapu nevaru pats norādīt, tādēļ man esošajā vienā lapā, jārāda divi saturi, viens kas būs kamēr iet taimeris, otrs pati lapa, paldies par piemēru,bet lapa ir mazliet apjomīgāka par pāris vārdiem, tapēc laikam īsti nederēs

Sasa · December 19, 2014

šai jQuery metodei būtu jāder šajā gadījumā http://api.jquery.com/html/#html-htmlString

Elvis L · December 19, 2014

Galīgi netieku galā, es parādīšu kodu

<p>Lapa būs pieejama pēc <span id="counter">10</span> sekundēm(es).</p>
<script type="text/javascript">
function countdown() {
    var i = document.getElementById('counter');
    if (parseInt(i.innerHTML)<=0) {
       location.href = 'login.php';// seit vajadzetu radut zemak esoso saturu
    }
    i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },1000);
</script>


<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'> 
    <title>xxxx</title>
     <link rel='stylesheet' href='assets/normalize.css'>
    <link rel='stylesheet' href='assets/style.css'>
    <meta name='viewport' content='width:device-width,initial-scale=1.0'>  
</head>
<body>
<div class='container'>
    
    <div class='center-box'>
        <div class='box'>
            <h1>xxxx</h1>
            <a class="button" href='$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)'>SAŅEMT</a>
            
        </div>
        <ul class='lang-switch'>
            <li class='active'>
                <a href='#'>LV</a>
            </li>
            <li>
                <a href='$(link-login-only)?target=ru&dst=$(link-orig-esc)'>RU</a>
            </li>
            <li>
                <a href='$(link-login-only)?target=en&dst=$(link-orig-esc)'>EN</a>
            </li>
        </ul>
    </div>
    <div class='logo'>
        <img src='xxx' />
    </div>
</div>


</body>
</html>

e-remit · December 19, 2014

Pirmkārt, tam, kas pirms "<!DOCTYPE html>", ir jābūt body sadaļā. Lai kaut kas parādās/pazūd, vari caur jquery show()/hide() parādīt/noslēpt.

Lasi docus: http://api.jquery.com/show/, http://api.jquery.com/html/

Precīzu kodu tev rakstīt priekšā nav jēgas, tāpat nelasi.

Elvis L · December 22, 2014

<p>Lapa būs pieejama pēc <span id="counter">10</span> sekundēm(es).</p>
<script type="text/javascript">
function countdown() {
    var i = document.getElementById('counter');
    if (parseInt(i.innerHTML)<=0) {
	   $( "p" ).show( "slow" );
    }
    i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },1000);
</script>
<p style="display: none">
<html>
<head>
    <meta charset='utf-8'> 
    <title>WI-FI DEVA</title>
     <link rel='stylesheet' href='assets/normalize.css'>
    <link rel='stylesheet' href='assets/style.css'>
    <meta name='viewport' content='width:device-width,initial-scale=1.0'>  
</head>
<body>
<!DOCTYPE html>
<div class='container'>
    
    <div class='center-box'>
        <div class='box'>
            <h1>WI-FI DEVA</h1>
            <a class="button" href='$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)'>SAŅEMT</a>
            
        </div>
        <ul class='lang-switch'>
            <li class='active'>
                <a href='#'>LV</a>
            </li>
            <li>
                <a href='$(link-login-only)?target=ru&dst=$(link-orig-esc)'>RU</a>
            </li>
            <li>
                <a href='$(link-login-only)?target=en&dst=$(link-orig-esc)'>EN</a>
            </li>
        </ul>
    </div>
    <div class='logo'>
        <img src='assets/logo.png' />
    </div>
</div>


</body>
</html>
</p>

Mēģināju šādi, diemžēl nestrādā, pēc countdowna, nekas nenotiek, ļoti gaidu Jūsu ieteikumus, paldies par palīdzību

Edited December 22, 2014 by Elvis L

Sasa · December 22, 2014

Šādi arī nestrādās. Sakārto html'u. Dokuments nevar beigties ar </p> un sākties ar <p> visam saturam jābūt iekš <body>, dokumentam jāsākas ar <!DOCTYPE html>

e-remit · December 22, 2014

Paskaties šeit: http://www.w3schools.com/tags/tag_doctype.asp, kādai jābūt HTML struktūrai. Vai arī tu speciāli ignorē to, ko tev raksta?

Elvis L · December 22, 2014

<html>
<head>
<meta charset='utf-8'> 
<title>WI-FI DEVA</title>
<link rel='stylesheet' href='assets/normalize.css'>
<link rel='stylesheet' href='assets/style.css'>
<meta name='viewport' content='width:device-width,initial-scale=1.0'>  
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function countdown(){
 
    var i = document.getElementById('counter').innerHTML;
    if(parseInt(i) <= 0 ){
  $("#counter_outer").hide( "slow" );
  $("#hidden").show( "slow" ); 
    }
 document.getElementById("counter").innerHTML = parseInt(i)-1;
 
}

setInterval(function(){ countdown(); },1000);
</script> 
</head>
<body>
<p id="counter_outer">Lapa būs pieejama pēc <span id="counter">10</span> sekundēm(es).</p>
<div id="hidden" style="display: none;">
<div class='container'>
    
    <div class='center-box'>
        <div class='box'>
            <h1>WI-FI DEVA</h1>
            <a class="button" href='$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)'>SAӅMT</a>
            
        </div>
        <ul class='lang-switch'>
            <li class='active'>
                <a href='#'>LV</a>
            </li>
            <li>
                <a href='$(link-login-only)?target=ru&dst=$(link-orig-esc)'>RU</a>
            </li>
            <li>
                <a href='$(link-login-only)?target=en&dst=$(link-orig-esc)'>EN</a>
            </li>
        </ul>
    </div>
    <div class='logo'>
        <img src='assets/logo.png' />
    </div>
</div>
</div>
</body>
</html>

Apmēram šādi?

Bet tā pat neiet, pēc 10 sekundēm nekas nenotiek

Sign In

Countdown

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation