10 天 JavaScript Hackerrank 解决方案

2025年3月2日 | 阅读 17 分钟

10 天 JavaScript 是 HackerRank 网站上的一系列教程和挑战。HackerRank 以其富有挑战性的编程问题而闻名，这些问题对于程序员在编码面试中取得成功至关重要，并且是学生学习旅程中的基础铺垫。

10 天 JavaScript 的结构安排涵盖了 JavaScript 的各个方面，从基础到高级。通过这些挑战，可以确保对 JavaScript 的基础概念有扎实的掌握。

有时解决这些问题可能具有挑战性，在这种情况下，获得建议和查看解决方案会有所帮助。本文旨在为此目的提供帮助。在本文中，我们将讨论 HackerRank 上“10 天 JavaScript”中每天问题的解决方案。

第 0 天：Hello World!

“10 天 JavaScript”中的 Hello World 涵盖了语言的基础知识，并将学习者引入了编程语言的第一个概念。它涵盖了 JavaScript 编程语言的输出打印、标识符、注释、基本语法和字面量。

问题

编辑器提供了一个带有参数 variableVariable 的 greeting 函数。要完成挑战，请使用 console.log() 显示 “Hello, World!” 和 variableVariable 的内容。

解决方案

function greeting(parameterVariable) {
  // This line prints 'Hello, World!' to the console:
  console.log('Hello, World!');

  // Print the contents of the parameterVariable on a new line:
  console.log(parameterVariable);
}

编辑器已经提供了 greeting 函数。它已经打印了 “Hello, World!”。

已添加以下行：console.log(variableVariable)。此行打印传递给函数的 variableVariable 参数的值。

第 0 天：数据类型

下一章揭示了 JavaScript 中另一个非常重要的概念：数据类型。“10 天 JavaScript”中的数据类型涵盖了所有数据类型、类型运算符、动态类型、变量命名、声明和初始化等。

问题

编辑器首先声明了 firstInteger、firstDecimal 和 firstString 变量。您需要使用 + 运算符来连接 firstString 和 secondString，将 secondDecimal 转换为浮点数并将其添加到 firstDecimal，然后将 secondInteger 转换为整数并将其添加到 firstInteger。打印结果时，请确保 firstString 最先打印。

解决方案

function performOperation(secondInteger, secondDecimal, secondString) {
  // Declare a variable named 'firstInteger' and initialize with integer value 4.
  const firstInteger = 4;

  // Declare a variable named 'firstDecimal' and initialize with floating-point value 4.0.
  const firstDecimal = 4.0;

  // Declare a variable named 'firstString' and initialize it with the string "HackerRank ".
  const firstString = 'HackerRank ';

  // 1. The sum of firstInteger and secondInteger (converted to integer)
  console.log(firstInteger + Number(secondInteger));

  // 2. The sum of firstDecimal and secondDecimal (converted to float)
  console.log(firstDecimal + parseFloat(secondDecimal));

  // 3. Concatenation of firstString and secondString
  console.log(firstString + secondString);
}

performOperation 函数中包含了连接第一个和第二个字符串、相加第一个和第二个整数以及相加第一个和第二个小数等操作的逻辑。它将 secondInteger 字符串解析为浮点数，将其转换为数字，然后输出结果。函数中使用了连接运算符 +。

第 1 天：算术运算符

“10 天 JavaScript”中的算术运算符涵盖了 JavaScript 的一个关键主题：运算符。本节将运算符分为一元、二元和三元运算符，并涵盖了算术运算符。

问题

在下面的编辑器中，执行以下任务：

getArea(length, width) 函数计算并返回以 length 和 width 为边的矩形的面积。
getPerimeter(length, width) 函数计算并返回以 length 和 width 为边的矩形的周长。

解决方案

function getArea(length, width) {
  // Area of a rectangle is length multiplied by width
  const area = length * width;
  return area;
}

function getPerimeter(length, width) {
  // Perimeter of a rectangle is 2(length + width)
  const perimeter = 2 * (length + width);
  return perimeter;
}

