js sort()和math.random()随机排列代码
<style>
fieldset{border:1px solid #ccc;width:720px; padding:15px}
fieldset legend{ background:#a40000; color:#fff;text-align:center; padding:0 8px; margin-left:25px}
h5 span{margin:0 6px;letter-spacing:0; font-weight:normal;font-size:12px; font-family:"microsoft yahei"; padding:3px 5px}
.color_0{background:#f09;color:#fff}
.color_1{background:#96c455;color:#fff}
.color_2{background:#4290a6;color:#fff}
.color_3{background:#dfebf7;color:#000}
.color_4{background:#4b936e;color:#fff}
.color_5{background:black;color:#fff}
.color_6{background:blue;color:#fff}
#demo td,#demo th { font-family: 5fae8f6f96c59ed1; }
</style><script>
window.onload=function(){
setinterval('randomfun()',3000)
}
function randomfun(){
var h5=document.getelementsbytagname('h5')[0]
var spanitem=h5.getelementsbytagname('span');
var random=function(){return math.random()>0.5 ? -1 : 1};//为sort()传入的随机排列参数
var spanarr=new array();//用来存放元素的数组
var css教程arr=new array();//用来存放样式值的数组
var k,m;
for(var i=0; i<spanitem.length; i++){
spanarr.push(spanitem[i]);//将元素存入元素数组
cssarr.push(i);//将对应的下标值存入样式值数组
}
spanarr.sort(random);//打乱元素数组排列顺序
cssarr.sort(random);//打乱样式值数组排列顺序
for(k=0; k<spanarr.length; k++){
h5.appendchild(spanarr[k]);//将打乱后的元素重新插入到页面中
}
for(m in cssarr){
spanarr[m].classname='color_'+cssarr[m];//将打乱后的样式加给元素
}
}
</script><div id="demo">
<fieldset>
<legend>利用sort()和math.random()实现元素的随机排列</legend>
<h5><span class="color_0">刷新我会变~</span><span class="color_1">走走停停看看</span ><span class="color_2">设备[nikon d3000]</span ><span class="color_3">[镜头]18-55mm vr</span ><span class="color_4">很业余,但很有乐趣</span ><span class="color_5">微距拍摄</span><span class="color_6">仗剑走天涯</span></h5></fieldset>
</div>
利用math.random()产生随机数, 再通过sort()进行随机排列.
function randomfun(){
var h5=document.getelementsbytagname('h5')[0]
var spanitem=document.getelementsbytagname('span');
var random=function(){return math.random()>0.5 ? -1 : 1};//为sort()传入的随机排列参数
var spanarr=new array();//用来存放元素的数组
var cssarr=new array();//用来存放样式值的数组
var k,m;
for(var i=0; i<spanitem.length; i++){
spanarr.push(spanitem[i]);//将元素存入元素数组
cssarr.push(i);//将对应的下标值存入样式值数组
}
spanarr.sort(random);//打乱元素数组排列顺序
cssarr.sort(random);//打乱样式值数组排列顺序
for(k=0; k<spanarr.length; k++){
h5.appendchild(spanarr[k]);//将打乱后的元素重新插入到页面中
}
for(m in cssarr){
spanarr[m].classname='color_'+cssarr[m];//将打乱后的样式加给元素
}
}