There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.Close
This may take a few seconds.

Clock without variable binding

This example uses a JavaScript expression in an action value to create a mobile-friendly interactive clock.

The syntax for inserting an expression is: {= javascript expression}. An expression is simply the right-hand side of an equation in JavaScript, which, in this case brings back a string containing the local time for rendering (or in other words, drawing).

There are explanatory notes for this clock further down the page.

Clock without variable binding

  • The draw event on #clock2 is a special Cause event. Draw events are triggered when an element is first drawn on the page. In this example, we put a CSS selector before it as we also trigger it later on in the code to simulate a ticking action.
  • trigger runs the specified event on the same element. In this example, the draw event is run on the element #clock2.

Same example but with explanatory comments:

body:not(.clockOff) #clock:draw {    /* Run every 1s after #clock element is drawn if clockOff class is not in body tag. */
render: {= new Date().toLocaleTimeString() =}; /* Draw the time. */
trigger: draw after 1s; /* Run this event again after one second to keep the clock ticking. */

#clock:touchstart, #clock:mousedown { /* Runs when you mousedown or touch the clock. */
add-class: .clockPress; /* Put press styling on the clock. */
 prevent-default: true; /* Needed for the touch event to work consistently on mobile. */

#clock:touchend, #clock:mouseup { /* Runs when you come up from touching or mouse-up on the clock. */
body {
toggle-class: .clockOff; /* Add or remove the clockOff class and styling from the body tag. */
remove-class: .clockPress; /* Remove the press styling on the clock. */
trigger: draw after stack; /* Run the draw event on the clock element after the other actions are done. */
prevent-default: true; /* Needed for the touch event to work consistently on mobile. */

Note that you can also use JavaScript expressions in target selectors, conditionals and inside components.