首页帮我写一段前端代码，要求用Html写页面，用css美化页面，页面上有两个文本框，分别是输入字符串和输入数字的，同时有两个按钮，分别命名为“点我进行字符串排序”和“点我进行数字排序”，点击后要求使用javascript中的数组和函数实现字符串和数字的排序

帮我写一段前端代码，要求用Html写页面，用css美化页面，页面上有两个文本框，分别是输入字符串和输入数字的，同时有两个按钮，分别命名为“点我进行字符串排序”和“点我进行数字排序”，点击后要求使用javascript中的数组和函数实现字符串和数字的排序

时间: 2024-05-27 18:11:38 浏览: 185

<!DOCTYPE html> <html> <head> <title>排序页面</title> <style> body{ background-color: #F8F8F8; font-family: Arial, sans-serif; } h1{ text-align: center; margin-top: 50px; } form{ margin: 50px auto; width: 400px; padding: 20px; background-color: #FFFFFF; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } input[type="text"], input[type="number"]{ width: 100%; padding: 10px; margin-bottom: 20px; border-radius: 5px; border: none; background-color: #F2F2F2; } input[type="submit"]{ background-color: #4CAF50; color: #FFFFFF; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } input[type="submit"]:hover{ background-color: #3E8E41; } </style> </head> <body> <h1>排序页面</h1> <form> <label for="string-input">输入字符串：</label> <input type="text" id="string-input"> <label for="number-input">输入数字：</label> <input type="number" id="number-input"> <input type="submit" value="点我进行字符串排序" onclick="sortString()"> <input type="submit" value="点我进行数字排序" onclick="sortNumber()"> </form> <script> function sortString(){ var stringInput = document.getElementById("string-input").value; var stringArray = stringInput.split(""); stringArray.sort(); var sortedString = stringArray.join(""); alert("排序后的字符串为：" + sortedString); } function sortNumber(){ var numberInput = document.getElementById("number-input").value; var numberArray = numberInput.split(""); numberArray.sort(function(a, b){return a-b}); var sortedNumber = numberArray.join(""); alert("排序后的数字为：" + sortedNumber); } </script> </body> </html>

阅读全文