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 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
移动端基础事件总结与应用
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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
关于JS中的闭包浅谈
2013/08/23 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
pyqt和pyside开发图形化界面
2014/01/22 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
python人民币小写转大写辅助工具
2018/06/20 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
超简单的Python HTTP服务
2019/07/22 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
pytorch中的inference使用实例
2020/02/20 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
农村面貌改造提升实施方案
2014/03/18 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
保护环境倡议书范文
2014/05/13 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书