谁能把这个效果换成 onclick 事件的吗?(星星单击打分效果)
<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: 80px; display: block;"></li>
<li><a class="star1" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=1','EchoReturnedText','GET','');" onMouseDown="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" onMouseOver="infen(10)">10</a></li>
</ul>
<span id="pftip"></span><span id="pfno"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
<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: 80px; display: block;"></li>
<li><a class="star1" href="javascript:makeRequest('/e/enews/?enews=AddInfoPfen&classid=58&id=60&fen=1','EchoReturnedText','GET','');" onMouseDown="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" 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','');" onMouseOut="infen(0)" onMouseOver="infen(10)">10</a></li>
</ul>
<span id="pftip"></span><span id="pfno"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
...全文
相关推荐
js等级评分效果(星星实现打分功能)
`click`事件,当用户点击星星时,更新选定的评分,并可能发送评分数据到服务器。
js实现星星打分效果的方法
这个简单的星星打分效果实现涉及到了JavaScript的DOM操作、事件处理、CSS样式的动态切换等基础知识点。
星星打分/半星/半颗星操作
点击事件处理函数会根据用户点击的星星数量更新评分,而鼠标悬浮事件处理函数则用于动态显示半星效果。由于代码量较少,这20行代码可能包括了元素选择、事件绑定、状态切换和分数计算等核心部分。
jquery 实现星星打分效果
jQuery 实现星星打分效果"是一种常见的用户评价或评分机制,常用于电商网站、电影评论等场景,让用户以直观的图形方式表达对某一内容的满意度。
星星打分效果
在星星打分效果中,JavaScript的主要任务是监听用户的鼠标事件(如点击或触摸),根据用户的选择改变星星的填充状态,并可能将评分数据发送到服务器。1.


