In this example, multiple instances of the Uize.Widget.SegmentDisplay.Seven widget class are being wired up to create a classic LED style digital clock.
There are six seven segment display widgets being used - two for the hours display, two for the minutes display, and two for the seconds display. After the page loads and is initialized, a timer/interval is started that updates the clock's display every second. For every update, the current time is queried using JavaScript's Date object and formatted to an HHMMSS string using the Uize.Date.Formatter.format method of the Uize.Date.Formatter module, specifying the string value '{hh}{mm}{ss}' for the date format. From the formatted string, the first character is used to set the value of the hours display's tens widget, and the second character is used to set the value of the hours display's ones widget. In a similar manner, the third and fourth characters of the formatted date string are used for the minutes display's two seven segment display widgets, and the last two characters of the formatted date string are used for the seconds display's two widgets.
Now, because the clock is always updated to the current time when the updater function is triggered by the timer, the clock remains accurate and doesn't drift. The timer may be unreliable as a result of load on the computer, but the worst that will happen is that the clock may not update for a while before once again updating to the correct time.