我正在尝试显示即将推出的网页的倒数计时器。一切正常，除了用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
TA贡献1854条经验 获得超8个赞
您必须添加带有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();
炎炎设计
TA贡献1808条经验 获得超4个赞
更改为 在 html 代码上，或更改为 在脚本代码上<p id="launch"></p><p id="demo"></p>document.getElementById("demo")document.getElementById("launch")
添加回答
举报
0/150
提交
取消