通过CSS结合JavaScript实现的罗马模拟时钟，时钟的表盘是通过罗马数字符号的金属架构组成的，相当有金属质感和古老风格的一款时钟效果。并且支持鼠标悬浮显示阿拉布数字的时间提示。实现这一款时钟很简单，下方是基本的HTML代码结构，只需要定义好罗马时钟的外观结构，并通过CSS对这些结构设置样式，然后通过JS时分秒指针按照固定规律移动即可。
<div class="clock"> <div class="clock__digits"> <div class="clock__digit clock__digit--1"> <div class="clock__digit-stroke"></div> </div> <div class="clock__digit clock__digit--2"> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> </div> <div class="clock__digit clock__digit--3"> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> </div> <div class="clock__digit clock__digit--4"> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> </div> <div class="clock__digit clock__digit--5"> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> </div> <div class="clock__digit clock__digit--6"> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> </div> <div class="clock__digit clock__digit--7"> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> </div> <div class="clock__digit clock__digit--8"> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> </div> <div class="clock__digit clock__digit--9"> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> </div> <div class="clock__digit clock__digit--10"> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> </div> <div class="clock__digit clock__digit--11"> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> </div> <div class="clock__digit clock__digit--12"> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> <div class="clock__digit-stroke"></div> </div> </div> <div class="clock__rim"></div> <div class="clock__bars"> <div class="clock__bar"></div> <div class="clock__bar"></div> <div class="clock__bar"></div> <div class="clock__bar"></div> <div class="clock__bar-hub"></div> </div> <div class="clock__rim"></div> <div class="clock__hands"> <div class="clock__hand clock__hand--hr"></div> <div class="clock__hand clock__hand--min"></div> <div class="clock__hand-hub"></div> </div> </div>
