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 相关文章推荐
javascript下function声明一些小结
Dec 28 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
Vue异步组件使用详解
Apr 08 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
Vue实现多页签组件
Jan 14 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
php getsiteurl()函数
2009/09/05 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
ES6字符串的扩展实例
2020/12/21 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
python 图片验证码代码
2008/12/07 Python
python中的错误处理
2016/04/10 Python
Python进阶篇之字典操作总结
2016/11/16 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
什么是TCP/IP
2014/07/27 面试题
高中语文教学反思
2014/01/16 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL