网页点名(下拉菜单版本)

效果图：

这里写图片描述

First，把名单另存为.html

Second，把生成的table复制到html里面（位置随便），再给每个table一个id

Third，看代码：

.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>网页点名_下拉菜单式</title>   
        <link rel="stylesheet" href="style_piture.css" type="text/css"> 
    </head>
    <body>

<script type="text/javascript">
var mytime=null;
var num;
function doit()
{
    var bt=window.document.getElementById("an");
        if(mytime==null)
    {
        change();
        }
        else
        {
            clearTimeout(mytime);
            mytime=null;
        }
}

function change()
{
    num=document.form.select.value;//获取value值
    switch(num)
    {
        case "01":show_1();break;
        case "02":show_2();break;
        }

    }

function show_1()
{
    var x=document.getElementById("tb1").rows[parseInt(tb1.rows.length*Math.random())].cells;
    an.value=x[0].innerHTML;
    mytime=setTimeout("show_1()",1);
    }

function show_2()
{
    var x=document.getElementById("tb2").rows[parseInt(tb2.rows.length*Math.random())].cells;
    an.value=x[0].innerHTML;
    mytime=setTimeout("show_2()",1);
    }

function te()
{
    var d=new Date();
    var t=document.getElementById("da");
    t.innerHTML=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+"\r\n"+
    d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()
    }
window.setInterval("te()",1000);//秒数间隔1000毫秒(1秒)调用一次

</script>
<form name="form">
<select name="select" id="select">
        <option value="01">信管01班</option>
        <option value="02">信管02班</option>
</select>
</form>

<div><input type="button" onclick="doit()" id="an" value="Begin!"></div><br>
<div id="da"></div>
<p>From: <a href="http://blog.csdn.net/lxh_gdmu?viewmode=contents" target="_blank">桑海田</a></p>
    </body>

   <table id="tb1">
   <tr height="18.67" style='height:14.00pt;mso-height-source:userset;mso-height-alt:280;'>
    <td class="xl66" height="18.67" style='height:14.00pt;' x:str>**会</td>
   </tr>
   <tr height="18.67" style='height:14.00pt;mso-height-source:userset;mso-height-alt:280;'>
    <td class="xl66" height="18.67" style='height:14.00pt;' x:str>张三</td>
   </tr>
   <tr height="18.67" style='height:14.00pt;mso-height-source:userset;mso-height-alt:280;'>
    <td class="xl66" height="18.67" style='height:14.00pt;' x:str>李四</td>
   </tr>
  </table>

  <table id="tb2">
   <tr height="18.67" style='height:14.00pt;mso-height-source:userset;mso-height-alt:280;'>
    <td class="xl66" height="18.67" width="72" style='height:14.00pt;width:54.00pt;' x:str>刘备</td>
   </tr>
   <tr height="18.67" style='height:14.00pt;mso-height-source:userset;mso-height-alt:280;'>
    <td class="xl66" height="18.67" style='height:14.00pt;' x:str>王五</td>
   </tr>
   <tr height="18.67" style='height:14.00pt;mso-height-source:userset;mso-height-alt:280;'>
    <td class="xl66" height="18.67" style='height:14.00pt;' x:str>张飞</td>
   </tr>
  </table>

</html>

.css

@charset "gb2312";
/* CSS Document */


body{

    }


#tb1,#tb2{
    display:none;
    }


#an{
    margin-top:50px;
    margin-left:200px;
    width:500px;
    height:200px;
    padding:0px 60px;
    font-color:#333;
    font-size:50px;
    background-color:transparent;
    border:#F00 dashed 1px;
    text-align:center;
    line-height:100px;
    }

#select{
    position:absolute;//绝对定位
    top:30px;
    margin-left:380px;
    padding:0px 20px;
    width:150px;
    border:none;
    color:#000;
    font-size:20px;
    }
#select,#an{
    cursor:hand//鼠标为手形
    }


#da
{
    position:absolute;//绝对定位
    top:260px;
    margin-left:500px;
    }
p{
    position:absolute;//绝对定位
    top:260px;
    margin-left:500px;
    }
a{
    text-decoration:none;
    }
a:link{
    color:#00C;
    }
a:visited{
    color:#00C;
    }
a:hover{
    color:#F00;
    }

网页点名(下拉菜单版本)

猜你喜欢