कैसे मैं एक jQuery उलटी गिनती

Question

मैं एक jQuery उलटी गिनती करना चाहते हैं कर सकते हैं:

1. यह है कि यह एक यूआरएल

पर रीडायरेक्ट पेज डाउनलोड खत्म होने के बाद

0 तक गिनती के बाद गिनती शुरू होता है मैं कैसे कर सकता है वो करें?

Answer 1

मैंने सोचा कि मैं इसे थोड़ा तोड़ दूंगा और कुछ ऐसा प्रदान करता हूं जो उलटी गिनती और पुनर्निर्देशन दोनों करता है। आखिरकार, आप उलटी गिनती और कल के बजाय डीओएम में हेरफेर करना चाह सकते हैं।

// Our countdown plugin takes a callback, a duration, and an optional message 
$.fn.countdown = function (callback, duration, message) { 
    // If no message is provided, we use an empty string 
    message = message || ""; 
    // Get reference to container, and set initial content 
    var container = $(this[0]).html(duration + message); 
    // Get reference to the interval doing the countdown 
    var countdown = setInterval(function() { 
     // If seconds remain 
     if (--duration) { 
      // Update our container's message 
      container.html(duration + message); 
     // Otherwise 
     } else { 
      // Clear the countdown interval 
      clearInterval(countdown); 
      // And fire the callback passing our container as `this` 
      callback.call(container); 
     } 
    // Run interval every 1000ms (1 second) 
    }, 1000); 

}; 

// Use p.countdown as container, pass redirect, duration, and optional message 
$(".countdown").countdown(redirect, 5, "s remaining"); 

// Function to be called after 5 seconds 
function redirect() { 
    this.html("Done counting, redirecting."); 
    window.location = "http://msdn.microsoft.com"; 
} 

Answer 2

क्या आप वाकई आप इस के लिए जावास्क्रिप्ट का उपयोग करना चाहते हैं: इस तरह के रूप में, मैं यह है कि आप उपयोग कर सकते हैं, और अध्ययन निम्नलिखित jQuery प्लगइन के साथ आए हैं? आप बस सादे एचटीएमएल के साथ जा सकते हैं:

<meta http-equiv="refresh" content="NUMBER_OF_SECONDS_TO_WAIT; URL=http://REDIRECT_URL/"> 

इसे हेडर में रखें और आगे जावास्क्रिप्ट सक्षम किए बिना ब्राउज़र पर भी काम करेगा।

Answer 3

मैंने JQUERY, CSS और HTML का उपयोग करके एक उलटी गिनती स्क्रिप्ट बनाई है। मेरा पूरा स्रोत कोड यहां है। डेमो लिंक भी उपलब्ध है।

सीएसएस भाग:

<style type="text/css"> 
    body{ font-family: verdana; font-size:12px; } 
    a{text-decoration: none;color:blue;font-weight: bold;} 
    a:hover{color: gray;font-weight: bold;} 
    div#my-timer{width: 400px;background: lightblue; margin: 0 auto;text-align: center;padding:5px 0px 5px 0px;} 
</style> 

Jquery भाग:

<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
    <script type="text/javascript"> 
     var settimmer = 0; 
     $(function(){ 
       window.setInterval(function() { 
        var timeCounter = $("b[id=show-time]").html(); 
        var updateTime = eval(timeCounter)- eval(1); 
        $("b[id=show-time]").html(updateTime); 

        if(updateTime == 0){ 
         window.location = ("redirect.php"); 
        } 
       }, 1000); 

     }); 
    </script> 

एचटीएमएल भाग:

<div id="my-timer"> 
     Page Will Redirect with in <b id="show-time">10</b> seconds   
</div> 

डेमो लिंक: +०१२३९६०३५८९५

मुझे आशा है कि यह कोड आपके लिए सहायक होगा।

Answer 4

Himel खान के कोड उपरोक्त उदाहरण पोस्ट में, मैं सिर्फ मामले किसी में

if(updateTime == 0)

बदल

if(updateTime <= 0)

पर पुनः निर्देशित किए जाने के बाद वापस बटन दबाता। अन्यथा यह नकारात्मक संख्याओं में शुरू होगा और फिर से पुनर्निर्देशित नहीं होगा।

