js数组随机打乱、倒序、正序排列

Html

Css

 li {
	list-style:none;
	display:inline-block;
	border:1px solid #777;
	width:50px;
	text-align:center;
}
div {
	text-align:center;
}

var ul = document.getElementById('ul');
 var arr = (function() {
     var arr = [];
     for (let i = 0; i < 100; i++) {
         arr.push(i)
         ul.innerHTML += '<li>' + i + '</li>'
     }
     return arr

}())
 //给数组对象的原型添加随机打乱，倒序，正序的方法
 Array.prototype.random = function() {
     this.sort(function() {
         return Math.round(Math.random()) - .5 //获取随机的正负数，返回的值正负数决定了sort如何排列
     })
     return this
 }
 Array.prototype.range = function() {
     this.sort(function(a, b) {
         return b - a
     })
     return this
 }
 Array.prototype.positive = function() {
     this.sort(function(a, b) {
         return a - b
     })
     return this
 }
 //定义将数组渲染的函数
 function write(array) {
     for (let i = 0; i < array.length; i++) {
         ul.innerHTML += '<li>' + array[i] + '</li>'
     }
 }
 document.getElementById('btn1').addEventListener('click', function() {
     arr = arr.range()
     ul.innerHTML = ''
     write(arr)
 })
 document.getElementById('btn2').addEventListener('click', function() {
     arr = arr.positive()
     ul.innerHTML = ''
     write(arr)
 })
 document.getElementById('btn3').addEventListener('click', function() {
     arr = arr.random()
     ul.innerHTML = ''
     write(arr)
 })

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js数组随机打乱、倒序、正序排列



代码描述：原生js将数组内的元素随机排列

更新时间：2020-03-09 12:12:59

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

??将军

相关代码

js数组随机打乱、倒序、正序排列

最新