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

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

創(chuàng)新互聯(lián)于2013年開始，先為高碑店等服務建站，高碑店等地企業(yè)，進行企業(yè)商務咨詢服務。為高碑店企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

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)仿百度文庫評分功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)頁標題：JS實現(xiàn)仿百度文庫評分功能
分享網(wǎng)址：http://bm7419.com/article42/gosehc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、建站公司、響應式網(wǎng)站、自適應網(wǎng)站、云服務器、服務器托管

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容