倒数计时器在创建即将推出的页面时不起作用
我正在尝试显示即将推出的网页的倒数计时器。一切正常，除了用java脚本编写的计时器。我也尝试过将其设置为外部文件。当设置为外部文件时，它也会读取文件，但计时器不会显示在页面上。
这是我的刀片文件
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Coming Soon</title>
<link rel="stylesheet" type="text/css" href="{{asset('css/style.css')}}">
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital@1&family=Montserrat&family=Open+Sans+Condensed:wght@300&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="soon">
<p> We will be back with beautiful website</p>
<h1>COMING SOON</h1>
<hr>
<p id="launch"></p>
</header>
<script>
var date = new Date("Jan 1, 2020 00:00:00").getTime();
var countdownfunction = setInterval(function() {
var today = new Date().getTime();
var distance = date - today;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(countdownfunction);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
这是 css
*
{
margin: 0;
padding: 0;
}
header
{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('/images/comingsoon.jpg');
height: 100vh;
background-position: center;
background-size: cover;
}
.soon {
top: 50%;
left: 50%;
position: absolute;
transform:translate(-50%,-50%);
color: #fff;
text-align: center;
font-family: 'Balsamiq Sans', cursive;
font-family: 'Montserrat', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Playfair Display', serif;
}
h1 {
font-size: 60px;
letter-spacing: 15px;
}
hr{
width: 50%;
margin: 30px auto;
border: 1.5px solid #fff;
}
紫衣仙女2回答
-
哔哔one
您必须添加带有id演示的标签，例如div，并且您未来的日期也是错误的<header> <div class="soon"> <p> We will be back with beautiful website</p> <h1>COMING SOON</h1> <hr> <div id=demo></div>div> <p id="launch"></p></header>您的日期已过期，请将其更改为将来的某个内容var date = new Date("Jan 1, 2021 00:00:00").getTime(); -
炎炎设计
更改为 在 html 代码上，或更改为 在脚本代码上<p id="launch"></p><p id="demo"></p>document.getElementById("demo")document.getElementById("launch")
随时随地看视频慕课网APP
相关分类
JavaScript