यह ध्यान रखना महत्वपूर्ण है कि आपके पास इस परिवर्तन के साथ लक्षित पृष्ठ पर कोड नहीं होना चाहिए या यह लूप रीफ्रेश होगा। यदि आप यह परिवर्तन करते हैं, तो उलटी गिनती के साथ पृष्ठ पर केवल स्क्रिप्ट शामिल करें।

मुझे लगता है वहाँ एक बेहतर तरीका यह सुधार तो हो सकता है किसी और को पूरा करने के एक बेहतर समाधान

कोड के लिए धन्यवाद जोड़ सकता है।

Answer 5

यहां मेरा उदाहरण जोनाथन सैम्पसन के उदाहरण के आधार पर है। Jsfiddle लिंक यहाँ है।http://jsfiddle.net/njELV/1/

jQuery:

var countdown = { 
    startInterval : function() { 
     var count = 1800; // 30 minute timeout 
     var currentId = setInterval(function(){ 
      $('#currentSeconds').html(count); 
      if(count == 30) { // when there's thirty seconds... 
       $('#expireDiv').slideDown().click(function() { 
         clearInterval(countdown.intervalId); 
         $('#expireDiv').slideUp();      
         window.location.reload(); 
         //or whatever you'd like to do when someone clicks on the div (refresh your session etc). 
       }); 
      } 
      if (count == 0) { 
       window.location.href = '/logout.php'; 
      } 
      --count; 
     }, 1000); 
     countdown.intervalId = currentId; 
    } 
}; 
countdown.startInterval(); 

/* 
Then each time an ajax call is made to fetch a page 
*/ 
if(typeof countdown.oldIntervalId != 'undefined') { 
     countdown.oldIntervalId = countdown.intervalId; 
     clearInterval(countdown.oldIntervalId); 
     countdown.startInterval(); 
     $('#expireDiv').slideUp(); 
    } else { 
     countdown.oldIntervalId = 0; 
    } 

सीएसएस:

#expireDiv { 
    width: 100%; 
    text-align: center; 
    background-color: #63AFD0; 
    padding: 10px; 
    margin: 0; 
    border: 1px solid #024A68; 
    color: #024A68; 
    font-weight: bold; 
    font-size: 125%; 
    box-shadow: -1px -1px 5px 1px #5E8C9E inset; 
    -moz-box-shadow: -1px -1px 5px 1px #5E8C9E inset; 
    -webkit-box-shadow: -1px -1px 5px 1px #5E8C9E inset; 
    display:none; 
    cursor: pointer; 
} 

HTML:

<div id="expireDiv"> 
    Your session is about to expire. You will be logged out in <span id="currentSeconds"></span> seconds. If you want to continue, please save your work and click <u>here</u> to refresh the page. 
</div> 

Answer 6

इस लिंक उपयोगी jQuery Countdown समर्थन सभी भाषा

बस :)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.countdown.js"></script> 
<script type="text/javascript"> 
     $('#mySelector').countdown({since: new Date(2010, 12-1, 25)}); 
</script> 

Answer 7

आप jQuery animate समारोह का उपयोग कर सकते

// Enter num from and to 
$({countNum: 8000}).animate({countNum: 0}, { 
    duration: 8000, 
    easing:'linear', 
    step: function() { 
    // What todo on every count 
    console.log(Math.floor(this.countNum)); 
    }, 
    complete: function() { 
    console.log('finished'); 
    } 
}); 

http://jsbin.com/upazas/1/edit

Answer 8

आप उपयोग कर सकते हैं इस

<div id="counter"></div> 

<script type="text/javascript" src="http://yourjavascript.com/88131111995/jquery.countdown.js"></script> 

    $(document).ready(function() { 
    $('#counter').countdown({ 
     until: 5, 
     compact: true, 
     onExpiry: function() { alert('bye!!'); } 
     }); 
    }); 

Answer 9

मैं 0 के बिना इस सरल समाधान है:

<script> 
    sec = 10; 
    counter = document.getElementById('counter'); 
    counter.innerText = sec; 
    i = setInterval(function(){ 
     --sec; 

     if (sec === 1){ 
      clearInterval(i); 
      window.location = document.getElementById('retry').href; 
     } 
     counter.innerText=sec; 
     },1000); 
    </script> 

उपरोक्त उदाहरण में, रीडायरेक्ट URL दस्तावेज है, जो आप इसे मनचाहे मान के साथ की जगह ले सकती में हाइपरलिंक की href विशेषता से निकाला जाता है।

चेकआउट इस DEMO