reactlogic
/
blitz


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>&laquo;TimeTo&raquo; jQuery plug-in example</title>

    <!--[if lt IE 9]>
	<script>
		document.createElement('figure');
		document.createElement('figcaption');
	</script>
	<![endif]-->
	<link href="timeTo.css" type="text/css" rel="stylesheet"/>

    <style>
        pre {
            margin-bottom: 10px;
            padding-left: 10px;
            border-left: 3px #DDD solid;
        }
    </style>
</head>
<body>
    <h1>&laquo;TimeTo&raquo; jQuery plugin demo</h1>

    <h2>Countdown timer</h2>

    <h3>Set delay in seconds</h3>
    <pre>
$('#countdown').timeTo(120, function(){ alert('Countdown finished'); }); </pre>

    <div id="countdown-1"></div>
    <p><button id="reset-1" type="button">Reset</button></p>

    <div class="clock"></div>
    <div class="clock"></div>

    <h3>Hide hours</h3>
    <pre>
$('#countdown').timeTo({
    seconds: 100,
    displayHours: false
}); </pre>

    <div id="countdown-11"></div>


    <h3>Set delay to specyfied datetime</h3>
    <pre>
$('#countdown').timeTo(new Date('<span id="date-str"></span>')); </pre>

    <div id="countdown-2"></div>

    <h3>Set captions and dark theme</h1>
    <pre>
$('#countdown').timeTo({
    timeTo: new Date(new Date('<span id="date2-str"></span>')),
    displayDays: 2,
    theme: "black",
    displayCaptions: true,
    fontSize: 48,
    captionSize: 14
}); </pre>

    <div id="countdown-3"></div>

    <p>&nbsp;</p>
    <h2>Digital clock</h2>
    <pre>
$('#clock-1').timeTo();</pre>

    <div id="clock-1"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="node_modules/jquery/dist/jquery.min.js"><\/script>')</script>
    <script src="jquery.time-to.js"></script>
    <script>
        /**
         * Set timer countdown in seconds with callback
         */
        $('#countdown-1').timeTo(120, function(){
            alert('Countdown finished');
        });
        $('#reset-1').click(function() {
            $('#countdown-1').timeTo('reset');
        });

        /**
         * Hide hours
         */
        $('#countdown-11').timeTo({
            seconds: 100,
            displayHours: false
        });

        var date = getRelativeDate(20);

        document.getElementById('date-str').innerHTML = date.toString();

        /**
         * Set timer countdown to specyfied date
         */
        $('#countdown-2').timeTo(date);

        date = getRelativeDate(7, 9);
        document.getElementById('date2-str').innerHTML = date.toString();

        /**
         * Set theme and captions
         */
        $('#countdown-3').timeTo({
            timeTo: date,
            displayDays: 2,
            theme: "black",
            displayCaptions: true,
            fontSize: 48,
            captionSize: 14
        });

        /**
         * Simple digital clock
         */
        $('#clock-1').timeTo();

        function getRelativeDate(days, hours, minutes){
            var date = new Date((new Date()).getTime() + 60000 /* milisec */ * 60 /* minutes */ * 24 /* hours */ * days /* days */);

            date.setHours(hours || 0);
            date.setMinutes(minutes || 0);
            date.setSeconds(0);

            return date;
        }
    </script>
</body>
</html>