⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 index.html

📁 对多张图片进行星级投票,很实用,可以放在公司门户网上面.
💻 HTML
字号:
🔍 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>投票</title>
<link href="images/styles.css" rel="stylesheet" type="text/css">
<style>
.star-rating{/*这里是空分层，用来显示空星星*/
list-style:none;
margin: 0px;
padding:0px;
width: 150px;
height: 30px;
position: relative;
background: url(images/star_rating2.gif) top left repeat-x;/*空星星位于背景图片的顶层，将其设为背景并横向平铺*/ 
}
.star-rating li{/*设置li的浮动属性*/
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}
.star-rating li a{/*设置a的布局为绝对布局和垂直坐标并隐藏a中文本使其成为空链接*/
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover{/*设置a:hover的背景图片为打分星/垂直坐标/left为0,注意垂直坐标一定要小于a的垂直坐标*/
background: url(images/star_rating2.gif) left center;
z-index: 2;
left: 0px;
}

/*以下5个class用来设置5个链接的位置和hover的宽度*/
.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:30px;
}
.star-rating a.two-stars{
left:30px;
}
.star-rating a.two-stars:hover{
width: 60px;
}
.star-rating a.three-stars{
left: 60px;
}
.star-rating a.three-stars:hover{
width: 90px;
}
.star-rating a.four-stars{
left: 90px;
} 
.star-rating a.four-stars:hover{
width: 120px;
}
.star-rating a.five-stars{
left: 120px;
}
.star-rating a.five-stars:hover{
width: 150px;
}
.ft1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	line-height: 20px;
}
.ft14px{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000000; font-weight:bold}
#tb{font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:21px}
.ft14b{font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000000; font-weight:bold}
</style>
<style>
.star-rating li.current-rating{background: url(images/star_rating2.gif) left bottom;position: absolute;height: 30px;width:1px;display: block;text-indent: -9000px;z-index: 1;}
</style>
<script>

function GetResultjishu()
{
/*
*/
var maxid1;
var maxid;
var oBao1 = new ActiveXObject("Microsoft.XMLHTTP");
//特殊字符：+,%,&,=,?等的传输解决办法.字符串先用escape编码的.
//Update:2004-6-1 12:22
oBao1.open("POST","readxing.asp",false);
oBao1.send();
//服务器端处理返回的是经过escape编码的字符串.
maxid1 = unescape(oBao1.responseText);
if (maxid1>120){
maxid=maxid1/120;
}else
maxid=maxid1;
    var t=document.styleSheets[2];
	t.cssText=".star-rating li.current-rating{background: url(images/star_rating2.gif) left bottom;position: absolute;height: 30px;width:"+maxid+"px;display: block;text-indent: -9000px;z-index: 1;}";
document.getElementById("showf").innerHTML=maxid1;
}


//777777777777777777777777777
function GetResult()
{
/*
*--------------- GetResult() -----------------
* GetResult()
* 功能:通过XMLHTTP发送请求,返回结果.
* 参数:str,字符串,发送条件.
* 实例:GetResult();
*--------------- GetResult() -----------------
*/
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
//特殊字符：+,%,&,=,?等的传输解决办法.字符串先用escape编码的.
//Update:2004-6-1 12:22
oBao.open("POST","readmessage.asp",false);
oBao.send();
//服务器端处理返回的是经过escape编码的字符串.
var strResult = unescape(oBao.responseText);
//将字符串分开.
var arrResult = strResult.split("###");
RemoveRow(); //删除以前的数据.
//将取得的字符串分开,并写入表格中.
for(var i=0;i<arrResult.length;i++)
{
arrTmp = arrResult[i].split("@@@");
num1 = arrTmp[0]; //字段num1的值
num2 = arrTmp[1]; //字段num2的值
row1 = tb.insertRow();
cell1 = row1.insertCell();
cell1.innerHTML ="<font color='#ff0000'><b>网友:</b></font> <font color='000000'><b>"+ num1+"</b></font>";
cell2 = row1.insertCell();
cell2.innerHTML = num2 ;
}

}
//77777777777777777777777777777777777777777777777777777



//77777777777777777777777777777777777777777777777777777
function RemoveRow()
{
//保留第一行表头,其余数据均删除.
var iRows = tb.rows.length;
for(var i=0;i<iRows-1;i++)
{
tb.deleteRow(1);
}
}
//777777777777777777777777777777777777777777777777777

