Clock moving
Today, a friend asked me how to write a moving clock. At first I thought the demand was the kind of clock on the wall, and then I said: Maybe spend some time on the style, you don’t have enough time for the interview, and it’s normal if you didn’t write it out (1h offline machine test, three questions, respectively: walk around Clock, tabs, carousel diagrams). Later he said no, as long as it is a clock that can go.
I thought it was something like this
It's actually like this
Suddenly, I didn't want to talk anymore. Logically speaking, these three questions should not be difficult, especially if the clock can be made. . .
The code is implemented as follows:
- html structure:
<div id="time"></div>
- css style:
body {
background: #000;
font-size: 50px;
color: #fff;
}
- js logic:
//需求：获取系统时间：时分秒，用图片来表示时间，不断刷新(定时器)
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);