JS实现仿百度文库评分功能

作者：mrr 时间：2024-05-11 09:34:05　

百度文库分享平台大家都知道，今天小编通过一段实例代码给大家介绍基于js实现百度文库评分功能，先给大家展示效果图吧。

具体代码如下所示：

<!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 href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" 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实现仿百度文库评分功能网站的支持！

来源：http://blog.csdn.net/super_yang_android/article/details/54378477

标签：js,百度文库,评分

投稿

JS实现仿百度文库评分功能

猜你喜欢

微信小程序与axios组成网络层封装过程详解

python计算机视觉OpenCV库实现实时摄像头人脸检测示例

解决Django后台ManyToManyField显示成Object的问题

Python中关于property使用的小技巧

NopCommerce架构分析之(四)基于路由实现灵活的插件机制

前端优化，让你的网页显示的更快更流畅

跟老齐学Python之关于类的初步认识

Python 有可能删除 GIL 吗？

ASP 高亮显示不区分大小写的关键字

Golang有类型常量和无类型常量的区别

我的页面制作方法

一篇文章教你用python画动态爱心表白

Python制作当年第一款手机游戏-贪吃蛇游戏（练习）

ASP中正则表达式的应用

jquery AJAX 三个发送状态 posting, error, success

python实现的简单FTP上传下载文件实例

PHP结构型模式之享元模式详解

Python内建模块struct实例详解

异步任务队列Celery在Django中的使用方法

Study jQuery in a Simplified Way