function AddDataPost(sUserId,sUserName)
{
/*
 *--------------- AddDataPost(sUserId,sUserName) -----------------
 * AddDataPost(sUserId,sUserName)
 * 功能:通过XMLHTTP添加数据.相当于Form的Method=Post.
 * 参数:sUserId,字符串,发送条件.
 * 参数:sUserName,字符串,发送条件.
 * 实例:AddDataPost(document.all.userid.value,document.all.username.value);
 *--------------- AddDataPost(sUserId,sUserName) -----------------
 */
    var oBao = new ActiveXObject("Microsoft.XMLHTTP");
    //特殊字符：+,%,&,=,?等的传输解决办法.
    //Update:2004-6-1 12:22
    //escape(sUserId),escape(sUserName);
if (sUserName==""){
    sUserName="我还没有想好要说什么！"
    }
if (sUserId==""){
    sUserId="无名侠客"
    }
    sUserId = escape(sUserId);
    sUserName = escape(sUserName);

    var userInfo = "userid="+sUserId+"&username="+sUserName;
    oBao.open("POST","adddate.asp",false);
    oBao.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    oBao.send(userInfo);
    //清空输入框数据.
    document.all.userid.value="";
    document.all.username.value="";
    //服务器端处理返回的是经过escape编码的字符串.
    GetResult();
    //alert(unescape(oBao.responseText))
}
//777777777777777777777777777777777777777777777
function Addxing(ddate)
{
/*
 *--------------- AddDataPost(sUserId,sUserName) -----------------
 * AddDataPost(sUserId,sUserName)
 * 功能:通过XMLHTTP添加数据.相当于Form的Method=Post.
 * 参数:sUserId,字符串,发送条件.
 * 参数:sUserName,字符串,发送条件.
 * 实例:AddDataPost(document.all.userid.value,document.all.username.value);
 *--------------- AddDataPost(sUserId,sUserName) -----------------
 */
    var oBao3 = new ActiveXObject("Microsoft.XMLHTTP");
    ddate = escape(ddate);
    var userInfo3 = "ddate="+ddate;
    oBao3.open("POST","addxing.asp",false);
    oBao3.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    oBao3.send(userInfo3);
     GetResultjishu();
}
</script>
</head>

<body onLoad="GetResult()">
<table width="100"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="images/mm.gif" width="127" height="168"></td>
  </tr>
  <tr>
    <td height="23" style=" font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:20px">这个美女漂亮吗？<br>
      现在得票《<font color="#ff0000" id="showf"></font>》票
	  <script type="text/javascript">
	  GetResultjishu()
	  
	  </script></td>

  </tr>
  <tr>
    <td><ul class="star-rating">
        <li class="current-rating">--</li>
        <li><a href="###" onclick="Addxing(1)" title="我加1分" class="one-star">1</a></li>
        <li><a href="###" onclick="Addxing(2)" title="我加2分" class="two-stars">2</a></li>
        <li><a href="###" onclick="Addxing(3)" title="我加3分" class="three-stars">3</a></li>
        <li><a href="###" onclick="Addxing(4)" title="我加4分" class="four-stars">4</a></li>
        <li><a href="###" onclick="Addxing(5)" title="我加5分" class="five-stars">5</a></li>
    </ul></td>
  </tr>
  <tr>
    <td align="center" style=" font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:20px"><strong><font color=#336699>我要投一票</font></strong></td>
  </tr>
</table>
<table width="776"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="683" height="25" bgcolor="f2f2f2"  style=" font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:20px">感谢大家，感谢《 Satellite 》同志的相关教程：<a href="http://bbs.blueidea.com/thread-2677604-1-1.html" target="_blank">http://bbs.blueidea.com/thread-2677604-1-1.html</a></td>
    <td width="93" bgcolor="f2f2f2"  style=" font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:20px"><a title="我要说二句儿" href="#1"><font color=#336699>我要顶一下</font></a></td>
  </tr>
  <tr>
    <td height="25" colspan="2"><table width="100%" height="23" border="0" cellpadding="1" cellspacing="0" id="tb">
<tr bgcolor="#EEFAFF" class="ft14px">
<td width="19%" height="1"></td>
<td width="81%" height="1"></td>
</tr>
</table></td>
  </tr>
</table>
<table width="776"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><hr></td>
  </tr>
</table>
<table width="776"  border="0" align="center" cellpadding="0" cellspacing="0">
      <tr bgcolor="#FF9900" class="ft1">
      <td width="26%" height="25" align="right">我得大名：</td>
      <td height="30" colspan="2"><input name="userid" id="userid" onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false" size="50">
        </td>
    </tr>
    <tr bgcolor="#EEFAFF" class="ft1">
      <td width="26%" height="25" align="right">我要讲：</td>
      <td height="25" colspan="2"><textarea name="username" cols="50" rows="8" id="username"></textarea></td>
    </tr>
    <tr bgcolor="#EEFAFF" class="ft1">
      <td width="26%" height="25" align="right">&nbsp;</td>
      <td width="42%" height="25">&nbsp;</td>
      <td width="32%">&nbsp;</td>
    </tr>
    <tr bgcolor="#EEFAFF" class="ft1">
      <td width="26%" height="25" align="right">&nbsp;</td>
      <td height="25" align="center"><input type="submit" name="Submit" onClick="AddDataPost(document.all.userid.value,document.all.username.value)" value="提交发言">
&nbsp;&nbsp;
      <input type="reset" name="Submit2" value="重置内容"></td>
      <td height="25">&nbsp;</td>
    </tr>
    <tr bgcolor="#EEFAFF" class="ft1">
      <td width="26%" height="25" align="right">&nbsp;</td>
      <td height="25">注：请文明用语 <a href="http://www.szrgb.net/szrgb/bbs/bugao.htm" target="_blank"><font color="#0066CC">相关法政 </font></a></td>
      <td height="25">&nbsp;</td>
    </tr>
</table>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -