闲⾔少叙，书归正⽂，因为 gif 格式的图⽚只能上传 5M，所以我只能切成两块，中间还删减了⼀些，⼤家凑合着看，不要打我，⼤家可以把源码拷下来，源码在最下⾯，⾃⼰运⾏康康，嘿嘿，话不多说，上图：
效果主要分成了三个部分，第⼀个是进⼊页⾯的时候平铺的时钟效果，当点击按钮的时候，变为圆盘时钟，左边的⽂字以键盘敲击的⽽⽅式出现。我来依次讲解三个部分：
我们的html和css都⾮常少，那就意味着js代码很多了，但是没关系，我都是⽤的原⽣js实现的，只要有⼀丢丢基础就可以了。
//存放数据
var monthContent = [];
var dayContent = [];
var weekContent = [];
var hourContent = [];
var minuteContent = [];
var secondsContent = [];
//存放⽣成dom元素
var monthDom=[];
var dayDom=[];
var weekDom=[];
var hourDom=[];
var minutesDom=[];
var secondsDom=[];
//⼆维数组，0存放数据，1存放dom元素
var allSet = [
[monthContent,monthDom],
[dayContent,dayDom],
[weekContent,weekDom],
[hourContent,hourDom],
[minuteContent,minutesDom],
[secondsContent,secondsDom]
];
我们三个部分中的第⼀部分便是平铺效果的时钟：其实⾮常简单，只要循环alllSet中的所有数据创建对应的dom元素，插⼊class类名就可以了，样式我已经在css中写好了。
function init(){
for(var i=0;i<allSet.length;i++){
for(var j=0;j<allSet[i][0].length;j++){
var temp = createLabel(allSet[i][0][j]);
clock.appendChild(temp);
allSet[i][1].push(temp);
}
}
}
//创建dom元素
function createLabel(text){
var oDiv = ateElement("div");
oDiv.innerText = text;
oDiv.classList.add("label");
return oDiv;
}
还有⼀个⾮常重要的步骤就是获取当前的时间，并把当前的时间设置成不同的颜⾊。
var labels = ElementsByClassName("label");
//先循环⼀下，把所有的样式都变为⿊⾊和正常状态下的字体
for(var i=0;i<labels.length;i++){
labels[i].style.fontWeight = "normal"
labels[i].lor = "#000";
}
//获取当前时间
var now = new Date();
var month = Month();
var day = Date();
var week = Day();
var hour = Hours();
var minute = Minutes();
var seconds = Seconds()
//把当前时间放到⼀个数组中，和我们定义数据相对应，时间正好是对应数据的下表
var nowValue = [month,day-1,week,hour,minute,seconds];
//把当前时间设置成黄⾊和加粗效果
for(var i=0;i<nowValue.length;i++){
var index = nowValue[i];
allSet[i][1][index].lor = "yellow"
allSet[i][1][index].style.fontWeight = "bolder"抖音号怎么更改
}
}
当⽂档加载完成的时候就开始运⾏。
init();
changePosition();
setInterval(() => {
getTime();
}, 100);
}
顺便在这⾥解释⼀下changePosition()这个函数（我⾃⼰封装的，别害怕哈哈哈）实现了把当前的dom元素都改为绝对定位再放到原来的位置上。
再为按钮实现以⼀个点击事件，当点击按钮的时候，将其转换为圆盘的时钟状态。我们需要将整个屏幕旋转90deg，是因为我们要⾼亮显⽰的字是横着的，并且⼀直在右侧固定。
function btnClick(){
//改变状态的变量
isChange = true;
//旋转90deg
ansform = "rotate(90deg)"
//延迟200毫秒展⽰⽂字
setTimeout(() => {
showText()
}, 200);
}
在获取当前时间的getTime⽅法中，我们添加这样的判断，计算每⼀个时间的旋转⾓度。我们需要注意的是：我们在之前将整个屏幕旋转
我们在之前将整个屏幕旋转了90deg，对应的x轴和y轴也会旋转
到了最后⼀部分，我们的⽂案啦。⽂案有逐个闪烁效果，每次换⾏以后原地闪烁三次，通过空格判断是否换⾏，通过英⽂的