脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js百度文库评分

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

 更新时间：2017年01月12日 16:12:37   投稿：mrr  
本文给大家分享基于js实现仿百度文库评分功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧

百度文库分享平台大家都知道，今天小编通过一段实例代码给大家介绍基于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实现仿百度文库评分功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 浅谈Webpack核心模块tapable解析

    浅谈Webpack核心模块tapable解析

    这篇文章主要介绍了浅谈Webpack核心模块tapable解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 用JS写一段判断搜索引擎来路并且屏蔽PC的跳转代码

    用JS写一段判断搜索引擎来路并且屏蔽PC的跳转代码

    以下是用JS写的判断搜索引擎来路并屏蔽PC跳转的代码,需要的朋友可以参考下
    2023-12-12
  • js实现的彩色方块飞舞奇幻效果

    js实现的彩色方块飞舞奇幻效果

    这篇文章主要介绍了js实现的彩色方块飞舞奇幻效果,涉及JavaScript响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下
    2016-01-01
  • JS基于贪心算法解决背包问题示例

    JS基于贪心算法解决背包问题示例

    这篇文章主要介绍了JS基于贪心算法解决背包问题,简单说明了贪心算法的概念、原理,并结合具体实例形式分析了JS使用贪心算法解决部分背包问题的具体操作技巧,需要的朋友可以参考下
    2017-11-11
  • layui table 参数设置方法

    layui table 参数设置方法

    今天小编就为大家分享一篇layui table 参数设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript如何动态创建table表格

    JavaScript如何动态创建table表格

    这篇文章主要介绍了JavaScript如何动态创建table表格，一些时候需要动态的创建和删除表格，接下来的文章中将为大家介绍下javascript是如何做到的，感兴趣的朋友不要错过
    2015-11-11
  • js 无提示关闭浏览器页面的代码

    js 无提示关闭浏览器页面的代码

    js 无提示关闭浏览器页面的代码与函数需要的朋友可以参考下。
    2010-03-03
  • 完美解决IE9浏览器出现的对象未定义问题

    完美解决IE9浏览器出现的对象未定义问题

    下面小编就为大家带来一篇完美解决IE9浏览器出现的对象未定义问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-09-09
  • javascript中this的用法实践分析

    javascript中this的用法实践分析

    这篇文章主要介绍了javascript中this的用法,结合具体实例形式总结分析了javascript中this各种常见的功能、用法及相关操作注意事项,需要的朋友可以参考下
    2019-07-07
  • JS实现将人民币金额转换为大写的示例代码

    JS实现将人民币金额转换为大写的示例代码

    本篇文章主要是对使用JS实现将人民币金额转换为大写的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02

最新评论