getArea 和 getPerimeter 函数分别使用公式 length * width 和 2 * (length + width) 来计算面积和周长，并返回计算出的值。

第 1 天：函数

本章涵盖了 JavaScript 高级函数的基础知识，并介绍了编程中一个非常重要的概念：递归。当函数定义内部调用函数时，就会发生递归。

问题

实现一个以 n 为参数并返回其阶乘（即 n!）的函数。

解决方案

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}
console.log(factorial(5)); // Output: 120

factorial 函数以 n 为参数，当 n 为 0 或 1 时返回 1。否则，函数返回 n 和 factorial(n-1) 的乘积。因此，这里使用递归概念来计算给定数字的阶乘。还有另一种解决此问题的方法，即使用循环。

第 2 天：let 和 const

本系列本章介绍了 JavaScript 中的 let、var 和 const。它们在不同的场景下很有用，本章将讨论它们的用法和重要性。解决下面的挑战可以确保对该概念有扎实的掌握。

问题

声明一个常量变量 PI，并赋予其 Math.PI 的值。接下来，从标准输入读取一个表示圆的半径 r 的值。使用 PI 和 r 来获取半径为 r 的圆的面积和周长。使用 console.log() 打印参数和面积。

解决方案

function main() {
    // Declare a constant variable PI and give it the value Math.PI
    const PI = Math.PI;

    // Read a value from stdin that represents a circle's radius, r
    const radius = parseFloat(readLine());

    // Calculate the area of the circle
    const area = PI * Math.pow(radius, 2);

    // Calculate the perimeter (or parameter) of the circle
    const perimeter = 2 * PI * radius;

    // Print the area and perimeter of the circle
    console.log(area);
    console.log(perimeter);
}

此代码声明了常量变量 PI，其值为 Math.PI。然后从标准输入读取圆的半径。使用提供的公式计算圆的面积和周长，然后使用 console.log() 打印结果。

第 3 天：条件语句：If-Else

条件语句的第一章涵盖了 if-else 语句，这在许多场景下都很有用。下面的问题提供了一个练习挑战。

问题

完成编辑器中的 getGrade(score) 函数。它只有一个参数：一个表示 Julia 考试总分的整数。必须返回与其等级对应的字母。

解决方案

function getGrade(score) {
  let grade;
  if (score >= 90) {
    grade = 'A';
  } else if (score >= 80) {
    grade = 'B';
  } else if (score >= 70) {
    grade = 'C';
  } else if (score >= 60) {
    grade = 'D';
  } else {
    grade = 'F';
  }
  return grade;
}

代码定义了一个名为 getGrade 的函数，该函数接受一个整数 score 并返回其字母等级。它使用一系列 if-else 语句来确定适当的等级，基于以下标准：如果分数大于或等于 90，则为“A”，大于或等于 80，则为“B”，大于或等于 70，则为“C”，大于或等于 60，则为“D”。否则，等级为“F”。

第 3 天：条件语句：Switch

本章揭示了另一个重要的条件语句，即 switch 语句。这允许您在不使用繁琐的 if-else-if 语句的情况下检查各种情况。

问题

在编辑器中完成 getLetter(s) 函数。它有一个参数：一个由小写英文字母（即 a 到 z）组成的字符串。它必须根据以下标准返回 A、B、C 或 D。

解决方案

function getLetter(s) {
    let letter;
    switch (s[0]) {
        case 'a':
        case 'e':
        case 'i':
        case 'o':
        case 'u':
            letter = 'A';
            break;
        case 'b':
        case 'c':
        case 'd':
        case 'f':
        case 'g':
            letter = 'B';
            break;
        case 'h':
        case 'j':
        case 'k':
        case 'l':
        case 'm':
            letter = 'C';
            break;
        Default:
            letter = 'D';
            break;
    }
    return letter;
}

此代码创建了 getLetter 方法，该方法使用 switch 语句和字符串 s 作为输入来确定字符串 s 的第一个字母的类别。该函数使用挑战中的准则来确定哪个字母（“A、B、C 或 D”）与之对应。

