如何修复倒计时时钟JS HTML CSS

时间:2019-04-11 18:00:59

标签: javascript jquery html css

我的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>

1 个答案:

答案 0 :(得分:1)

将包含倒计时代码的<script>元素插入<body>标记之前的HTML文档中。在该代码中,您具有:

var countdown = document.getElementById("tiles"); // get tag element

但是,在页面处理的这一点上,body中的任何内容都没有被解析,因此countdownnull。稍后,当您尝试设置.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>