使用HTML CSS和JavaScript计算回文个数

在本文中，我们将使用HTML、CSS和JavaScript创建一个回文计数应用程序。回文是由重新排列的字符或字母组成的单词，以随机顺序排列。这些单词包含相同的字母。这些重新排列的单词在排序之后会得到相同的单词，使用相同的字母。

请考虑下面的例子来检查特定的单词是否是回文，并且计算它们的数量：

Input: forxxorfxdofr  
           for  
Output: 3  
Explanation: Anagrams of the word for – for, orf, ofr appear in the text and hence the count is 3.

在这里，我们将从用户获取输入字符串和输入单词，并计算该单词在字符串中可能的变位词的数量。它将显示数量，并且输出将显示单词的哪些变位词存在。

先决条件

此应用程序的先决条件是：

方法：

首先，使用HTML标签创建一个Web页面的基本结构，比如使用输入和标签来获取用户的输入，使用一个按钮来提交该输入，并使用

h3>和

标签来输出文本。还要使用div和span来形成外部结构，同时使用相关的类名和ID。
* 使用类名为Web页面设置CSS样式，比如使用box-shadow来创建卡片视图，使用外边距和填充来添加间距，使用text-align来进行对齐，使用display类型来设置各个元素的显示样式。
* 在JavaScript中创建一个触发器功能fun，该功能在点击提交按钮时触发。计算并显示给定字符串中单词的现有变位词。
* 在此功能内部，使用HTML的ID来访问元素，以获取用户的输入和显示输出，如上面示例图像所示。

示例： 下面的示例演示如何使用JavaScript检查字符串的变位词。

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1" /> 
    <link href="style.css" 
          rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="root"> 
        <h1>Count Anagrams</h1> 
        <div class="option"> 
            <span> 
                <label for="inputString"> 
                    Input String 
                </label> 
                <input id="inputString" 
                       type="text" 
                       value="forxxorfxdofr" /> 
            </span> 
            <span> 
                <label for="inputWord"> 
                      Enter  
                  </label> 
                <input id="inputWord" 
                       type="text" 
                       value="for" /> 
            </span> 
            <span style="text-align: center; width: 50%"> 
                <input style="text-align: center; width: 50%;"
                       type="button" 
                       value="Submit" 
                       onclick="fun()" /> 
            </span> 
        </div> 
        <h3 id="nums"></h3> 
        <p id="explain"></p> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

* { 
    box-sizing: border-box; 
    margin: 2%; 
} 
  
body { 
    text-align: center; 
    margin: auto; 
    display: flex; 
    flex-direction: column; 
} 
  
.root { 
    margin-top: 5%; 
    display: flex; 
    flex-direction: column; 
    width: 30rem; 
    margin: auto; 
    margin-top: 5%; 
    box-shadow: 0 4px 10px rgb(46, 63, 57); 
    background-color: rgb(122, 199, 173); 
    border-radius: 0 10px; 
    padding: 3%; 
} 
  
.option { 
    text-align: left; 
    display: flex; 
    flex-direction: column; 
    font-size: x-large; 
    padding: 2%; 
    margin: auto; 
} 
  
.option>span { 
    display: flex; 
    padding: 2%; 
} 
  
span>label { 
    width: 50%; 
} 
  
input { 
    width: 50%; 
    font-size: large; 
}

JavaScript

inputString.value = ""; 
inputWord.value = ""; 
nums.innerText = ""; 
explain.innerText = ""; 
  
function fun() { 
    let count = 0; 
    let res = []; 
    str = inputString.value; 
    word = inputWord.value; 
    if (str === "" || word === "") { 
        window.alert("Incorrect input!"); 
        return; 
    } 
  
    let n = str.length; 
    let wordLen = word.length; 
    srtWord = word.split("").sort().join(""); 
  
    for (let i = 0; i < n - wordLen + 1; ++i) { 
        let sub = str 
            .slice(i, i + wordLen) 
            .split("") 
            .sort() 
            .join(""); 
        if (sub === srtWord) { 
            count += 1; 
            res.push("'" + str.slice(i, i + wordLen) + "'"); 
        } 
    } 
    let explainres; 
    if (count === 0) explainres = "none"; 
    else explainres = res.join(","); 
  
    nums.innerText = 
        "Input string contains " + count + " Anagrams"; 
    explain.innerText = 
        "Anagrams of the word '" + 
        word + 
        "' are: " + 
        explainres; 
}

输出：

使用HTML CSS和JavaScript计算回文个数