交互式圖表

The Roman numerals are no longer an essential part of our daily lives. But we do use them when designing monuments, clocks, and even for sporting events.

羅馬數(shù)字不再是我們?nèi)粘Ｉ钪斜夭豢缮俚牟糠帧?但是我們?cè)谠O(shè)計(jì)紀(jì)念碑，鐘表甚至體育賽事時(shí)都會(huì)使用它們。

什么是羅馬數(shù)字？ (What are the Roman Numerals?)

Roman numerals originated in ancient Rome and remained the common way of writing numbers throughout Europe for many centuries. Their use long outlived the Roman Empire itself. They were gradually replaced by the Hindu-Arabic system of numeration that we use today – the numbers zero through nine.

羅馬數(shù)字起源于古羅馬，并且在許多世紀(jì)以來一直是整個(gè)歐洲書寫數(shù)字的常用方式。 他們的使用早已超出了羅馬帝國本身。 它們逐漸被我們今天使用的印度－阿拉伯計(jì)數(shù)系統(tǒng)所取代-數(shù)字從零到九。

Roman numerals are represented by combinations of letters of the Latin alphabet, that serve as digits in this system. But unlike decimal base, with symbols 0 through 9, the the Roman system employs seven capitalized Latin letters I, V, X, L, C, D, M.

羅馬數(shù)字由拉丁字母的組合表示，該拉丁字母在此系統(tǒng)中用作數(shù)字。 但是與十進(jìn)制以0到9表示的十進(jìn)制不同，羅馬系統(tǒng)使用七個(gè)大寫拉丁字母I，V，X，L，C，D，M 。

Originally, there was no single letter designation for zero. Instead, they used the Latin word Nulla, which means "none".

最初，沒有單個(gè)字母指定為零。 相反，他們使用拉丁詞Nulla ，意思是“無”。

羅馬數(shù)字如何工作？ (How do Roman Numerals work?)

The Hindu-Arabic representation of these letters is as follows: I = 1, V = 5, X = 10, L = 50, C = 100, D = 500 and M = 1000.

這些字母的印度阿拉伯語表示如下： I = 1，V = 5，X = 10，L = 50，C = 100，D = 500和M = 1000 。

Other numbers are formed by combining these letters per certain rules: A symbol placed after another of equal or greater value, adds its value.

其他數(shù)由這些字母每一定的規(guī)則形成的組合：一個(gè)符號(hào)放置后另一個(gè)相等或更大的值時(shí)，增加了它的價(jià)值。

For example, ? VI = V + I = 5 + 1 = 6 or LX = L + X = 50 + 10 = 60. The notations VI and LX are read as "one more than five" and "ten more than fifty".

例如， VI = V + I = 5 +1 = 6或LX = L + X = 50 + 10 = 60 。 VI和LX表示為“大于五個(gè)”和“大于十個(gè)十”。

A symbol placed before one of greater values subtracts its value. For example, IX = X - I = 10 - 1 = 9, and XC = C - X = 100 - 10 = 90.

位于較大值之一前面的符號(hào)減去其值。 例如， IX = X-I = 10-1 = 9，而XC = C-X = 100-10 = 90 。

The notations IX and XC are read as "one less than ten" and "ten less than a hundred."

標(biāo)記IX和XC分別表示為“少于十個(gè)”和“少于十個(gè)十”。

Numbers greater than 1,000 are formed by placing a dash over the symbol. Thus V? = 5,000, X? = 10,000, L? = 50,000, C? = 100,000, D? = 500,000 and M? = 1,000,000.

大于1,000的數(shù)字是通過在符號(hào)上放置一個(gè)破折號(hào)而形成的。 因此， V + ＝ 5,000 ， X + ＝ 10,000 ， L + ＝ 50,000 ， C + ＝ 100,000 ， D + ＝ 500,000和M + ＝ 1,000,000 。

