Smart Timer and Counter

Smart Timer and Counter - Preview Image
Plugin Screenshots Buy On CodeCanyon

This demo includes only some of the possible skins included with the plugin, and due to the space constraint, we can’t demonstrate everything here.

To see how plugin can be set and configured, check out the plugin page on the CodeCanyon, or check out the screenshots page. Links to home page and screenshots are available above this text under the plugin preview image.

Demo 1: Clock Mode, Time Layout, Simple Skin

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-one").smartTimerCounter({
        skin: "Simple",
        mode: "Clock",
        display: {
            style: "crystal-light",
            labels: "bottom",
            hideDots: true,
            space: "12px"
        },
        model: {
            layout: "Time"
        },
    });
  });
</script>

Demo 2: Clock Mode, DateTime Layout, Animated Skin, Serbian Language

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-two").smartTimerCounter({
        skin: "Animated",
        mode: "Clock",
        language: "Serbian",
        display: {
            style: "crystal-light",
            labels: "bottom",
            hideDots: false,
            space: "16px"
        },
        model: {
            layout: "DateTime"
        },
    });
  });
</script>

Demo 3: Clock Mode, Custom Layout, Animated Skin, Fade Animation

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-three").smartTimerCounter({
        skin: "Animated",
        mode: "Clock",
        language: "English",
        display: {
            style: "crystal-light",
            labels: "bottom",
            hideDots: true,
            space: "8px",
            animation: "Fade"
        },
        model: {
            layout: "D h m s"
        },
    });
  });
</script>

Demo 4: Clock Mode, DateTime Layout, Circular Skin, Custom Future Start Date

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-four").smartTimerCounter({
        skin: "Circular",
        mode: "Clock",
        display: {
            labels: "bottom",
            hideDots: true,
            space: "8px"
        },
        model: {
            layout: "DateTime",
            value: new Date(2022, 10)
        },
    });
  });
</script>

Demo 5: Clock Mode, DateTime Layout, Inline Skin

This is example for placing the clock inline like this: . Very easy to do and it should be span so it can be placed in line.
Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-five").smartTimerCounter({
        skin: "Inline",
        mode: "Clock",
        display: {
            labels: "hide",
            hideDots: false
        },
        model: {
            layout: "DateTime"
        },
    });
  });
</script>

Demo 6: Clock Mode, Custom Layout, Custom Skin, Fade Animation

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-six").smartTimerCounter({
        skin: "Custom",
        mode: "Clock",
        language: "English",
        display: {
            labels: "bottom",
            hideDots: true,
            space: "8px",
            animation: "Fade"
        },
        model: {
            layout: "D h m s"
        },
    });
  });
</script>

Demo 1: Counter Mode, Normal Layout, Simple Skin, Countdown from 1036800 seconds

Demo 2: Counter Mode, DateTime Layout, Animated Skin, SlideUp, Countdown to Date October 4 2022

Demo 3: Counter Mode, Custom Layout, Animated Skin, Fade Animation, Countup 4400 seconds

Demo 4: Counter Mode, DateTime Layout, Circular Skin, Custom Colors, Countdown to Date October 4 2022

Demo 5: Counter Mode, DateTime Layout, Inline Skin, Countdown to Date October 4 2022

This is example for placing the clock inline like this: . Very easy to do and it should be span so it can be placed in line.

Demo 6: Counter Mode, Normal Layout, Animated Skin, SlideUp, Elapsed time from Date December 20 2013

Change this to see how the counter/clock looks with different backgrounds.

Demo 1: Counter Mode, Normal Layout, Countdown from 1036800 seconds

Change this to see how the counter/clock looks with different backgrounds.

Demo 2: Counter Mode, Normal Layout, SlideDown, Countdown to Date October 4 2022

Change this to see how the counter/clock looks with different backgrounds.

Demo 3: Counter Mode, Custom Layout, Fade Animation, Countup 4400 seconds

Change this to see how the counter/clock looks with different backgrounds.

Demo 4: Counter Mode, Long Layout, SlideUp, Elapsed time from Date January 25 2006

Change this to see how the counter/clock looks with different backgrounds.

Demo 1: Counter Mode, Normal Layout, Countdown from 1036800 seconds

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-plone").smartTimerCounter({
        skin: "Plain",
        mode: "Counter",
        display: {
            labels: "bottom",
            hideDots: true,
            space: "12px",
            ui_blockRounded: "6px",
            ui_blockBackground: "rgba(7, 118, 187, 0.9)",
            ui_labelWeight: "bold",
            ui_labelColor: "rgba(119, 244, 242, 0.85)"
        },
        model: {
            layout: "Normal",
            method: "seconds",
            value: 1036800
        }
    });
  });
</script>

