我在javascript中的函数重叠不正确

出于某种原因，我的javascript的两个“部分”相互干扰。我知道是这样的，因为如果你删除颜色变化部分，时钟就会突然出现。预期结果是时钟显示在颜色前面。我无法确定为什么会发生这种情况。谢谢

var div=document.getElementById（“完整”）；
功能板（n，宽度，z）{
z=z | |“0”；
n=n+''；
返回n.length>=width？n：新数组（width-n.length+1）；
}
函数getclockColor（）{
var today=新日期（）；
var h=String（today.getHours（））；
var m=String（today.getMinutes（））；
var s=String（today.getSeconds（））；
var color='#'+pad（h，2）+pad（m，2）+pad（s，2）；
返回颜色；
}
函数changeColor（）{
div.style.backgroundColor=getclockColor（）；
}
设置间隔（changeColor，1000）；
功能时钟（）{
变量时间=新日期（），
小时=时间。getHours（），
分钟=时间。getMinutes（），
秒=时间。getSeconds（）；
document.querySelectorAll（'.clock'）[0].innerHTML=harold（小时）+“：”+harold（分钟）+“：”+harold（秒）；
功能哈罗德（替补）{
if（标准值<10）{
standIn='0'+standIn
}
返回站；
}
}
设置间隔（时钟，1000）
正文{
溢出：隐藏；
保证金：0；
填充：0；
}
#满满的{
位置：绝对位置；
身高：100%；
宽度：100%；
}
.钟{
字号：4em；
z指数：1；
颜色：红色；
}

将
#full
元素的
z-index
设置为
-1
，将其推到时钟后面


正文{
溢出：隐藏；
保证金：0；
填充：0；
}
#满满的{
位置：绝对位置；
身高：100%；
宽度：100%；
z指数：-1；
}
.钟{
字号：4em；
颜色：红色；
}

var div=document.getElementById（“完整”）；
功能板（n，宽度，z）{
z=z | |“0”；
n=n+''；
返回n.length>=width？n：新数组（width-n.length+1）；
}
函数getclockColor（）{
var today=新日期（）；
var h=String（today.getHours（））；
var m=String（today.getMinutes（））；
var s=String（today.getSeconds（））；
var color='#'+pad（h，2）+pad（m，2）+pad（s，2）；
返回颜色；
}
函数changeColor（）{
div.style.backgroundColor=getclockColor（）；
}
设置间隔（changeColor，1000）；
功能时钟（）{
变量时间=新日期（），
小时=时间。getHours（），
分钟=时间。getMinutes（），
秒=时间。getSeconds（）；
document.querySelectorAll（'.clock'）[0].innerHTML=harold（小时）+“：”+harold（分钟）+“：”+harold（秒）；
功能哈罗德（替补）{
if（标准值<10）{
standIn='0'+standIn
}
返回站；
}
}
设置间隔（时钟，1000）；
将
#full
元素的
z-index
设置为
-1
，将其推到时钟后面


正文{
溢出：隐藏；
保证金：0；
填充：0；
}
#满满的{
位置：绝对位置；
身高：100%；
宽度：100%；
z指数：-1；
}
.钟{
字号：4em；
颜色：红色；
}

var div=document.getElementById（“完整”）；
功能板（n，宽度，z）{
z=z | |“0”；
n=n+''；
返回n.length>=width？n：新数组（width-n.length+1）；
}
函数getclockColor（）{
var today=新日期（）；
var h=String（today.getHours（））；
var m=String（today.getMinutes（））；
var s=String（today.getSeconds（））；
var color='#'+pad（h，2）+pad（m，2）+pad（s，2）；
返回颜色；
}
函数changeColor（）{
div.style.backgroundColor=getclockColor（）；
}
设置间隔（changeColor，1000）；
功能时钟（）{
变量时间=新日期（），
小时=时间。getHours（），
分钟=时间。getMinutes（），
秒=时间。getSeconds（）；
document.querySelectorAll（'.clock'）[0].innerHTML=harold（小时）+“：”+harold（分钟）+“：”+harold（秒）；
功能哈罗德（替补）{
if（标准值<10）{
standIn='0'+standIn
}
返回站；
}
}
设置间隔（时钟，1000）；

您不需要单独调用
setInterval
，只需调用包含这两个调用的一个函数即可
绝对位置是将div定位在时钟div上


var div=document.getElementById（“完整”）；
功能板（n，宽度，z）{
z=z | |“0”；
n=n+''；
返回n.length>=width？n：新数组（width-n.length+1）；
}
函数getclockColor（）{
var today=新日期（）；
var h=String（today.getHours（））；
var m=String（today.getMinutes（））；
var s=String（today.getSeconds（））；
var color='#'+pad（h，2）+pad（m，2）+pad（s，2）；
返回颜色；
}
函数changeColor（）{
div.style.backgroundColor=getclockColor（）；
}
//设置间隔（changeColor，1000）；
功能时钟（）{
变量时间=新日期（），
小时=时间。getHours（），
分钟=时间。getMinutes（），
秒=时间。getSeconds（）；
document.getElementsByClassName（'clock'）[0].innerHTML=harold（小时）+“：”+harold（分钟）+“：”+harold（秒）；
功能哈罗德（替补）{
if（标准值<10）{
standIn='0'+standIn
}
返回站；
}
}
setInterval（函数（）{
时钟（）；
变色（）；
}, 1000);
正文{
溢出：隐藏；
保证金：0；
填充：0；
}
#满满的{
位置：绝对位置；
身高：100%；
宽度：100%；
z指数：0；
}
.钟{
位置：绝对位置；
字号：4em；
z指数：999；
颜色：红色；
}


您不需要单独调用
setInterval
，只需调用一个包含