为什么我的 Javascript 内容在网页中不可见
Why my Javascript content not visible in webpage
我是 javascript 的新手。我正在尝试使用 html、css 和 JS 制作一些问答游戏。
在测验中,我想要 1 分钟的计时器。我为计时器和模板编写了单独的代码。计时器工作正常。
但是当我合并两个代码时,计时器不可见。尽管在 1 分钟后它会显示消息“时间到了”。我使用了定位属性并尝试了不同的位置,但仍然不可见。
<html>
<head>
<style>
.score
{
position:absolute;
left:900;
}
#whole
{
background-color:black;
color:white;
width:80%;
height:70%;
position:relative;
top:45;
left:95;
border:4px solid black;
}
.optns
{
width:40%;
height:5%
}
#question
{
color:black;
background-color:#f2f2f2;
width:99%;
height:20%;
position:absolute;
top:35;
left:5;
}
.optn1
{
position:absolute;
top:190;
left:120;
}
.optn2
{
position:absolute;
top:230;
left:120;
}
.optn3
{
position:absolute;
top:270;
left:120;
}
.optn4
{
position:absolute;
top:310;
left:120;
}
.prev
{
position:absolute;
down:80px;
left:200px;
}
.next
{
position:absolute;
down:80px;
right:200px;
}
#timer
{
position:absolute;
top:1000px;
background-color:pink;
color:blue;
font-family:cursive;
z-index:9999;
}
</style>
</head>
<body>
<div id=whole>
<center>TIMER HERE</center>
<script>
var fixed=new Date();
var fixedsecond=fixed.getSeconds();
var fixedmin=fixed.getMinutes();
function changetime()
{
var current=new Date();
var currentsecond=current.getSeconds();
var currentmin=current.getMinutes();
var m=currentmin-fixedmin;
var s=(currentsecond-fixedsecond);
if(s<0)
{
s=s+60
m=m-1;
}
if(m>=1)
{
clearInterval(t);
prompt("TIME IS UP");
}
document.getElementById("timer").innerHTML="<center id=timer><h1>"+m+":"+s
+"</center></h1>";
}
var t=setInterval(changetime,1000);
</script>
<span class="score">SCORE</span>
<div id=question>
Question here
</div>
</div>
<button class="optn1 optns">OPTION 1</button>
<button class="optn2 optns">OPTION 2</button>
<button class="optn3 optns">OPTION 3 </button>
<button class="optn4 optns">OPTION 4</button>
<button class=prev>PREVIOUS</button>
<button class="next">NEXT</button>
</body>
</html>
提前致谢!
您调用了 document.getElementById("timer")
,但 HTML 中尚不存在此元素。您需要在 HTML 中包含此元素或通过 JavaScript.
在文档中创建它
尝试这样的事情:
<div id="timer">TIMER HERE</center>
和 JS:
document.getElementById("timer").innerHTML = m + ":" + s;
此外 - 您不应使用 <center>
,因为它已被弃用。
您应该使用任何浏览器(Safari、Chrome 等)直接从 Web 开发人员控制台看到 javascript 错误。
此代码在这一行失败
document.getElementById("timer").innerHTML
没有 ID 为 "timer" 的元素。
您在 HTML 中使用 "whole" 作为 ID,但在 javascript 中调用 "timer" ID。
更新脚本中的 id,如下所示:
document.getElementById("timer").innerHTML
和
document.getElementById("whole").innerHTML
1) 改变
<center id="timer">TIMER HERE</center>
有了这个:
<div id="timer">TIMER HERE</div>
2)你还需要改变这个:
document.getElementById("timer").innerHTML = "<center id=timer><h1>" + m + ":" + s
有了这个:
document.getElementById("timer").innerHTML=m+":"+s;
3) 你的 CSS 被窃听了,更改:
#timer {
position: absolute;
top: 1000px;
background-color: pink;
color: blue;
font-family: cursive;
z-index: 9999;
}
这样:
#timer
{
text-align: center;
background-color:pink;
color:fff;
font-family:cursive;
}
现在您可以看到您的计时器...
我是 javascript 的新手。我正在尝试使用 html、css 和 JS 制作一些问答游戏。 在测验中,我想要 1 分钟的计时器。我为计时器和模板编写了单独的代码。计时器工作正常。
但是当我合并两个代码时,计时器不可见。尽管在 1 分钟后它会显示消息“时间到了”。我使用了定位属性并尝试了不同的位置,但仍然不可见。
<html>
<head>
<style>
.score
{
position:absolute;
left:900;
}
#whole
{
background-color:black;
color:white;
width:80%;
height:70%;
position:relative;
top:45;
left:95;
border:4px solid black;
}
.optns
{
width:40%;
height:5%
}
#question
{
color:black;
background-color:#f2f2f2;
width:99%;
height:20%;
position:absolute;
top:35;
left:5;
}
.optn1
{
position:absolute;
top:190;
left:120;
}
.optn2
{
position:absolute;
top:230;
left:120;
}
.optn3
{
position:absolute;
top:270;
left:120;
}
.optn4
{
position:absolute;
top:310;
left:120;
}
.prev
{
position:absolute;
down:80px;
left:200px;
}
.next
{
position:absolute;
down:80px;
right:200px;
}
#timer
{
position:absolute;
top:1000px;
background-color:pink;
color:blue;
font-family:cursive;
z-index:9999;
}
</style>
</head>
<body>
<div id=whole>
<center>TIMER HERE</center>
<script>
var fixed=new Date();
var fixedsecond=fixed.getSeconds();
var fixedmin=fixed.getMinutes();
function changetime()
{
var current=new Date();
var currentsecond=current.getSeconds();
var currentmin=current.getMinutes();
var m=currentmin-fixedmin;
var s=(currentsecond-fixedsecond);
if(s<0)
{
s=s+60
m=m-1;
}
if(m>=1)
{
clearInterval(t);
prompt("TIME IS UP");
}
document.getElementById("timer").innerHTML="<center id=timer><h1>"+m+":"+s
+"</center></h1>";
}
var t=setInterval(changetime,1000);
</script>
<span class="score">SCORE</span>
<div id=question>
Question here
</div>
</div>
<button class="optn1 optns">OPTION 1</button>
<button class="optn2 optns">OPTION 2</button>
<button class="optn3 optns">OPTION 3 </button>
<button class="optn4 optns">OPTION 4</button>
<button class=prev>PREVIOUS</button>
<button class="next">NEXT</button>
</body>
</html>
提前致谢!
您调用了 document.getElementById("timer")
,但 HTML 中尚不存在此元素。您需要在 HTML 中包含此元素或通过 JavaScript.
尝试这样的事情:
<div id="timer">TIMER HERE</center>
和 JS:
document.getElementById("timer").innerHTML = m + ":" + s;
此外 - 您不应使用 <center>
,因为它已被弃用。
您应该使用任何浏览器(Safari、Chrome 等)直接从 Web 开发人员控制台看到 javascript 错误。 此代码在这一行失败
document.getElementById("timer").innerHTML
没有 ID 为 "timer" 的元素。
您在 HTML 中使用 "whole" 作为 ID,但在 javascript 中调用 "timer" ID。
更新脚本中的 id,如下所示:
document.getElementById("timer").innerHTML
和
document.getElementById("whole").innerHTML
1) 改变
<center id="timer">TIMER HERE</center>
有了这个:
<div id="timer">TIMER HERE</div>
2)你还需要改变这个:
document.getElementById("timer").innerHTML = "<center id=timer><h1>" + m + ":" + s
有了这个:
document.getElementById("timer").innerHTML=m+":"+s;
3) 你的 CSS 被窃听了,更改:
#timer {
position: absolute;
top: 1000px;
background-color: pink;
color: blue;
font-family: cursive;
z-index: 9999;
}
这样:
#timer
{
text-align: center;
background-color:pink;
color:fff;
font-family:cursive;
}
现在您可以看到您的计时器...