走动的时钟

今天有朋友问我，原生怎么写走动的时钟。一开始我以为需求是墙上的那种时钟，然后我就说：可能在样式上花点时间，你面试的时间不够，没写出来也正常（离线机试1h，三题，分别是：走动的时钟、选项卡、轮播图）。后面他说不是的，只要是一个能走的时钟就可以了。
我以为是类似这样子的

实际是这样子的

顿时，我就不想说话了。按道理来讲，这三道题应该是不难的，特别是这个时钟是能做出来才对的。。。

代码实现如下：

• html结构：

 <div id="time"></div>

• css样式：

 body {
    
    
       background: #000;
       font-size: 50px;
       color: #fff;
      }

• js逻辑：

	//需求：获取系统时间：时分秒，用图片来表示时间，不断刷新(定时器)
        var div = document.getElementById('time');
        function gettime() {
    
     //11:42:45
            var time = new Date();
            var hours = time.getHours();//时
            var mins = time.getMinutes();//分
            var secs = time.getSeconds();//秒
            var str = '' + toDb(hours) + toDb(mins) + toDb(secs);//组成字符串
            var imgstr = '';
            var sum = 0;
            for (var i in str) {
    
    
                sum++;
                imgstr += `${
      
      str[i]}`;//纯数字时钟
                if (sum % 2 == 0) {
    
    
                    imgstr += ':';//获得时间字符串样式
                }
            }
            div.innerHTML = imgstr.slice(0, -1);//切割后，得到xx:xx:xx
        }
        gettime();
        setInterval(gettime, 1000);

另外两题，大家可以自己写一下，练练手