You can check out demos bellow, using Clock and Counter modes for Flip Skin, with various types of settings and styles you can change and see how they look on 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-one").smartTimerCounter({
      skin: "Flip",
      mode: "Counter",
      display: {
        uiOverride: true,
        ui_width: 65,
        ui_height: 100,
        ui_margin: 5,
        ui_radius: 5,
        ui_fontSize: "80px",
        ui_fontWeight: "900",
        ui_background: "#dddddd",
        ui_color: "#aa0000",
        ui_labelColor: "#ffffff",
        ui_labelFontSize: "24px",
        ui_labelFontWeight: "900"
      },
      model: {
        layout: "D|h:m:s",
        method: "seconds",
        value: 10368000
      }
    });
  });
</script>

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

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: "Flip",
      mode: "Counter",
      display: {
        uiOverride: true,
        ui_height: 90,
        ui_fontSize: "145px",
        ui_fontWeight: "900",
        ui_background: "#aa0000",
        ui_color: "#ffffff",
        ui_labelColor: "#aa0000"
      },
      model: {
        layout: "Long",
        method: "date",
        value: new Date(2015, 9, 3)
      }
    });
  });
</script>

Demo 3: Numbers module, count dow with random decimal step

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-three").smartNumberCounter({
      skin: "Flip",
      display: {
        uiOverride: true,
        ui_width: 120,
        ui_height: 180,
        ui_margin: 5,
        ui_radius: 3,
        ui_fontSize: "160px",
        ui_fontWeight: "900",
        ui_background: "rgba(128, 0, 255, .95)",
        ui_labelColor: "rgba(128, 0, 255, .95)",
        ui_labelFontSize: "32px",
        ui_labelFontWeight: "900"
      },
      model: {
        digits: 6,
        decimals: 2,
        method: "down",
        value: 5321.10,
        update: "random",
        stepValue: {from: 0, to: 1}
      }
    });
</script>

Demo 4: Number module, count down with $ sign and random step

Change this to see how the counter/clock looks with different backgrounds.
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#stac-example-four").smartNumberCounter({
      skin: "Flip",
      display: {
        uiOverride: true,
        ui_width: 50,
        ui_height: 70,
        ui_fontSize: "65px",
        ui_fontWeight: "900",
        ui_background: "#aa0000",
        ui_color: "#ffffff",
        ui_labelColor: "#ffffff",
        ui_shadow: "none",
        ui_textShadow: "none",
        ui_labelFontSize: "22px",
        ui_labelTextShadow: "none",
        ui_font: 'Garamond, Baskerville, "Times New Roman", serif'
      },
      model: {
        digits: 10,
        decimals: 2,
        method: "down",
        value: 32000011.10,
        charBefore: "$",
        update: "random",
        stepValue: {from: 10, to: 50}
      }
    });
  });
</script>