我是 javascript 新手，想要制作一个 html 文件，显示 super 碗“LIV”之前的天数、当前时间以及用户将罗马数字转换为数字的输入。我的代码如下，就像现在一样，启动文件时不会出现倒计时元素和时间元素。但是，当我删除为转换罗马数字而创建的函数时，这两个元素会再次出现。这告诉我，我的代码的问题在于这些函数中，但是我找不到需要解决的内容/位置，或者我是否采取了错误的转换方法。我希望用户在 rn 文本输入中输入罗马数字，当选择“转换”按钮输入时，相应的数字会出现在结果范围中。我需要使用函数“toNumber()”中使用的算法的概念，但显然我在此过程中可能实现了一些错误。任何帮助表示赞赏。
<html>
<head>
<title>Roman Numeral Converter</title>
</head>
<body>
<div>
<p id="countdown"></p>
<p id="time"></p>
<p> Please enter a Roman number (e.g. LIV) to convert to a number: </p>
<form action="PayslipServlet" method="get">
<input type="text" name="romannumber" id="rn"> => <span id="result"></span>
<br>
<input type="button" value="Convert" onClick="toNumber()"> <input type="button" value="Reset" onclick="empty()">
</form>
</div>
<script type="text/javascript">
function sbCountdown() {
var countdownDate = new Date("February 2, 2020").getTime();
var now = new Date();
var rn = now.getTime();
var daysLeft = countdownDate - rn;
var days = Math.floor(daysLeft / (1000 * 60 * 60 * 24));
document.getElementById("countdown").innerHTML = "There are " + days + " days until SUPER BOWL LIV 2020 (February 2, 2020)";
if(daysLeft < 0) {
document.getElementById('countdown').innerHTML = "EXPIRED";
}
setTimeout(sbCountdown, 1000);
}
sbCountdown();
function updateClock() {
var now = new Date(), // current date
months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var dateString = "*** The Current Time is: ";
var hh = now.getHours();
var dd = "AM";
var h = hh;
if(h >= 12 ) {
h = hh - 12;
dd = "PM";
}
if( h == 0 ) {
h = 12;
}
time = h + ':' + now.getMinutes() + ':' + now.getSeconds() + " " + dd;
// a cleaner way than string concatenation
date = [now.getDate(),
months[now.getMonth()],
now.getFullYear()].join(' ');
// set the content of the element with the ID time to the formatted string
document.getElementById('time').innerHTML = dateString + date + " , " + time;
// call this function again in 1000ms
setTimeout(updateClock, 1000);
}
updateClock();
function getValue(s) {
var num = 0;
if(s == 'I') { num = 1 }
else if(s == 'V') { num = 5 }
else if(s == 'X') { num = 10 }
else if(s == 'L') { num = 50 }
else if(s == 'C') { num = 100 }
else if(s == 'D') { num = 500 }
else if(s == 'M') { num = 1000 }
else { document.getElementById(result).innerHTML = "Not a Roman Numeral" }
return num;
}
function toNumber() {
var total = 0;
var romNum = document.getElementById(rn).value
var number;
while(romNum != "") {
if(getValue(romNum.charAt(0)) >= getValue(romNum.charAt(1)) || romNum.length() == 1) {
number = getValue(romNum.charAt(0));
total += number;
var temp = romNum.slice(1);
romNum = temp;
}
else {
number = getValue(romNum.charAt(1) - getValue(romNum.charAt(0));
total += number;
var temp = ronNum.slice(2);
ronNum = temp;
}
}
document.getElementById(result).innerHTML = total;
}
</script>
</body>
</html>
最佳答案
您只是有一些语法错误。
number = getValue(romNum.charAt(1) - getValue(romNum.charAt(0));
)
此外，在大多数 getElementById() 元素中，您的 id 周围都缺少引号。并且您需要在 else block 中将变量 ronNum 更改为 romNum。
修复这些问题似乎可以让您的一些功能正常工作。您现在只需要处理重置按钮功能即可。希望这有帮助。
<html>
<head>
<title>Roman Numeral Converter</title>
</head>
<body>
<div>
<p id="countdown"></p>
<p id="time"></p>
<p> Please enter a Roman number (e.g. LIV) to convert to a number: </p>
<form action="PayslipServlet" method="get">
<input type="text" name="romannumber" id="rn"> => <span id="result"></span>
<br>
<input type="button" value="Convert" onClick="toNumber()"> <input type="button" value="Reset" onclick="empty()">
</form>
</div>
<script type="text/javascript">
function sbCountdown() {
var countdownDate = new Date("February 2, 2020").getTime();
var now = new Date();
var rn = now.getTime();
var daysLeft = countdownDate - rn;
var days = Math.floor(daysLeft / (1000 * 60 * 60 * 24));
document.getElementById("countdown").innerHTML = "There are " + days + " days until SUPER BOWL LIV 2020 (February 2, 2020)";
if(daysLeft < 0) {
document.getElementById('countdown').innerHTML = "EXPIRED";
}
setTimeout(sbCountdown, 1000);
}
sbCountdown();
function updateClock() {
var now = new Date(), // current date
months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var dateString = "*** The Current Time is: ";
var hh = now.getHours();
var dd = "AM";
var h = hh;
if(h >= 12 ) {
h = hh - 12;
dd = "PM";
}
if( h == 0 ) {
h = 12;
}
time = h + ':' + now.getMinutes() + ':' + now.getSeconds() + " " + dd;
// a cleaner way than string concatenation
date = [now.getDate(),
months[now.getMonth()],
now.getFullYear()].join(' ');
// set the content of the element with the ID time to the formatted string
document.getElementById('time').innerHTML = dateString + date + " , " + time;
// call this function again in 1000ms
setTimeout(updateClock, 1000);
}
updateClock();
function getValue(s) {
var num = 0;
if(s == 'I') { num = 1 }
else if(s == 'V') { num = 5 }
else if(s == 'X') { num = 10 }
else if(s == 'L') { num = 50 }
else if(s == 'C') { num = 100 }
else if(s == 'D') { num = 500 }
else if(s == 'M') { num = 1000 }
else { document.getElementById('result').innerHTML = "Not a Roman Numeral" }
return num;
}
function toNumber() {
var total = 0;
var romNum = document.getElementById('rn').value
var number;
while(romNum != "") {
if(getValue(romNum.charAt(0)) >= getValue(romNum.charAt(1)) || romNum.length == 1) {
number = getValue(romNum.charAt(0));
total += number;
var temp = romNum.slice(1);
romNum = temp;
}
else {
number = getValue(romNum.charAt(1)) - getValue(romNum.charAt(0));
total += number;
var temp = romNum.slice(2);
romNum = temp;
}
}
document.getElementById('result').innerHTML = total;
}
</script>
</body>
</html>关于javascript - Javascript/HTML 中的罗马数字到数字的转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59311912/