第 3 天：循环

本章探讨了各种 JavaScript 循环技术，并对关键的控制流方法进行了全面分析。它涵盖了 for、while、do-while、for-in 和 for-of 循环。

问题

首先，在每一行打印一个元音字母。英语元音是 a、e、i、o 和 u，每个元音字母都必须按其出现的顺序打印。

其次，在每一行打印每个辅音字母（即非元音字母），按其出现的顺序打印。

解决方案

function vowelsAndConsonants(s) {
    const vowels = 'aeiou';
    let consonants = '';

    for (let char of s) {
        if (vowels.includes(char)) {
            console.log(char);
        } else {
            consonants += char + '\n';
        }
    }

    console.log(consonants.trim());
}

// Example:
// If the input string is "javascriptloops"
// Output:
// a
// a
// i
// o
// o
// e
// j
// v
// s
// c
// r
// p
// t
// l
// p
// s

此代码定义了 vowelsAndConsonants 函数，该函数遍历输入字符串中的每个字母。它确定字母是否为元音，如果是，则在一行中打印它。如果它是辅音，则将该字母添加到辅音字符串中，并在打印完所有元音字母后，将所有辅音字母写在单独的行中。

第 4 天：数组

本章提供了对 JavaScript 中数组基本操作的全面概述，使您能够充分利用这种灵活数据结构的强大功能。它从数组生成开始，然后继续进行索引和访问数组对象等重要主题。

问题

此挑战讲解了数组及其在 Python 中的用法。getSecondLargest 函数接受一个整数数组作为输入，并返回数组中的第二大数字。

解决方案

function getSecondLargest(nums) {
    // Remove duplicates by converting the array to a Set and then back to an array
    const uniqueNums = Array.from(new Set(nums));

    // Sort the array in descending order
    const sortedNums = uniqueNums.sort((a, b) => b - a);

    // Return the second element in the sorted array
    return sortedNums[1];
}

function main() {
    const n = +(readLine());
    const nums = readLine().split(' ').map(Number);
    
    console.log(getSecondLargest(nums));
}

此实现从数组中删除重复项，按降序对其进行排序，然后返回第二个元素，即第二大数字。

第 4 天：Try, Catch, 和 Finally

本章阐明了 JavaScript 编程的两个基本组成部分：“字符串基础”和“错误处理”。

问题

可以使用 split、reverse 和 join 方法来反转字符串，reverseString 函数接受一个字符串输入 s。如果发生异常，则在新建一行中写入消息。如果没有发生异常，则返回反转后的字符串，如果发生异常，则返回原始字符串。

解决方案

function reverseString(s) {
    try {
        // Attempt to reverse the string using split, reverse, and join
        const reversedString = s.split('').reverse().join('');
        console.log(reversedString);
    } catch (error) {
        // Catch and print the exception's message if an error occurs
        console.log(error.message);
    } finally {
        // Print the original string regardless of success or failure
        console.log(s);
    }
}

// Example usage:
const inputString = "Hello, World!";
reverseString(inputString);

此函数尝试使用 split、reverse 和 join 方法反转输入字符串。

第 4 天：Throw

本章涵盖 JavaScript 错误：try、catch、finally 和 throw。因此，它完成了 JavaScript 错误处理。

问题

isPositive 函数的参数是一个名为 a 的整数。如果 a 为正数，则返回 YES，否则抛出错误。如果 a 为负数，则抛出 Negative Error，如果 a 为 0，则返回 Zero Error。

解决方案

function isPositive(a) {
    if (a > 0) {
        return "YES";
    } else if (a === 0) {
        throw new Error("Zero Error");
    } else {
        throw new Error("Negative Error");
    }
}

// Example usage:
try {
    const result = isPositive(5); // Change the argument to test different cases
    console.log(result);
} catch (error) {
    console.log(error.message);
}