The so called "standard" form disallows using the same symbol more than three times in a row. But occasionally, exceptions can be seen. For example, IIII for number 4, VIIII for number 9, and LXXXX for 90.

所謂的“標(biāo)準(zhǔn)”格式不允許同一符號(hào)連續(xù)使用三遍以上。 但是偶爾也可以看到例外。 例如，IIII代表4，VIIII代表9，LXXXX代表90。

羅馬數(shù)字及其組合的互動(dòng)圖表 (An Interactive Chart of Roman Numerals and Their Combinations)

Hover over each symbol to reveal its Hindu-Arabic equivalent:

將鼠標(biāo)懸停在每個(gè)符號(hào)上，以顯示其等效的印度－阿拉伯語：

I 我 II II III III IV IV V V VI VI VII VII VIII VIII IX IX X X XX XX XXX XXX XL XL L L LX LX LXX LXX LXXX LXXX XC XC C C CC CC CCC CCC CD CD D D DC DC DCC DCC DCCC DCCC CM CM M V? X? L? C? D? M? 中號(hào) V?X L C d 中號(hào)

I wrote the code for this interactive Roman numeral chart to embed here on freeCodeCamp News.

我為這個(gè)交互式羅馬數(shù)字圖表編寫了代碼，并將其嵌入在freeCodeCamp News上。

Given the fact that the HTML embed feature is not a full scale code editor, the given code is not structured and presented as separate HTML, CSS, and JavaScript files. Rather it is written as a single HTML file with <style> and <script> elements added for styling and functionality.

考慮到HTML嵌入功能不是完整的代碼編輯器，因此給定的代碼沒有結(jié)構(gòu)化并以單獨(dú)HTML，CSS和JavaScript文件的形式呈現(xiàn)。 相反，它是作為單個(gè)HTML文件編寫的，其中添加了<style>和<script>元素以用于樣式和功能。

Here is the full code repository for my interactive Roman Numeral Chart.

這是我的交互式羅馬數(shù)字圖表的完整代碼存儲(chǔ)庫 。

羅馬數(shù)字轉(zhuǎn)換器 (Roman Numeral Converter)

Enter a non negative integer between 0 and 5,000. Then click Convert to reveal a Roman numeral equivalent.

輸入介于0到5,000之間的非負(fù)整數(shù)。 然后單擊轉(zhuǎn)換以顯示等效的羅馬數(shù)字。

Arabic to Roman

---

Convert 阿拉伯到羅馬

---

兌換

There is no programmatic limitation to the number 5,000 or beyond. The algorithm that governs the conversion would work all the same.

5,000或以上的人數(shù)沒有編程限制。 控制轉(zhuǎn)換的算法將完全相同。

The space required to display Roman numeral equivalents of large numbers grows larger and larger without much added benefit of revealing something new.

顯示大數(shù)的羅馬數(shù)字等效項(xiàng)所需的空間越來越大，而沒有揭示新事物的更多好處。

The code itself consists of an HTML part describing the content with inline styles for ease of interaction and added JavaScript for functionality.

該代碼本身包括一個(gè)HTML部分，該部分以內(nèi)聯(lián)樣式描述內(nèi)容以簡化交互，并添加了JavaScript以實(shí)現(xiàn)功能。

The is an input element of the type "number" to limit input data to numeric values and two buttons. The "Convert" button is wired to the function that performs the conversion, and the "Display" button outputs the Roman number equivalent.

是輸入類型“數(shù)字”，用于將輸入數(shù)據(jù)限制為數(shù)值和兩個(gè)按鈕。 “轉(zhuǎn)換”按鈕連接到執(zhí)行轉(zhuǎn)換的功能，“顯示”按鈕輸出等效的羅馬數(shù)字。

Why output through a button element? Styling worked well when applied to both buttons together. And considering the limited functionality of the embed, it seemed like a time saver.

