如何使用Wordpress中的html、css和javascript添加此下载按钮和计时器

我有一个简单的代码，它在按下时充当下载按钮，开始倒计时，然后打开代码中提供的目标URL。但作为本地主机用户，我对WordPress不太熟悉。我需要帮助将代码安装到WordPress中

在下面剪掉它

const downloadBtn=document.querySelector（“.downloadBtn”）；
const countdown=document.querySelector（“.countdown”）；
const plesewait text=document.querySelector（“.plesewait text”）；
const manualDownloadText=document.querySelector（“.manualDownloadText”）；
const manualDownloadLink=document.querySelector（“.manualDownloadLink”）；
var timeLeft=40；
下载btn.addEventListener（“单击”，（）=>{
下载btn.style.display=“无”；
countdown.innerHTML=“下载将在“+timeLeft+”秒后自动开始。”；//用于快速开始倒计时
var downloadTimer=setInterval（函数timeCount（）{
时间限制-=1；
countdown.innerHTML=“下载将在“+timeLeft+”秒后自动开始。”；
如果（时间限制）{
请使用文字text.style.display=“无”；
manualDownloadText.style.display=“块”；
}, 4000);
}
}, 1000);
});
@导入url（'https://fonts.googleapis.com/css2?family=Poppins:wght@100；200；300；400；500；600；700；800；900&display=swap'）；
* {
保证金：0；
填充：0；
框大小：边框框；
字体系列：“罂粟花”，无衬线；
}
身体{
最小高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.下载容器{
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
.下载btn{
位置：相对位置；
背景：#4285F4；
颜色：#fff；
宽度：260px；
填充：18px0；
文本对齐：居中；
字体大小：1.3em；
字体大小：400；
文字装饰：无；
边界半径：5px；
盒影：0 5px25px rgba（1/15%）；
过渡：背景0.3s；
}
下载btn:hover{
背景#2874F3；
}
下载btn i{
左边距：5px；
}
.倒计时{
字号：1.5em；
字号：700；
边缘底部：20px；
}
.倒计时跨度{
颜色：#0693F6；
字号：1.5em；
字号：800；
}
.请阅读以下文字{
字体大小：1.1米；
字号：600；
显示：无；
}
.手册下载文本{
字体大小：1.1米；
字号：600；
显示：无；
}
.manualDownload链接{
颜色：#0693F6；
字号：800；
文字装饰：无；
}

请稍等。。
如果下载没有自动启动，