此函数确定输入的整数是否为正数。如果 a 为正数，则返回字符串“YES”。如果 a 为 0，则抛出带有消息“Zero Error”的错误。如果 a 为负数，则抛出带有消息“Negative Error”的错误。

第 5 天：创建矩形对象

本章探讨 JavaScript 对象。它从基本介绍开始，然后继续创建对象。

问题

Rectangle 函数提供一个表示矩形的对象，并接受两个参数 a 和 b。矩形对象应具有以下因子：面积等于长度和宽度的乘积，周长等于长度和宽度的总和，长度等于 a。

解决方案

function Rectangle(a, b) {
  this.length = a;
  this.width = b;
  this.perimeter = 2 * (a + b);
  this.area = a * b;
}

const rect = new Rectangle(5, 3);
console.log(rect.length); // Output: 5
console.log(rect.width); // Output: 3
console.log(rect.perimeter); // Output: 16
console.log(rect.area); // Output: 15

上面给出的代码完美地解决了提出的问题。

第 5 天：计数对象

本章介绍了 for、for in、forEach 循环来计数对象。

问题

编辑器函数需要一个对象数组，其中包含两个整数属性 x 和 y。其目标是返回数组中满足 o.x==o.y 的对象 o 的计数。

解决方案

function getCount(objects) {
    let count = 0;

    for (let obj of objects) {
        if (obj.x === obj.y) {
            count++;
        }
    }

    return count;
}

// Example usage:
const sampleObjects = [
    { x: 1, y: 1 },
    { x: 2, y: 3 },
    { x: 4, y: 4 },
    { x: 5, y: 5 },
];

const result = getCount(sampleObjects);
console.log(result); // Output: 3

第 5 天：类

本章涵盖 JavaScript 中面向对象编程的基础知识。

问题

在编辑器中创建一个 Polygon 类并测试 perimeter() 函数和构造函数。构造函数接受一个整数值数组作为边长，perimeter 方法返回多边形的周长。

解决方案

class Polygon {
    constructor(sideLengths) {
        this.sideLengths = sideLengths;
    }

    perimeter() {
        return this.sideLengths.reduce((sum, side) => sum + side, 0);
    }
}

// Example usage:
const polygon = new Polygon([3, 4, 5, 6]);
console.log(polygon.perimeter()); // Output: 18

此代码提供了给定问题的解决方案的完整实现。

第 6 天：继承

“10 天 JavaScript”系列本章涵盖了 JavaScript 中继承的基础知识。

问题

编辑器提供了一个 Rectangle 类的实现；要使用它，您必须向原型添加一个 area 方法，并创建一个继承自 Rectangle 的 Square 类，该类有一个构造函数，并且可以使用 Rectangle 类的 area 方法。

解决方案

class Rectangle {
    constructor(w, h) {
        this.w = w;
        this.h = h;
    }

    area() {
        return this.w * this.h;
    }
}

// Create a Square class that inherits from Rectangle
class Square extends Rectangle {
    constructor(side) {
        // Call the constructor of the parent class (Rectangle)
        super(side, side);
    }
}

// Example usage
if (JSON.stringify(Object.getOwnPropertyNames(Square.prototype)) === JSON.stringify(['constructor'])) {
    const rec = new Rectangle(3, 4);
    const sqr = new Square(3);

    console.log(rec.area()); // Output: 12
    console.log(sqr.area()); // Output: 9
} else {
    console.log(-1);
    console.log(-1);
}

Square 类使用 extends 关键字作为 Rectangle 的子类构造的，而 Rectangle 类包含一个用于计算矩形面积的 area 方法。Square 类通过 super(side, side) 构建一个具有边长的构造函数。

第 6 天：模板字面量

问题

要解决此问题，需要 sides 函数，该函数接受字面量、字符串数组和表达式，以及一个通过字符串插值提供值的 rest 参数。使用公式 s₁ 和 s₂ = P ± √(P² - 16A)) / 4，该函数应能够根据矩形的面积和周长确定其边长。

解决方案

