谁能把这个效果换成 onclick 事件的吗？（星星单击打分效果）

lipingt101 2014-06-24 11:02:55

...全文

191 2 打赏收藏举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

斯洛文尼亚旅游 2014-06-26

打赏
举报

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=gb2312" http-equiv="content-type">
<title>goo</title>
<meta name="keywords" content="goo">
<meta name="description" content="goo">
<meta name="author" content="去看看"> 
<meta name="Copyright" content="去看看版权所有"> 
<link type="text/css" rel="stylesheet" href="http://www.qkankan.com/qkankan/css/site.css">
<link type="text/css" rel="stylesheet" href="http://www.qkankan.com/qkankan/css/content.css">
<!--<script src="http://www.qkankan.com/qkankan/js/ajax.js" type="text/javascript"></script>-->
</head>
<body>
<div class="cleardiv"></div>
<div id="main">
  <div id="mainleft2"> 
    <div class="blueborder">
      <div id="siteout">
      <div id="siteinfo">
        <div id="sitelogo">
        <span></span>
        <ul class="starrating">
<li id="currentrating" style="width: 0px; display: block;"></li>
<li><a class="star1" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=1','EchoReturnedText','GET','');"  onclick="infen(1)">1</a></li>
<li><a class="star2" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=2','EchoReturnedText','GET','');" onclick="infen(2)">2</a></li>
<li><a class="star3" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=3','EchoReturnedText','GET','');" onclick="infen(3)">3</a></li>
<li><a class="star4" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=4','EchoReturnedText','GET','');" onclick="infen(4)">4</a></li>
<li><a class="star5" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=5','EchoReturnedText','GET','');" onclick="infen(5)">5</a></li>
<li><a class="star6" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=6','EchoReturnedText','GET','');" onclick="infen(6)">6</a></li>
<li><a class="star7" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=7','EchoReturnedText','GET','');" onclick="infen(7)">7</a></li>
<li><a class="star8" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=8','EchoReturnedText','GET','');" onclick="infen(8)">8</a></li>
<li><a class="star9" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=9','EchoReturnedText','GET','');" onclick="infen(9)">9</a></li>
<li><a class="star10" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=10','EchoReturnedText','GET','');" onclick="infen(10)">10</a></li>
</ul>
<span id="pftip"></span><span id="pfno"></span>       
        </div> 
      </div>      
      </div>     
    </div>
  </div>
</div>
<script>
    var fentip = new Array("", "很差，浪费生命", "很差，浪费生命", "不喜欢", "不喜欢", "一般，不妨一看", "一般，不妨一看", "一般，不妨一看", "喜欢，值得推荐", "喜欢，值得推荐", "非常喜欢，不容错过")

    function infen(score) {
        document.getElementById('pftip').innerHTML = fentip[score]; 
        document.getElementById('pfno').innerHTML = score + "分 ";
        document.getElementById('currentrating').style.width = score * 10 + 'px';
    }
</script>
</body></html>

这个样？他代码我就不看了。。还不如自己写一个

qcxl 2014-06-25

打赏
举报

<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta content="text/html; charset=gb2312" http-equiv="content-type"> <title>goo</title> <meta name="keywords" content="goo"> <meta name="description" content="goo"> <meta name="author" content="去看看"> <meta name="Copyright" content="去看看版权所有"> <link type="text/css" rel="stylesheet" href="http://www.qkankan.com/qkankan/css/site.css"> <link type="text/css" rel="stylesheet" href="http://www.qkankan.com/qkankan/css/content.css"> <script src="http://www.qkankan.com/qkankan/js/ajax.js" type="text/javascript"></script> <script> function getStar(num){ infen(num); GI("currentrating").style.width=(num*10)+"px"; GI("currentrating").style.display="block"; } </script> </head> <body> <div class="cleardiv"></div> <div id="main"> <div id="mainleft2"> <div class="blueborder"> <div id="siteout"> <div id="siteinfo"> <div id="sitelogo"> <span></span> <ul class="starrating"> <li id="currentrating" style="width: 80px; display: block;"></li> <li><a class="star1" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=1','EchoReturnedText','GET','');" onclick="getStar(1)" onMouseOver="infen(1)">1</a></li> <li><a class="star2" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=2','EchoReturnedText','GET','');" onclick="getStar(2)" onMouseOver="infen(2)">2</a></li> <li><a class="star3" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=3','EchoReturnedText','GET','');" onclick="getStar(3)" onMouseOver="infen(3)">3</a></li> <li><a class="star4" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=4','EchoReturnedText','GET','');" onclick="getStar(4)" onMouseOver="infen(4)">4</a></li> <li><a class="star5" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=5','EchoReturnedText','GET','');" onclick="getStar(5)" onMouseOver="infen(5)">5</a></li> <li><a class="star6" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=6','EchoReturnedText','GET','');" onclick="getStar(6)" onMouseOver="infen(6)">6</a></li> <li><a class="star7" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=7','EchoReturnedText','GET','');" onclick="getStar(7)" onMouseOver="infen(7)">7</a></li> <li><a class="star8" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=8','EchoReturnedText','GET','');" onclick="getStar(8)" onMouseOver="infen(8)">8</a></li> <li><a class="star9" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=9','EchoReturnedText','GET','');" onclick="getStar(9)" onMouseOver="infen(9)">9</a></li> <li><a class="star10" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=10','EchoReturnedText','GET','');" onclick="getStar(10)" onMouseOver="infen(10)">10</a></li> </ul> <span id="pftip"></span><span id="pfno"></span> </div> </div> </div> </div> </div> </div> </body></html> 以上是改动后的代码，去掉 onMouseOut，增加onclick事件，事件调用 getStar(num)方法看下ajax.js里面的源码，打分星星效果主要通过GI("currentrating").style.display="block";设置，而其后的数字和文字提示通过 infen(10)方法，楼主可以试试