JS實現(xiàn)仿百度文庫評分功能

更新時間：2017年01月12日 16:12:37 投稿：mrr

本文給大家分享基于js實現(xiàn)仿百度文庫評分功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧

百度文庫分享平臺大家都知道，今天小編通過一段實例代碼給大家介紹基于js實現(xiàn)百度文庫評分功能，先給大家展示效果圖吧。

具體代碼如下所示：

<!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>無標題文檔</title>
<link  rel="stylesheet">
<link  rel="stylesheet">
<style>
*{padding:0;margin:0;}
#content{width:700px;height:50px;border:1px solid #ccc;margin:50px auto;line-height:50px;}
#content span.title{display:line-block;width:100px;height:50px;line-height:50px;font-size:20px;font-weight:bold;color:#FF9933;}
#content ul.stars {display:inline-block;width:160px;height:50px;line-height:50px;cursor:pointer;}
#content ul.stars li {font-size:30px;color:#ccc;}
#content p {display:inline-block;width:80px;height:50px;line-height:50px;font-size:20px;font-weight:bold;color:#ff9933;}
#content .tip{display:inline-block;height:45px;border:1px #ccc red;background:#FFFFCC; visibility:hidden;}
#content .tip span {display:inline-block;height:40px;line-height:40px;padding:0px 10px;;}
#content .tip ul {display:inline-block;position:relative;}
#content .tip ul i{position:absolute;top:70%;right:18%;}
.red {color:red;margin-left:10px;}
.orange{color:orange;}
</style>
<script>
window.onload = function () {
 var content = document.getElementById('content');
 var score = document.getElementById('score');
 var oUl = content.getElementsByClassName('stars')[0];
 var aLi = oUl.getElementsByTagName('li');
 var tip = content.getElementsByClassName('tip')[0];
 var arr = ['較差','較差','還行','推薦','力薦'];
 oUl.onmouseover = function(){
 tip.style.visibility = 'visible';
 }
 oUl.onmouseout = function(){
 tip.style.visibility = 'hidden';
 }
 for( var i=0;i<aLi.length;i++ ){
 aLi[i].index = i;
 aLi[i].onclick = function () {
  mark(this.index);
  oUl.index = this.index;
 }
 aLi[i].onmouseover = function(){
  for( var i=0;i<aLi.length;i++ ){
  aLi[i].style.color = '#ccc';
  }
  mark(this.index);
 }
 aLi[i].onmouseout = function(){
  for( var i=0;i<=this.index;i++ ){
  aLi[i].style.color = '#ccc';
  }
  if(oUl.index !== 'undefined'){
  mark(parseInt(oUl.index));
  }
 }
 }
 function show() {
 tip.style.visibility = tip.style.visibility === 'hidden' ? 'visible' : 'hidden';
 }
 function mark(index) {
 for( var i=0;i<=index;i++ ){
  aLi[i].style.color = index < 2 ? 'gray' : 'orange';
 }
 score.innerHTML = arr[index] ? arr[index] : '待評價';
 }
}
</script>
</head>
<body>
<div id="content">
 <span class="title"><i class="red">* </i>總體評價：</span>
 <ul class="stars">
 <li class="fa fa-star"></li>
 <li class="fa fa-star"></li>
 <li class="fa fa-star"></li>
 <li class="fa fa-star"></li>
 <li class="fa fa-star"></li>
 </ul>
 <p id="score">待評價</p>
 <div class="tip">
 <span>小提示：點擊小星星可以打分</span>
 <ul>
  <li class="fa fa-star orange"></li>
  <li class="fa fa-star orange"></li>
  <li class="fa fa-star orange"></li>
  <li class="fa fa-star orange"></li>
  <li class="fa fa-star-o"></li>
  <i class="fa fa-hand-pointer-o"></i>
 </ul>
 </div>
</div>
</body>
</html>

以上所述是小編給大家介紹的JS實現(xiàn)仿百度文庫評分功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: