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学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
前端常见跨域解决方案(全)
Sep 19 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
Vue和Flask通信的实现
May 19 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模板类代码
2008/09/07 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
Python 实现简单的电话本功能
2015/08/09 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
python图像处理入门(一)
2019/04/04 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
会计的岗位职责
2014/03/15 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
机器人瓦力观后感
2015/06/12 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技