為什么通過按鈕元素輸出？ 一起應(yīng)用于兩個(gè)按鈕時(shí)，樣式效果很好。 考慮到嵌入的功能有限，這似乎節(jié)省了時(shí)間。

For clarity, these elements are assigned to variables:

為了清楚起見，將這些元素分配給變量：

const inputField = document.querySelector('input'); // input element const convertButton = document.getElementById('convert'); // convert button const outputField = document.getElementById('display'); // output element

Function convertToRoman() contains the logic and renders the result:

函數(shù)convertToRoman()包含邏輯并呈現(xiàn)結(jié)果：

function convertToRoman() {let arabic = document.getElementById('arabicNumeral').value; // input valuelet roman = ''; // variable that will hold the result }

The numerical value from input element is saved in a variable called "arabic" for further testing. The variable named "roman" will hold the string representing Roman equivalent of Arabic input.

輸入元素的數(shù)值保存在名為“ arabic ”的變量中，以進(jìn)行進(jìn)一步測試。 名為“ roman ”的變量將保存表示與阿拉伯文輸入法等效的字符串。

Next, there are two arrays of equal lengths, one holding Arabic numerals and one holding their Roman counterparts. Both are in descending order to simplify subtraction:

接下來，有兩個(gè)等長的數(shù)組，一個(gè)數(shù)組包含阿拉伯?dāng)?shù)字，一個(gè)數(shù)組包含羅馬數(shù)字。 兩者均為降序以簡化減法：

// descending order simplifies subtraction while looping const arabicArray = [5000, 4000, 1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1] const romanArray = ['V&#773;', 'MV&#773;','M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']

Unicode tables help with forming symbols greater than 1,000.

Unicode表有助于形成大于1,000的符號(hào)。

Finally, here is the logic that test the inputted number and converts it.

最后，這是測試輸入的數(shù)字并將其轉(zhuǎn)換的邏輯。

if (/^(0|[1-9]\d*)$/.test(arabic)) {// Regular expression testsif (arabic == 0) {// for decimal points and negativeoutputField.innerHTML = "Nulla"; // signs} else if (arabic != 0) {for (let i = 0; i < arabicArray.length; i++) {while (arabicArray[i] <= arabic) {roman += romanArray[i];arabic -= arabicArray[i];}}outputField.innerHTML = roman;} } else {outputField.innerHTML ="Please enter non negative integers only. No decimal points."; }

The first test checks for decimal points and negative signs. If found, the message asks to "enter non-negative integers only."

第一個(gè)測試檢查小數(shù)點(diǎn)和負(fù)號(hào)。 如果找到，該消息將要求“僅輸入非負(fù)整數(shù)”。

The next test checks whether the number entered equals zero. In such a case, the string "Nulla" is displayed.

下一個(gè)測試檢查輸入的數(shù)字是否等于零。 在這種情況下，將顯示字符串“ Nulla”。

Otherwise, the loops keep concatenating Roman strings while subtracting Arabic numbers until the latter satisfies the condition for the while loop. Then it displays the Roman equivalent of the user input.

否則，循環(huán)將繼續(xù)連接羅馬字符串，同時(shí)減去阿拉伯?dāng)?shù)字，直到阿拉伯?dāng)?shù)字滿足while循環(huán)的條件為止。 然后顯示與用戶輸入等效的羅馬字。

Just like with the interactive chart, the code for the Roman Numeral Converter is all set for you to copy it and embed it into any article. Here's the full code repository.

就像交互式圖表一樣，Roman Numeral Converter的代碼已全部設(shè)置好，可以將其復(fù)制并嵌入到任何文章中。 這是完整的代碼存儲(chǔ)庫 。

翻譯自: https://www.freecodecamp.org/news/roman-numeral-converter-interactive-roman-numerals-chart/

交互式圖表

總結(jié)

以上是生活随笔為你收集整理的交互式图表_如何构建罗马数字转换器和交互式罗马数字图表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。