function sides(literals, ...expressions) {
  // Extract the area and perimeter from the expressions array
  const [area, perimeter] = expressions;

  // Calculate s1 and s2 using the formula
  const s1 = (perimeter + Math.sqrt(perimeter * perimeter - (16 * area))) / 4;
  const s2 = (perimeter - Math.sqrt(perimeter * perimeter - (16 * area))) / 4;

  // Sort s1 and s2 in ascending order
  const sortedSides = [s1, s2].sort((a, b) => a - b);

  // Return the sorted array of side lengths
  return sortedSides;
}

const result = sides`The area is: ${area}, the perimeter is: ${perimeter}. 
The sides are: ${sides[0]} and ${sides[1]}.`;
console.log(result);

第 6 天：箭头函数

本章探讨了箭头函数的介绍和实现。

问题

编辑器中的函数接受一个数组 nums，并在每次迭代数组时将偶数和奇数项分别乘以二和三，然后返回更新后的数组。

解决方案

function modifyArray(nums) {
    // Iterate through the array and modify elements based on their parity
    for (let i = 0; i < nums.length; i++) {
        if (nums[i] % 2 === 0) {
            // If the element is even, multiply by 2
            nums[i] *= 2;
        } else {
            // If the element is odd, multiply by 3
            nums[i] *= 3;
        }
    }

    // Return the modified array
    return nums;
}

// Example usage
const originalArray = [1, 2, 3, 4, 5];
const modifiedArray = modifyArray(originalArray);

console.log("Original Array:", originalArray);   // Output: [1, 2, 3, 4, 5]
console.log("Modified Array:", modifiedArray);   // Output: [3, 4, 9, 8, 15]

第 7 天：按位运算符

本章涵盖了 JavaScript 中的按位运算符。它从数字系统转换开始，然后通过示例用法探讨每个按位运算符。

问题

任务要求您确定序列 S 中任意两个数字 a 和 b，其按位 AND 值小于给定整数 k 的最大值。

解决方案

function getMaxLessThanK(n, k) {
  // Initialize the result variable to 0
  let result = 0;

  // Iterate from n - 1 down to 1 (excluding n)
  for (let i = n - 1; i > 0; i--) {
    // Perform bitwise AND between the current element (i) and the result
    result = result & i;

    // Check if the result is no longer less than k
    if (result >= k) {
      break;
    }
  }

  // Return the final result
  return result;
}

第 7 天：JavaScript 日期

本章探讨了 JavaScript 中的日期和时间以及使用 get 方法获取日期的方法。

问题

该函数以 MM/DD/YYYY 格式返回日期字符串的星期名称，例如，对于 12/07/2016，它可以是星期日、星期一、星期二、星期三、星期四、星期五或星期六。

解决方案

function getDayName(dateString) {
    const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

    // Create a Date object from the dateString
    const dateObject = new Date(dateString);

    // Get the day of the week index (0 for Sunday, 1 for Monday, and so on)
    const dayIndex = dateObject.getUTCDay();

    // Get the day name based on the index
    dayName = daysOfWeek[dayIndex];

    return dayName;
}

// Example usage
const exampleDateString = "12/07/2016";
const dayName = getDayName(exampleDateString);

console.log(`The day name for ${exampleDateString} is: ${dayName}`);

第 8 天：正则表达式 I

本章涵盖了 JavaScript 中正则表达式的基础知识。

问题

通过返回一个 RegExp 对象 re，该对象匹配以相同元音字母开头和结尾的任何字符串 s，可以完成下面编辑器中的方法。请记住，英语中有五个元音字母：a、e、i、o 和 u。

解决方案

function regexVar() {
    /*
     * Declare a RegExp object variable named 're'
     * It must match a string that starts and ends with the same vowel (i.e., {a, e, i, o, u})
     */

    // Using a regular expression with a capturing group for a vowel and a backreference,
    let re = /^([aeiou]).*\1$/;

    /*
     * Do not remove the return statement
     */
    return re;
}

