小算法去重加排序

最新推荐文章于 2024-12-20 10:07:16 发布

转载最新推荐文章于 2024-12-20 10:07:16 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sunweinan/p/6558842.html

文章标签：

#javascript #ViewUI

本文介绍了一个简单的网页交互案例，通过HTML与JavaScript实现了输入一组数据后去除重复并排序的功能。用户可以在文本框中输入逗号分隔的数值，点击按钮后页面将显示处理后的结果。文章提供了完整的代码示例，包括HTML结构、CSS样式和JavaScript逻辑。

<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
#box{
width: 500px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
position: relative;
}
#btn{
width: 50px;
height: 50px;
border: 1px solid black;
}
p{
position: absolute;
top: 0;
left: 300px;
}
</style>
</head>
<body>
<div id="box">
<form action="" method="post">
输入：<input type="text" id="shuru"/>
输出：<p id="shuchu"></p>
<div id="btn">
点击
</div>
</form>
</div>
</body>
</html>
<script type="text/javascript">
btn.onclick = function(){
var ele = shuru.value;
var strEle = ele.split(",");
var OutArr = qc(strEle);
var LastArr = px(OutArr);
//转化为字符串
var lastStr = LastArr.join();
shuchu.innerHTML = lastStr;
console.log(OutArr.join());
}
//去重
function qc(arr){
var Oarr = [];
for (var i = 0; i < arr.length; i++) {
if (Oarr.indexOf(Number(arr[i])) == -1) {
Oarr.push(Number(arr[i]));
}
}
return Oarr;
}
//排序
function px(arr){
var temp = "";
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j+1]) {
temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
return arr;
}
</script>