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 开天辟地入门篇一
Dec 09 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
js实现随机8位验证码
Jul 24 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
js实现简单进度条效果
Mar 25 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
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
js树形控件脚本代码
2008/07/24 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
查看已安装tensorflow版本的方法示例
2020/04/19 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
医学生自荐信
2013/12/03 职场文书
老师的检讨书
2014/02/23 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
挂靠协议书范本
2014/04/22 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
个人学习总结范文
2015/02/15 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
医院消毒隔离制度
2015/08/05 职场文书
护士岗位竞聘书
2015/09/15 职场文书
如何在C++中调用Python
2021/05/21 Python
python小型的音频操作库mp3Play
2022/04/24 Python