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


Posted in Javascript onJanuary 12, 2017

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

Javascript 相关文章推荐
jquery实现excel导出的方法
Apr 04 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
移动端基础事件总结与应用
Jan 12 #Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 #Javascript
简单的渐变轮播插件
Jan 12 #Javascript
那些精彩的JavaScript代码片段
Jan 12 #Javascript
JavaScript实现星级评分
Jan 12 #Javascript
angular2倒计时组件使用详解
Jan 12 #Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 #Javascript
You might like
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
PHP 创建标签云函数代码
2010/05/26 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
python字符串常用方法
2018/06/14 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python画图高斯分布的示例
2019/07/10 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
韩国11街:11STREET
2018/03/27 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
护理不良事件检讨书
2014/02/06 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
园林技术专业求职信
2014/07/28 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
盗窃案辩护词
2015/05/21 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书