因此,我正在尝试为一个朋友的项目完成此简单的html页面,目标是获取2个用户输入(分钟和秒),将其与表中已有的数据进行比较,如果输入的分钟和秒为大于表中的时间之一,它将被条目替代。我从来没有使用过js,只是做出了一些简单的提示或警告,所以我不知道该怎么做。这是html,js和CSS:
<!DOCTYPE html>
<html>
<head>
<title>Table of best times</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="javascript/besttime.js"></script>
</head>
<body>
<section>
<table>
<tbody>
<caption>The best times</caption>
<tr>
<td id="firstTimeMin">1</td>
<td id="firstTimeSec">2</td>
</tr>
<tr>
<td id="secondTimeMin">3</td>
<td id="secondTimeSec">4</td>
</tr>
<tr>
<td id="thirdTimeMin">5</td>
<td id="thirdTimeSec">6</td>
</tr>
</tbody>
</table>
<button onclick="timeEntry()">
Enter a new time
</button>
</section>
</body>
</html>
function timeEntry(){
var min1 = Number(document.getElementById('firstTimeMin'));
var sec1 = Number(document.getElementById('firstTimeSec'));
var min2 = Number(document.getElementById('secondTimeMin'));
var sec2 = Number(document.getElementById('secondTimeSec'));
var min3 = Number(document.getElementById('thirdTimeMin'));
var sec3 = Number(document.getElementById('thirdTimeSec'));
var entryMin = Number(prompt('What is the time in minutes ?'));
var newTimeMin = entryMin;
var entrySec = Number(prompt('What is the time in seconds'));
var newTimeSec = entrySec;
for(var i = 0; i < 3; i++){
if(entryMin > min1 && entrySec > sec1) {
document.getElementById('firstTimeMin').innerHTML = newTimeMin;
document.getElementById('firstTimeSec').innerHTML = newTimeSec;
break;
}else if(entryMin > min2 && entrySec > sec2) {
document.getElementById('secondTimeMin').innerHTML = newTimeMin;
document.getElementById('secondTimeSec').innerHTML = newTimeSec;
break;
}else if (entryMin > min3 && entrySec > sec3) {
document.getElementById('thirdTimeMin').innerHTML = newTimeMin;
document.getElementById('thirdTimeSec').innerHTML = newTimeSec;
break;
}
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
section {
width: 100%;
height: 100%;
}
table, td {
width: 40%;
text-align: center;
border: 1px solid black;
border-collapse: collapse;
}
button {
cursor: pointer;
font-weight: 700;
}
[我的想法是简单地使用Number
或parseInt
获取表中已经存在的数据以获取数字值,但是当我尝试从html中获取元素时,无论从我做过的测试中,它告诉我我得到一个数字类型,但是当我尝试在操作中使用它时,它返回NaN。也许我只是愚蠢,但是我一直在阅读和寻找一天,以一种方式来从单元格中获取数字数据,但是除了Number
或parseInt
或使用表格之外,我还没有看到了一种执行此操作的方法,感觉就像我搜索的越多,对它为什么不起作用的理解就越少。关于如何完成此操作的任何帮助或线索,即使这意味着从头开始也将不胜感激。
[document.getElementById('firstTimeMin')
仅获取DOM元素,您应该执行document.getElementById('firstTimeMin').innerHTML
来获取HTML的内容,以便可以使用parseInt()
或Number
来获取数字。