// Example usage
const regex = regexVar();
const testString = "abcda"; // Replace this with any test string
console.log(regex.test(testString)); // Output: true or false

第 8 天：正则表达式 II

涵盖 JavaScript 中正则表达式的中间级概念。

问题

编辑器中的方法生成一个名为 re 的 RegExp 对象，该对象匹配满足两个要求的任何文本：字符串必须以前缀 Mr.、Mrs.、Ms.、Dr. 或 Er 中的一个开头，并且其余字符必须是英文字母表中的大写、小写或首字母。

解决方案

function regexVar() {
    /*
     * Declare a RegExp object variable named 're'
     * It must match a string that starts with 'Mr.', 'Mrs.', 'Ms.', 'Dr.', or 'Er.', 
     * followed by one or more letters.
     */

    let re = /^(Mr\.|Mrs\.|Ms\.|Dr\.|Er\.)[a-zA-Z]+$/;

    /*
     * Do not remove the return statement
     */
    return re;
}

// Example usage
const regex = regexVar();
const testString = "Mr. Smith"; // Replace this with any test string
console.log(regex.test(testString)); // Output: true or false

第 8 天：正则表达式 III

第 7 天本章涵盖了 JavaScript 中正则表达式的高级概念。

问题

在下面的编辑器中，通过返回一个 RegExp 对象 re 来完成函数，该对象匹配字符串 s 中的每个数字。

解决方案

function regexVar() {
    /*
     * Declare a RegExp object variable named 're'
     * It must match ALL occurrences of numbers in a string.
     */

    let re = /\d+/g;

    /*
     * Do not remove the return statement
     */
    return re;
}

// Example usage
const regex = regexVar();
const testString = "There are 123 apples and 456 oranges in the basket.";
console.log(testString.match(regex)); // Output: ['123', '456']

第 9 天：创建按钮

本章探讨了使用 HTML 设计按钮并通过 JavaScript 为其添加功能。

问题

创建一个可点击的按钮，具有以下属性：id：btn，样式属性：宽度 96px，高度 48px，字体大小：24px，初始文本标签：0，每次点击增加 1。文本标签是按钮的 innerHTML 属性。按钮的高度和宽度已给出。

解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #btn {
            width: 96px;
            height: 48px;
            font-size: 24px;
        }
    </style>
    <title>Clickable Button</title>
</head>
<body>

<button id="btn" onclick="incrementButtonClick()">0</button>

<script>
    let clickCount = 0;

    function incrementButtonClick() {
        clickCount++;
        document.getElementById("btn").innerHTML = clickCount;
    }
</script>

</body>
</html>

第 9 天：按钮容器

本章探讨了使用 JavaScript 创建按钮容器和缩放按钮布局。

问题

该任务涉及在 div 中创建九个按钮，形成一个 3x3 网格，标签从 1 到 9 不同，并确保在单击中间按钮时，外围按钮顺时针旋转。代码必须满足编辑器中的特定标准。

解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #btns {
            width: 30%;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
        }

        button {
            width: 100%;
            height: 48px;
            font-size: 24px;
        }
    </style>
    <title>Rotating Buttons</title>
</head>
<body>

<div id="btns">
    <button id="btn1" onclick="rotateButtons()">1</button>
    <button id="btn2" onclick="rotateButtons()">2</button>
    <button id="btn3" onclick="rotateButtons()">3</button>
    <button id="btn4" onclick="rotateButtons()">4</button>
    <button id="btn5" onclick="rotateButtons()">5</button>
    <button id="btn6" onclick="rotateButtons()">6</button>
    <button id="btn7" onclick="rotateButtons()">7</button>
    <button id="btn8" onclick="rotateButtons()">8</button>
    <button id="btn9" onclick="rotateButtons()">9</button>
</div>

