JS随机函数random控制显示问题

1:<!DOCtype html PUbLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<TITLE>随机显示_caiying209</TITLE>
</HEAD>
<BODY >
<style>
*{padding:0;margin:0;font-size:12px}
body{padding:10px;}
li{LIST-STYLE-TYPE: none;float:left;margin-left: 2px;font-size:12px;margin:2px 5px;}
</style>
<div id=ad>
  <div id="">1、说话和气</div>
  <div id="">2、买卖公平</div>
  <div id="">3、借东西要还</div>
  <div id="">4、损坏东西要赔</div>
  <div id="">5、不打人骂人</div>
  <div id="">6、不损坏庄稼</div>
  <div id="">7、不调戏妇女</div>
  <div id="">8、不虐待俘虏</div>
  <ul>
    <li>一、一切行动听指挥</li>
    <li>二、不拿群众一针一线</li>
    <li>三、一切缴获要归公</li> 
    <li>四、服从组织安排</li> 
  </ul>
</div>
<script language="javascript">
onload=function change(){
    var obj=document.getElementById("ad")
    var objDiv =obj.getElementsByTagName("div")
    hidAll()
    showMe(Random(objDiv.length))
    
    function Random(k){
    return new Date().getSeconds()%k
    }
    function hidAll(){
        for (var i=0;i<objDiv.length;i++){
            objDiv[i].style.display="none"
        }
    }
    function showMe(r){
        objDiv[r].style.display=""
    }
}
</script></BODY>
</HTML>
2<!DOCtype html PUbLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<TITLE>随机显示_隐藏对应信息提示_caiying209</TITLE>
</HEAD>
<BODY >
<style>
*{padding:0;margin:0;font-size:12px}
body{padding:10px;}
li{LIST-STYLE-TYPE: none;float:left;margin-left: 2px;font-size:12px;margin:2px 5px;}
</style>
<div id=ad>
 <div>1、说话和气</div>
 <div>2、买卖公平</div>
 <div>3、借东西要还</div>
 <div>4、损坏东西要赔</div>
 <div>5、不打人骂人</div>
 <div>6、不损坏庄稼</div>
  <ul>
    <li id="">一、一切行动听指挥</li>
    <li id="">二、不拿群众一针一线</li>
    <li id="">三、一切缴获要归公</li> 
    <li id="">四、服从组织安排</li> 
    <li id="">五、军令如山</li> 
    <li id="">六、全心全意为人民服务</li> 
  </ul>
</div>
<script language="javascript">
onload=function change(){
    var obj=document.getElementById("ad")
    var objDiv =obj.getElementsByTagName("div")
    var objLi=obj.getElementsByTagName("li")
    hidAll()
    showMe(Random(objDiv.length))
    function Random(k){return new Date().getSeconds()%k}
    function hidAll(){
        for (var i=0;i<objLi.length;i++){
            objDiv[i].style.display="none"
            objLi[i].style.display=""
        }
    }
    function showMe(r){
        objDiv[r].style.display=""
        objLi[r].style.display="none"
    }
}
</script></BODY>
</HTML>

