我正在尝试将HTML、CSS和JavaScript组合成一个文件。我觉得我可能缺少一个简单的HTML元素。然而，我不太确定script是否能工作，因为有很多Javascript代码，而script似乎更像是一个用于将Javascript代码快速插入HTML文件的元素。
HTML:
<div class="clock-container">
<div class="clock-col">
<p class="clock-hours clock-timer">
</p>
<p class="clock-label">
Hours
</p>
</div>
<div class="clock-col">
<p class="clock-minutes clock-timer">
</p>
<p class="clock-label">
Minutes
</p>
</div>
<div class="clock-col">
<p class="clock-seconds clock-timer">
</p>
<p class="clock-label">
Seconds
</p>
</div>
</div>
CSS：
.clock {
&-day {
&:before {
content: var(--timer-day);
}
}
&-hours {
&:before {
content: var(--timer-hours);
}
}
&-minutes {
&:before {
content: var(--timer-minutes);
}
}
&-seconds {
&:before {
content: var(--timer-seconds);
}
}
}
body {
background: linear-gradient(45deg, #1870ed 0, #f18f88 100%);
font-family: 'Montserrat', 'sans-serif';
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.clock {
&-container {
margin-top: 30px;
margin-bottom: 30px;
background-color: #080808;
border-radius: 5px;
padding: 60px 20px;
box-shadow: 1px 1px 5px rgba(255,255,255,.15), 0 15px 90px 30px rgba(0,0,0,.25);
display: flex;
}
&-col {
text-align: center;
margin-right: 40px;
margin-left: 40px;
min-width: 90px;
position: relative;
&:not(:last-child):before,
&:not(:last-child):after{
content: "";
background-color: rgba(255,255,255,.3);
height: 5px;
width: 5px;
border-radius: 50%;
display: block;
position: absolute;
right: -42px;
}
&:not(:last-child):before {
top: 35%;
}
&:not(:last-child):after {
top: 50%;
}
}
&-timer {
&:before {
color: #fff;
font-size: 4.2rem;
text-transform: uppercase;
}
}
&-label {
color: rgba(255,255,255,.35);
text-transform: uppercase;
font-size: .7rem;
margin-top: 10px;
}
}
@media (max-width: 825px) {
.clock-container {
flex-direction: column;
padding-top: 40px;
padding-bottom: 40px;
}
.clock-col {
& + & {
margin-top: 20px;
}
&:before,
&:after {
display: none!important;
}
}
}
Java脚本：
document.addEventListener('DOMContentLoaded', () =>
requestAnimationFrame(updateTime)
)
function updateTime() {
document.documentElement.style.setProperty('--timer-day', "'" + moment().format("dd") + "'");
document.documentElement.style.setProperty('--timer-hours', "'" + moment().format("k") + "'");
document.documentElement.style.setProperty('--timer-minutes', "'" + moment().format("mm") + "'");
document.documentElement.style.setProperty('--timer-seconds', "'" + moment().format("ss") + "'");
requestAnimationFrame(updateTime);
}
您必须将JS和CSS文件链接到html。试试这个：
<head>
<link rel="stylesheet" type="text/css" href="<filename>.css">
<script src="<filename>.js"></script>
</head>
编辑：
正如评论中所指出的，您必须首先将SCSS转换为CSS
如果你想把所有东西都放在同一个文件中，你可以把CSS放在一个style元素中，把JS放在script元素中。使用以下语法：
<!DOCTYPE html>
<html>
<head>
<style>
/* Your CSS goes here, in the style element */
</style>
</head>
<body>
<!-- Your HTML goes here, in the body element -->
<script>
// Your JS goes here, inside the script element, at the end of the body element
</body>
</html>
我认为您正在尝试将页面中的所有内容组合起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clock {
&-day {
&:before {
content: var(--timer-day);
}
}
&-hours {
&:before {
content: var(--timer-hours);
}
}
&-minutes {
&:before {
content: var(--timer-minutes);
}
}
&-seconds {
&:before {
content: var(--timer-seconds);
}
}
}
body {
background: linear-gradient(45deg, #1870ed 0, #f18f88 100%);
font-family: 'Montserrat', 'sans-serif';
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.clock {
&-container {
margin-top: 30px;
margin-bottom: 30px;
background-color: #080808;
border-radius: 5px;
padding: 60px 20px;
box-shadow: 1px 1px 5px rgba(255,255,255,.15), 0 15px 90px 30px rgba(0,0,0,.25);
display: flex;
}
&-col {
text-align: center;
margin-right: 40px;
margin-left: 40px;
min-width: 90px;
position: relative;
&:not(:last-child):before,
&:not(:last-child):after{
content: "";
background-color: rgba(255,255,255,.3);
height: 5px;
width: 5px;
border-radius: 50%;
display: block;
position: absolute;
right: -42px;
}
&:not(:last-child):before {
top: 35%;
}
&:not(:last-child):after {
top: 50%;
}
}
&-timer {
&:before {
color: #fff;
font-size: 4.2rem;
text-transform: uppercase;
}
}
&-label {
color: rgba(255,255,255,.35);
text-transform: uppercase;
font-size: .7rem;
margin-top: 10px;
}
}
@media (max-width: 825px) {
.clock-container {
flex-direction: column;
padding-top: 40px;
padding-bottom: 40px;
}
.clock-col {
& + & {
margin-top: 20px;
}
&:before,
&:after {
display: none!important;
}
}
}
</style>
</head>
<body>
<div class="clock-container">
<div class="clock-col">
<p class="clock-hours clock-timer">
</p>
<p class="clock-label">
Hours
</p>
</div>
<div class="clock-col">
<p class="clock-minutes clock-timer">
</p>
<p class="clock-label">
Minutes
</p>
</div>
<div class="clock-col">
<p class="clock-seconds clock-timer">
</p>
<p class="clock-label">
Seconds
</p>
</div>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () =>
requestAnimationFrame(updateTime)
)
function updateTime() {
document.documentElement.style.setProperty('--timer-day', "'" + moment().format("dd") + "'");
document.documentElement.style.setProperty('--timer-hours', "'" + moment().format("k") + "'");
document.documentElement.style.setProperty('--timer-minutes', "'" + moment().format("mm") + "'");
document.documentElement.style.setProperty('--timer-seconds', "'" + moment().format("ss") + "'");
requestAnimationFrame(updateTime);
}
</script>
</body>
</html>