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 相关文章推荐
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
Vue渲染函数详解
Sep 15 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 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简单防盗链实现方法
2015/07/29 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
vue实现购物车加减
2020/05/30 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
python解析json实例方法
2013/11/19 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
基于python实现KNN分类算法
2020/04/23 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python实现机器人卡牌
2019/10/06 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
小学母亲节活动方案
2014/03/14 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
汽车转让协议书
2015/01/29 职场文书
终止劳动合同通知书
2015/04/16 职场文书
太行山上观后感
2015/06/05 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
2022微信温控新功能上线
2022/05/09 数码科技