javascript number count up

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Obadiah
Forum Regular
Posts: 580
Joined: Mon Jul 31, 2006 9:13 am
Location: Ashland, KY
Contact:

javascript number count up

Post by Obadiah »

Salutations devnet!

I need to make a counter that will start counting from $1 on the first of the month of February to lets say $2000 on the last day of March... I have done searches on google for somethin like this and not been able to find anything like this....ideas anyone?
User avatar
Obadiah
Forum Regular
Posts: 580
Joined: Mon Jul 31, 2006 9:13 am
Location: Ashland, KY
Contact:

Re: javascript number count up

Post by Obadiah »

Here is what I have so far....its bascally 2 jqueries in one.

Code: Select all

<!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>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("search", "1");
  google.load("jquery", "1.4.2");
  google.load("jqueryui", "1.7.2");
</script>
<script type="text/javascript">
function tick() {

currentTime = getTime();
displayMessage(currentTime);


Clock.innerHTML = currentTime;
window.setTimeout("tick();", 100);
}

function getTime() {
var hours, minutes, seconds, ap;
var intHours, intMinutes, intSeconds;
var today;
today = new Date();
intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();

if (intHours <= 12) {
hours = intHours;
ap = "AM";
} else {
hours = (intHours-12);
ap = "PM";
}

minutes = formatDigits(intMinutes);
seconds = formatDigits(intSeconds);

return hours+":"+minutes+":"+seconds+ap;
}

function displayMessage(currTime){
newMessage = "default";
timeSplits = new Array("10:40:00PM", "10:41:00PM", "10:42:00PM", "10:43:00PM", "10:44:00PM", "10:45:00PM", "10:46:00PM", "10:47:00PM", "10:48:00PM", "10:49:00PM", "10:50:00PM");
theMessages = new Array("Fourty", "Fourty-1", "Fourty-2", "Fourty-3", "Fourty-4", "Fourty-5", "Fourty-6", "Fourty-7", "Fourty-8", "Fourty-9", "Fifty");

for (var i=0; i<timeSplits.length; i++){
dateA = new Date("January 01, 2000 "+currTime);
dateB = new Date("January 01, 2000 "+timeSplits[i]);
if (dateA >= dateB){
newMessage = theMessages[i];
}
}

strMessage.innerHTML = newMessage;
}

function formatDigits(xxx) {
if (xxx < 10)
return "0"+xxx;
return xxx;
}


window.onload = tick;
</script>
<script type="text/javascript">
(function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;

        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 1000,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 2,  // the number of decimal places to show
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
    };
})(jQuery);
</script>

<title>Title of document</title>
</head>

<body>

<script type="text/javascript"><!--
    jQuery(function($) {
        $('.timer').countTo({
            from: 50,
            to: 2500,
            speed: 1000,
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });
    });
//--></script>
$<span class="timer"></span>

<div id=Clock style="FONT-FAMILY: Verdana; FONT-SIZE: 10pt"> </div><br /><br />
<div id=strMessage style="FONT-FAMILY: Verdana; FONT-SIZE: 10pt"> </div>

</body>

</html>

User avatar
Obadiah
Forum Regular
Posts: 580
Joined: Mon Jul 31, 2006 9:13 am
Location: Ashland, KY
Contact:

Re: javascript number count up

Post by Obadiah »

ideas anyone?
Post Reply