简朴的一点款式
<style>
label{display: block; margin-bottom: 10px;}
input{width: 20px; line-height: 20px; padding: 5px;border: 1px solid #ccc;}
textarea{width:95%; height: 100px; resize: unset; margin: 10px auto; padding: 5px; border: 1px solid #ccc;}
button{display:block;}
p{width: 100%; line-height: 24px;}
</style>
html构造
<label>
输入数字的分隔符:<input type="text" id="numSplit" value=",">
</label>
<label>
盘算效果数字的分隔符:<input type="text" id="countSplit" value=".">
</label>
<label>
输入数字:<textarea type="text" id="num"></textarea>
</label>
<button type="button" onclick="getCount()">盘算效果</button>
<p id="result"></p>
js代码
function getCount() {
// 初始化
document.getElementById('result').innerHTML = '';
var num = document.getElementById('num').value;
var numSplit = document.getElementById('numSplit').value;
var countSplit = document.getElementById('countSplit').value;
var countObj = new Object();
var resultObj = new Object();
// 正则婚配数字间的恣意标记并把分隔符替换成,
var reg = /[`~\!@#\$%\^&\*\(\)\-\+_=\\\;:'"<,.>\?\/|%·!¥……()——【】、;:’“‘”,《》。?]/g;
num = num.replace(reg, ',');
countSplit = countSplit || '/';
// 盘算数字的反复个数
if (num.indexOf(numSplit) !== -1) {
var arr = num.split(numSplit);
for (var i = 0; i < arr.length; i++) {
// arr[i]数字值为key,涌现的次数为value
countObj[arr[i]] = countObj[arr[i]] ? countObj[arr[i]] + 1 : 1;
}
} else {
alert('请输入准确的数字分隔符');
}
// 盘算反复个数雷同的数字
// countObj对象
// 1 i :2 countObj[i],
// 2:2,
// 3:1,
// 4:2,
// resultObj对象
// 2 countObj[i]:1/2/4 i,
// 1:3
for (i in countObj) {
// 涌现的次数为key, 涌现这些次数的数字为value.
resultObj[countObj[i]] = resultObj[countObj[i]] ? resultObj[countObj[i]] + countSplit + i : i;
}
var newkey = Object.keys(resultObj).reverse();
for (var i = 0; i < newkey.length; i++) {
document.getElementById('result').innerHTML += '涌现的次数:' + newkey[i] + ', 数字:' + resultObj[
newkey[i]] +'<br/>';
}
}
运转效果:
输入1,2,3,4,5,2,3,4
涌现的次数:2, 数字:'2/3/4'
涌现的次数:1, 数字:'1/5'