Demo 2: Counter Mode, Normal Layout, SlideDown, Countdown to Date October 4 2022

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-pltwo").smartTimerCounter({
        skin: "Plain",
        mode: "Counter",
        display: {
            labels: "hide",
            hideDots: true,
            space: "8px",
            animation: "SlideDown",
            ui_blockRounded: "5px",
            ui_blockBackground: "rgba(128, 128, 128, .7)",
            ui_blockBoxShadow: "0 0 3px 0 rgba(32, 32, 32, 0.7)",
            ui_blockColor: "#000000",
            ui_labelWeight: "bold",
            ui_labelColor: "#ffffff"
        },
        model: {
            layout: "Normal",
            method: "date",
            value: new Date(2022, 9, 3)
        },
    });
  });
</script>

Demo 3: Counter Mode, Custom Layout, Fade Animation, Countup 4400 seconds

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-plthree").smartTimerCounter({
        skin: "Plain",
        mode: "Counter",
        display: {
            labels: "bottom",
            hideDots: true,
            space: "8px",
            seconds_blockBackground: "rgba(174, 4, 179, 0.62)"
        },
        model: {
            layout: "Minutes",
            method: "target",
            value: 4400
        }
    });
  });
</script>

Demo 4: Counter Mode, Long Layout, SlideUp, Elapsed time from Date January 25 2006

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-plfour").smartTimerCounter({
        skin: "Plain",
        mode: "Counter",
        display: {
            labels: "top",
            space: "20px"
        },
        model: {
            layout: "Full",
            method: "elapsed",
            value: new Date(2006, 0, 24)
        }
    });
  });
</script>

Countdown until the end of today, event tied to the progress bar, Custom Skin

Start Date:
End Date:
Elapsed: seconds
Remaining: seconds
 
0%
Change this to see how the counter/clock looks with different backgrounds.

Demo 1: Number counter with start, stop, reset buttons

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-event-info input[type=button]").click(function(e){
      var method = jQuery(this).data("method");

      if (method === "start") {
        jQuery("#stac-example-one").smartNumberCounter("start");
      } else if (method === "stop") {
        jQuery("#stac-example-one").smartNumberCounter("stop");
      } else if (method === "reset") {
        jQuery("#stac-example-one").smartNumberCounter("reset");
      }
    });

    jQuery("#stac-example-one").smartNumberCounter({skin: "Plain"});
  });
</script>

Demo 2: Number counter with manual update, button to add value and button to reset to value


Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-event-bar input[type=button]").click(function(e){
      var method = jQuery(this).data("method");

      if (method === "add") {
        var add = parseInt(jQuery("#add-number").val(), 10);
        jQuery("#stac-example-two").smartNumberCounter("add", add);
      } else if (method === "reset") {
        var value = parseInt(jQuery("#reset-number").val(), 10);
        jQuery("#stac-example-two").smartNumberCounter("reset", value);
      }
    });

    jQuery("#stac-example-two").smartNumberCounter({
      skin: "Animated",
      model: {
        update: "manual",
        value: 10000
      }
    });
  });
</script>

Demo 1: Animated Skin, Counting up from zero, default settings

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-nuone").smartNumberCounter({
        skin: "Animated",
        display: {
            hideDots: true,
            space: "6px"
        }
    });
  });
</script>

Demo 2: Plain Skin, Count up from 3203453000.10, 2 decimal places and random step period

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-nutwo").smartNumberCounter({
        skin: "Plain",
        display: {
            ui_blockBackground: "rgba(224, 0, 0, .8)",
            ui_blockWeight: "900"
        },
        model: {
            digits: 12,
            decimals: 2,
            value: 3203453000.10,
            charBefore: "$",
            update: "random",
            stepValue: {from: 0.2, to: 5}
        },
    });
  });
</script>

Demo 3: Custom Skin, Count down from 32000011.10, 2 decimal places and random step period

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-nuthree").smartNumberCounter({
        skin: "Custom",
        display: {
            ui_blockBackground: "rgba(4, 179, 95, 0.7)",
            ui_blockColor: "#F83434"
        },
        model: {
            digits: 10,
            decimals: 2,
            method: "down",
            value: 32000011.10,
            charBefore: "$",
            update: "random",
            stepValue: {from: 10, to: 50}
        }
    });
  });
</script>

Demo 4: Inline Skin, Count down from 32000011.10, 2 decimal places and random step period

This is example for placing number counter inline. And based on this your balance of is going down fast.
Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-nufour").smartNumberCounter({
        skin: "Inline",
        display: {
            style: "black"
        },
        model: {
            digits: 10,
            decimals: 2,
            method: "down",
            value: 32000011.10,
            charBefore: "$",
            update: "random",
            stepValue: {from: 10, to: 50}
        }
    });
  });
</script>