js/jquery网页每次刷新随机显示不同的DIV
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js/jquery网页每次刷新随机显示不同的DIV相关的知识，希望对你有一定的参考价值。
用js/jquery，如何控制网页打开或者每次刷新都会随机显示不同的DIV内容？比如有三个DIV，从中随机选择一个DIV，另外的两个可以display:none。希望能支持多个DIV。分不多，希望懂的帮帮忙回答一下，谢谢，希望贴出代码。
function showRadomDiv()var total= document.getElementsByTagName("DIV").length;//获得div的总个数
var showDiv= Math.random()*10*n;//获得显示div的随机数
for(var i=0;i<total;i++)
if(i==showDiv)
document.getElementsByTagName("DIV")[i].style.display="block";//显示随机的div;
else
document.getElementsByTagName("DIV")[i].style.display="none";//隐藏其它div,
window.onload=
showRadomDiv();//当页面打开或者页面刷新的时候调用函数
参考技术A $(document).ready(functon()
var DivList=$("div");
var n=DivList.length;//div数量
var number= Math.random()*10*n;//随即其中一个
for(var i=0;i<ni++)
if(i==number)
DivList[i].show();
else
DivList[i].hide();
参考技术B <div id="div1" style="display:none;">123</div>
<div id="div2" style="display:none;">456</div>
<div id="div3" style="display:none;">789</div>
<script language="javascript">
<!--
var n=3;
var divnum=parseInt(n*Math.random()+1);
var divname="div"+divnum.toString();
document.getElementById(divname).style.display="block";
//-->
</script> 参考技术C 原理：获取秒数，并截取第一位数即1--6，然后判断是1还是2.···还是6，再将所有的div隐藏掉然后具体显示哪个div，思路大概就是这样了
<SCRIPT language=JavaScript>
today=new Date();
var a = today.getSeconds();//秒
a=a.substring(0,1);
switch(a)
case "1":
$("div").hide();
$("#id").show();
break;
case "2":
$("div").hide();
$("#id").show();
break;
//依此类推
JS写随机数
使用JS编写一个方法 让数组中的元素每次刷新随机排列(不得使用sort方法；需注明步骤思路)。例如：初始数组：a,b,c,d 每次刷新页面都会显示不同：b,c,d,a….a,d,c,b…等等
代码：
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<!--变换顺序按钮-->
<input type="button" id="btnSort" value="变换顺序"/>
<script type="text/javascript" charset="UTF-8">
var arr=["a","b","c","d"]; //定义一个数组，内容为a，b，c，d
var btn=document.getElementById("btnSort"); //获取按钮button的节点
btn.onclick=function(){
var newArr=arrSort(arr);
console.log(newArr.join(",")); //将数组newArr的内容，在控制台以逗号分开进行输出
}
function arrSort(arr){ //定义一个函数
var newArr=[]; //定义一个新的数组
var temp=[]; //定义一个新的数组
for(var p in arr){ //引用类型不能直接用等号，通过循环来进行复制； 这里的p为下标，表示为取数组arr中的下标
temp[p]=arr[p]; //将数组arr中的数赋值给新数组temp
}
for(var i=0;i<arr.length;i++){ //随机数 最小值为0； 最大值为 数组的长度-1
var random=Math.round(Math.random()*(temp.length-1)); //生成0-数组temp.length-1的随机数
newArr[i]=temp[random]; //将数组temp随机生成的数赋值给新数组newArr
temp.splice(random,1); //删除已经生成了的随机数对应的数组temp下标的值；
}
return newArr;
}
</script>
</body>
</html>
以上是关于js/jquery网页每次刷新随机显示不同的DIV的主要内容，如果未能解决你的问题，请参考以下文章