<script>
    function rotateButtons() {
        const outerButtonIds = ["btn1", "btn2", "btn3", "btn6", "btn9", "btn8", "btn7", "btn4"];
        const outerButtonValues = outerButtonIds.map(id => document.getElementById(id).innerHTML);

        // Rotate the values in a clockwise direction
        const rotatedValues = [outerButtonValues[7], ...outerButtonValues.slice(0, 7)];

        // Update the innerHTML of the outer buttons
        for (let i = 0; i < outerButtonIds.length; i++) {
            document.getElementById(outerButtonIds[i]).innerHTML = rotatedValues[i];
        }
    }
</script>

</body>
</html>

第 10 天：二进制计算器

本章涵盖了使用多个事件制作计算器。

问题

实现一个简单的计算器，它对二进制数执行以下操作：加法、减法、乘法和除法。请注意，除法运算必须仅为整数除法；例如，1001/100 = 10。

解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            width: 33%;
        }

        #res {
            background-color: lightgray;
            border: 1px solid black;
            height: 48px;
            font-size: 20px;
            padding: 5px;
            text-align: right;
            overflow: hidden;
        }

        button {
            width: 25%;
            height: 36px;
            font-size: 18px;
            margin: 0;
            float: left;
        }

        #btn0, #btn1 {
            background-color: lightgreen;
            color: brown;
        }

        #btnClr, #btnEql {
            background-color: darkgreen;
            color: white;
        }

        #btnSum, #btnSub, #btnMul, #btnDiv {
            background-color: black;
            color: red;
        }

        #btns {
            margin-top: 10px;
            overflow: hidden;
        }
    </style>
    <title>Binary Calculator</title>
</head>
<body>

<div id="res"></div>
<div id="btns">
    <button id="btn0" onclick="appendToResult('0')">0</button>
    <button id="btn1" onclick="appendToResult('1')">1</button>
    <button id="btnClr" onclick="clearResult()">C</button>
    <button id="btnEql" onclick="evaluateResult()">=</button>
    <button id="btnSum" onclick="appendToResult('+')">+</button>
    <button id="btnSub" onclick="appendToResult('-')">-</button>
    <button id="btnMul" onclick="appendToResult('*')">*</button>
    <button id="btnDiv" onclick="appendToResult('/')">/</button>
</div>

<script>
    function appendToResult(value) {
        document.getElementById('res').innerHTML += value;
    }

    function clearResult() {
        document.getElementById('res').innerHTML = '';
    }

    function evaluateResult() {
        try {
            const result = eval(document.getElementById('res').innerHTML);
            document.getElementById('res').innerHTML = result.toString(2);
        } catch (error) {
            document.getElementById('res').innerHTML = 'Error';
        }
    }
</script>

</body>
</html>

下一个主题Observables-in-javascript

10 天 JavaScript Hackerrank 解决方案

第 0 天：Hello World!

第 0 天：数据类型

第 1 天：算术运算符

第 1 天：函数

第 2 天：let 和 const

第 3 天：条件语句：If-Else

第 3 天：条件语句：Switch

第 3 天：循环

第 4 天：数组

第 4 天：Try, Catch, 和 Finally

第 4 天：Throw

第 5 天：创建矩形对象

第 5 天：计数对象

第 5 天：类

第 6 天：继承

第 6 天：模板字面量

第 6 天：箭头函数

第 7 天：按位运算符

第 7 天：JavaScript 日期

第 8 天：正则表达式 I

第 8 天：正则表达式 II

第 8 天：正则表达式 III

第 9 天：创建按钮

第 9 天：按钮容器

第 10 天：二进制计算器

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

10 天 JavaScript Hackerrank 解决方案

第 0 天：Hello World!

第 0 天：数据类型

第 1 天：算术运算符

第 1 天：函数

第 2 天：let 和 const

第 3 天：条件语句：If-Else

第 3 天：条件语句：Switch

第 3 天：循环

第 4 天：数组

第 4 天：Try, Catch, 和 Finally

第 4 天：Throw

第 5 天：创建矩形对象

第 5 天：计数对象

第 5 天：类

第 6 天：继承

第 6 天：模板字面量

第 6 天：箭头函数

第 7 天：按位运算符