我的JS无法在我的网站上运行。 我对此非常陌生，并且正在建立一个网站，但是我希望计时器显示该网站何时处于活动状态。
我必须缺少一些东西-我相信错误在于JS，因为对此我所知甚少。
现在，我只想知道为什么脚本不起作用。一旦我对代码如何链接到html有了更好的了解，我将开始尝试了解它的作用。
我们非常感谢您的帮助。
var target_date = new Date().getTime() + (1000*3600*48); // set the countdown date
var days, hours, minutes, seconds; // variables for time units
var countdown = document.getElementById("tiles"); // get tag element
getCountdown();
setInterval(function () { getCountdown(); }, 1000);
function getCountdown(){
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = pad( parseInt(seconds_left / 86400) );
seconds_left = seconds_left % 86400;
hours = pad( parseInt(seconds_left / 3600) );
seconds_left = seconds_left % 3600;
minutes = pad( parseInt(seconds_left / 60) );
seconds = pad( parseInt( seconds_left % 60 ) );
// format countdown string + set tag value
countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
}
function pad(n) {
return (n < 10 ? '0' : '') + n;
} body
{
width:1000px;
height:1000px;
position:relative;
top:10px;
margin:auto;
background-image:url('bg copy.png');
}
#Header
{
width:1000px;
background-image:url('Logo 3 small.png');
background-repeat:no-repeat;
background-position:center;
}
#Middle
{
width:1000px;
}
#Soon
{
height:100px;
width:1000px;
font-family:"Malgun Gothic Semilight";
font-size:20px;
color:Black;
}
#Timer
{
height:200px;
width:1000px;
}
#Bottom
{
font-size:80px;
}
#countdown{
width: 465px;
height: 112px;
text-align: center;
background: #222;
background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);
background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
background-image: -o-linear-gradient(top, #222, #333, #333, #222);
border: 1px solid #111;
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
margin: auto;
padding: 24px 0;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
#countdown:before{
content:"";
width: 8px;
height: 65px;
background: #444;
background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
background-image: -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
display: block;
position: absolute;
top: 48px; left: -10px;
}
#countdown:after{
content:"";
width: 8px;
height: 65px;
background: #444;
background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
background-image: -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
display: block;
position: absolute;
top: 48px; right: -10px;
}
#countdown #tiles{
position: relative;
z-index: 1;
}
#countdown #tiles > span{
width: 92px;
max-width: 92px;
font: bold 48px 'Droid Sans', Arial, sans-serif;
text-align: center;
color: #111;
background-color: #ddd;
background-image: -webkit-linear-gradient(top, #bbb, #eee);
background-image: -moz-linear-gradient(top, #bbb, #eee);
background-image: -ms-linear-gradient(top, #bbb, #eee);
background-image: -o-linear-gradient(top, #bbb, #eee);
border-top: 1px solid #fff;
border-radius: 3px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
margin: 0 7px;
padding: 18px 0;
display: inline-block;
position: relative;
}
#countdown #tiles > span:before{
content:"";
width: 100%;
height: 13px;
background: #111;
display: block;
padding: 0 3px;
position: absolute;
top: 41%; left: -3px;
z-index: -1;
}
#countdown #tiles > span:after{
content:"";
width: 100%;
height: 1px;
background: #eee;
border-top: 1px solid #333;
display: block;
position: absolute;
top: 48%; left: 0;
}
#countdown .labels{
width: 100%;
height: 25px;
text-align: center;
position: absolute;
bottom: 8px;
}
#countdown .labels li{
width: 102px;
font: bold 15px 'Droid Sans', Arial, sans-serif;
color: #f47321;
text-shadow: 1px 1px 0px #000;
text-align: center;
text-transform: uppercase;
display: inline-block; <head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>SPAutoTech Home</title>
<link href="localcss.css" rel="stylesheet" type="text/css" />
<script src="jquery-3.4.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="java.js"></script>
</head>
<body>
<div id="Header" style="height:400px">
</div>
<div id="Middle" style="height:300px">
<div id="Soon">
</div>
<div id="counter">
<div id="countdown">
<div id='tiles'></div>
<div class="labels">
<li>Days</li>
<li>Hours</li>
<li>Mins</li>
<li>Secs</li>
</div>
</div>
</div>
<script src="java.js"></script>
<div id="Bottom" style="height:300px">
</div>
</div>
<div id="Bottom1" style="height:300px">
<center><b>COMING SOON</b></center>
</div>
</body>
</html>
答案 0 :(得分：1)
将包含倒计时代码的<script>元素插入<body>标记之前的HTML文档中。在该代码中，您具有：
var countdown = document.getElementById("tiles"); // get tag element
但是，在页面处理的这一点上，body中的任何内容都没有被解析，因此countdown是null。稍后，当您尝试设置.innerHTML中的countdown时：
countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
失败，因为从未发现countdown。
解决方案：
拾取整个<script>并移动它，使其恰好位于结束body标记（</body>）之前，因为到那时为止，所有HTML都已被解析。
如果继续使用JQuery，则可以获取<script>的全部内容，并将其放在JQuery的document.ready方法内，以将代码建立为仅在文档完成后才能运行的代码。完全解析：
<script>
$(document).ready(function(){
// All your code would go in here
});
</script>