解决方案 »

  1.   

    sorry
    (LS忽略了“通过id调用”)1<!DOCtype html PUbLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <TITLE>随机显示_caiying209</TITLE>
    </HEAD>
    <BODY >
    <style>
    *{padding:0;margin:0;font-size:12px}
    body{padding:10px;}
    li{LIST-STYLE-TYPE: none;float:left;margin-left: 2px;font-size:12px;margin:2px 5px;}
    </style>
      <div id="ad1">1、说话和气</div>
      <div id="ad2">2、买卖公平</div>
      <div id="ad3">3、借东西要还</div>
      <div id="ad4">4、损坏东西要赔</div>
      <div id="ad5">5、不打人骂人</div>
      <div id="ad6">6、不损坏庄稼</div>
      <div id="ad7">7、不调戏妇女</div>
      <div id="ad8">8、不虐待俘虏</div>
      <ul>
        <li>一、一切行动听指挥</li>
        <li>二、不拿群众一针一线</li>
        <li>三、一切缴获要归公</li> 
        <li>四、服从组织安排</li> 
      </ul>
    <script language="javascript">
    onload=function change(){
        var objDiv =document.getElementsByTagName("div")
        hidAll()
        showMe(Random(objDiv.length)+1)
        
        function Random(k){
        return new Date().getSeconds()%k
        }
        function hidAll(){
            for (var i=0;i<objDiv.length;i++){
                if (objDiv[i].id.indexOf("ad")!=-1)
                objDiv[i].style.display="none"
            }
        }
        function showMe(r){
            document.getElementById("ad"+r).style.display=""
        }
    }
    </script></BODY>
    </HTML>
    2<!DOCtype html PUbLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <TITLE>随机显示_隐藏对应信息提示_caiying209</TITLE>
    </HEAD>
    <BODY >
    <style>
    *{padding:0;margin:0;font-size:12px}
    body{padding:10px;}
    li{LIST-STYLE-TYPE: none;float:left;margin-left: 2px;font-size:12px;margin:2px 5px;}
    </style>
     <div id="ad1">1、说话和气</div>
     <div id="ad2">2、买卖公平</div>
     <div id="ad3">3、借东西要还</div>
     <div id="ad4">4、损坏东西要赔</div>
     <div id="ad5">5、不打人骂人</div>
     <div id="ad6">6、不损坏庄稼</div>
      <ul>
        <li id="inf1">一、一切行动听指挥</li>
        <li id="inf2">二、不拿群众一针一线</li>
        <li id="inf3">三、一切缴获要归公</li> 
        <li id="inf4">四、服从组织安排</li> 
        <li id="inf5">五、军令如山</li> 
        <li id="inf6">六、全心全意为人民服务</li> 
      </ul>
    <script language="javascript">
    onload=function change(){
        var objDiv =document.getElementsByTagName("div")
        var objLi=document.getElementsByTagName("li")
        hidAll()
        showMe(Random(objDiv.length)+1)
        function Random(k){return new Date().getSeconds()%k}
        function hidAll(){
            for (var i=0;i<objLi.length;i++){
                if (objLi[i].id.indexOf("inf")!=-1)
                objDiv[i].style.display="none"
                objLi[i].style.display=""
            }
        }
        function showMe(r){
            document.getElementById("ad"+r).style.display=""
            document.getElementById("inf"+r).style.display="none"
        }
    }
    </script></BODY>
    </HTML>
      

  2.   

    多谢楼上的朋友，但现在有个问题：虽然添加了id调用，但如果出现多个div包容的时候就会出现问题，说是缺少对象，我分别拿实际样例来看，希望楼上的高手朋友再帮帮我。谢谢！
    这个是问题1：  <!--上面的div-->
      <div class="up_content" id="ad1">
         <div class="pic"></div>
         <div class="intr">
            <h2>作文精选</h2>
    <div class="infor">集合大家作文极品</div>
    <div class="test"><a href="#" title="作文精选">体验&gt;&gt;</a></div>
         </div>
      </div>
      <div class="up_content" id="ad2">
        <div class="pic1"></div>
        <div class="intr">
         <h2>应用写作</h2>
         <div class="infor">多套写作模板提供使用</div>
         <div class="test"><a href="#" title="应用写作">体验&gt;&gt;</a></div>
        </div>
      </div>
      <div class="up_content" id="ad3">
       <div class="pic2"></div>
       <div class="intr">
         <h2>名人语录</h2>
         <div class="infor">名人说的那些事儿</div>
         <div class="test"><a href="" title="名人语录">体验&gt;&gt;</a></div>
       </div>
      </div>
      <div class="up_content" id="ad4">
       <div class="pic3"></div>
       <div class="intr">
         <h2>专业域名</h2>
         <div class="infor">提供专人专线域名服务</div>
         <div class="test"><a href="#" title="专业域名">体验&gt;&gt;</a></div>
       </div>
      </div>
      <div class="up_content" id="ad5">
       <div class="pic4"></div>
       <div class="intr">
         <h2>商务会议</h2>
         <div class="infor">网络会议集合</div>
         <div class="test"><a href="#" title="商务会议">体验&gt;&gt;</a></div>
       </div>
      </div>
      <!--下面的li-->
      <div class="under_content">
        <ul>
          <li><div class="tpy2"></div><h3><a href="#" title="特殊服务">特殊服务</a></h3><span class="infor">提供你要的服务</span></li>
          <li><div class="tpy6"></div><h3><a href="#" title="代理服务">代理服务</a></h3><span class="infor">代理销售业务</span></li>
          <li><div class="tpy7"></div><h3><a href="#" title="物流服务">物流服务</a></h3><span class="infor">物流销售服务</span></li>
          <li><div class="tpy8"></div><h3><a href="#" title="免费资讯">免费资讯</a></h3><span class="infor">免费资讯服务</span></li>
       </ul>
      </div>
    问题2：  <!--上面的div-->
      <div class="up_content" id="ad1">
         <div class="pic"></div>
         <div class="intr">
            <h2>作文精选</h2>
    <div class="infor">集合大家作文极品</div>
    <div class="test"><a href="#" title="作文精选">体验&gt;&gt;</a></div>
         </div>
      </div>
      <div class="up_content" id="ad2">
        <div class="pic1"></div>
        <div class="intr">
         <h2>应用写作</h2>
         <div class="infor">多套写作模板提供使用</div>
         <div class="test"><a href="#" title="应用写作">体验&gt;&gt;</a></div>
        </div>
      </div>
      <div class="up_content" id="ad3">
       <div class="pic2"></div>
       <div class="intr">
         <h2>名人语录</h2>
         <div class="infor">名人说的那些事儿</div>
         <div class="test"><a href="" title="名人语录">体验&gt;&gt;</a></div>
       </div>
      </div>
      <div class="up_content" id="ad4">
       <div class="pic3"></div>
       <div class="intr">
         <h2>专业域名</h2>
         <div class="infor">提供专人专线域名服务</div>
         <div class="test"><a href="#" title="专业域名">体验&gt;&gt;</a></div>
       </div>
      </div>
      <div class="up_content" id="ad5">
       <div class="pic4"></div>
       <div class="intr">
         <h2>商务会议</h2>
         <div class="infor">网络会议集合</div>
         <div class="test"><a href="#" title="商务会议">体验&gt;&gt;</a></div>
       </div>
      </div>
      <!--下面的li-->
      <div class="under_content">
        <ul>
          <li><div class="tpy2"></div><h3><a href="#" title="特殊服务">特殊服务</a></h3><span class="infor">提供你要的服务</span></li>
          <li><div class="tpy6"></div><h3><a href="#" title="代理服务">代理服务</a></h3><span class="infor">代理销售业务</span></li>
          <li><div class="tpy7"></div><h3><a href="#" title="物流服务">物流服务</a></h3><span class="infor">物流销售服务</span></li>
          <li><div class="tpy8"></div><h3><a href="#" title="免费资讯">免费资讯</a></h3><span class="infor">免费资讯服务</span></li>
          <li><div class="tpy8"></div><h3><a href="#" title="专业会议">专业会议</a></h3><span class="infor">专业会议</span></li>
        </ul>
      </div>
      

  3.   

    以上的页面如果使用楼上朋友的方式会出现无对象及显示杂乱问题，我想问题可能是出在 var objDiv =document.getElementsByTagName("div")
    这里，help！
      

  4.   

    1:<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    </head><body>
      <div class="up_content" id="ad1">
         <div class="pic"></div>
         <div class="intr">
            <h2>作文精选</h2>
        <div class="infor">集合大家作文极品</div>
        <div class="test"><a href="#" title="作文精选">体验&gt;&gt;</a></div>
         </div>
      </div>
      <div class="up_content" id="ad2">
        <div class="pic1"></div>
        <div class="intr">
         <h2>应用写作</h2>
         <div class="infor">多套写作模板提供使用</div>
         <div class="test"><a href="#" title="应用写作">体验&gt;&gt;</a></div>
        </div>
      </div>
      <div class="up_content" id="ad3">
       <div class="pic2"></div>
       <div class="intr">
         <h2>名人语录</h2>
         <div class="infor">名人说的那些事儿</div>
         <div class="test"><a href="" title="名人语录">体验&gt;&gt;</a></div>
       </div>
      </div>
      <div class="up_content" id="ad4">
       <div class="pic3"></div>
       <div class="intr">
         <h2>专业域名</h2>
         <div class="infor">提供专人专线域名服务</div>
         <div class="test"><a href="#" title="专业域名">体验&gt;&gt;</a></div>
       </div>
      </div>
      <div class="up_content" id="ad5">
       <div class="pic4"></div>
       <div class="intr">
         <h2>商务会议</h2>
         <div class="infor">网络会议集合</div>
         <div class="test"><a href="#" title="商务会议">体验&gt;&gt;</a></div>
       </div>
      </div>
      <!--下面的li-->
      <div class="under_content">
        <ul>
          <li><div class="tpy2"></div><h3><a href="#" title="特殊服务">特殊服务</a></h3><span class="infor">提供你要的服务</span></li>
          <li><div class="tpy6"></div><h3><a href="#" title="代理服务">代理服务</a></h3><span class="infor">代理销售业务</span></li>
          <li><div class="tpy7"></div><h3><a href="#" title="物流服务">物流服务</a></h3><span class="infor">物流销售服务</span></li>
          <li><div class="tpy8"></div><h3><a href="#" title="免费资讯">免费资讯</a></h3><span class="infor">免费资讯服务</span></li>
       </ul>
      </div>
    <script language="javascript">
    onload=function change(){
        var objDiv =document.getElementsByTagName("div")
        var adArray=[]
            for (var i=0;i<objDiv.length;i++){
                if (objDiv[i].id.indexOf("ad")!=-1)
                adArray[adArray.length]=objDiv[i].id
            }
    //    alert(adArray)
        hidAll()
        showMe(Random(adArray.length))
        
        function Random(k){
            return new Date().getSeconds()%k
        }
        function hidAll(){
            for (var i=0;i<adArray.length;i++){
                document.getElementById(adArray[i]).style.display="none"
            }
        }
        function showMe(r){
            document.getElementById(adArray[r]).style.display=""
        }
    }
    </script></body></html>
      

  5.   

    2:
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    </head><body>
    <br>
      <!--上面的div-->
      <div class="up_content" id="ad1">
         <div class="pic"></div>
         <div class="intr">
            <h2>作文精选</h2>
        <div class="infor">集合大家作文极品</div>
        <div class="test"><a href="#" title="作文精选">体验&gt;&gt;</a></div>
         </div>
      </div>
      <div class="up_content" id="ad2">
        <div class="pic1"></div>
        <div class="intr">
         <h2>应用写作</h2>
         <div class="infor">多套写作模板提供使用</div>
         <div class="test"><a href="#" title="应用写作">体验&gt;&gt;</a></div>
        </div>
      </div>
      <div class="up_content" id="ad3">
       <div class="pic2"></div>
       <div class="intr">
         <h2>名人语录</h2>
         <div class="infor">名人说的那些事儿</div>
         <div class="test"><a href="" title="名人语录">体验&gt;&gt;</a></div>
       </div>
      </div>
      <div class="up_content" id="ad4">
       <div class="pic3"></div>
       <div class="intr">
         <h2>专业域名</h2>
         <div class="infor">提供专人专线域名服务</div>
         <div class="test"><a href="#" title="专业域名">体验&gt;&gt;</a></div>
       </div>
      </div>
      <div class="up_content" id="ad5">
       <div class="pic4"></div>
       <div class="intr">
         <h2>商务会议</h2>
         <div class="infor">网络会议集合</div>
         <div class="test"><a href="#" title="商务会议">体验&gt;&gt;</a></div>
       </div>
      </div>
      <!--下面的li-->
      <div class="under_content">
        <ul>
          <li><div class="tpy2"></div><h3><a href="#" title="特殊服务">特殊服务</a></h3><span class="infor">提供你要的服务</span></li>
          <li><div class="tpy6"></div><h3><a href="#" title="代理服务">代理服务</a></h3><span class="infor">代理销售业务</span></li>
          <li><div class="tpy7"></div><h3><a href="#" title="物流服务">物流服务</a></h3><span class="infor">物流销售服务</span></li>
          <li><div class="tpy8"></div><h3><a href="#" title="免费资讯">免费资讯</a></h3><span class="infor">免费资讯服务</span></li>
          <li><div class="tpy8"></div><h3><a href="#" title="专业会议">专业会议</a></h3><span class="infor">专业会议</span></li>
        </ul>
      </div><script language="javascript">
    onload=function change(){
        var objDiv =document.getElementsByTagName("div")
        var objLi=document.getElementsByTagName("li")
        var adArray=[]
            for (var i=0;i<objDiv.length;i++){
                if (objDiv[i].id.indexOf("ad")!=-1)
                adArray[adArray.length]=objDiv[i].id
            }
    //    alert(adArray)
        hidAll()
        showMe(Random(adArray.length))
        
        function Random(k){
            return new Date().getSeconds()%k
        }
        function hidAll(){
            for (var i=0;i<adArray.length;i++){
                document.getElementById(adArray[i]).style.display="none"
                objLi[i].style.display=""
            }
        }
        function showMe(r){
            document.getElementById(adArray[r]).style.display=""
            objLi[r].style.display=""
        }
    }
    </script></body></html>
      

  6.   

    楼上朋友真是好人，首先赞一下！！！
    我测试了下好像问题2出现了点问题，就是上面内容能随机显示，但下面的li不能对应隐藏哦...
    题目要求是<div>在页面刷新后随机更换不同内容的同时，还需要隐藏下面对应名称的 <li>显示。
      

  7.   

    呵呵，可能是我贴样例的时候没有注明，是我的错。我再说明下，问题2：div和li是一一对应的，显示一个div就是隐藏对应的一个li。
      

  8.   

    sorry:(粘贴时忘记修改了^_^)
        function showMe(r){
            document.getElementById(adArray[r]).style.display=""
            objLi[r].style.display="none"
        }