JavaScript实现星级评价效果


Posted in Javascript onMay 17, 2019

本文实例为大家分享了js实现星级评价效果展示的具体代码,供大家参考,具体内容如下

背景图片实现

图片是width:36px; height:25px;

背景是白色,中间一个空的五角星,空的边缘有一像素的边框;(不然就看不到了);

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>星级评价(可半星)</title>
 <style>
  .xin{height: 25px; background: url(images/x.png); position: relative; display: inline-block;}
  .xin span{display: block; height: 25px; background: #f60; position: absolute; left: 0; top: 0;z-index: -1;transition: 0.2s;}
  .xin ul{position: absolute; top: 0; left: 0; height: 25px; margin: 0; padding: 0; list-style: none;}
  .xin ul li{float: left; width: 18px; height: 25px;}
  .fensu{display: inline-block;}
 </style>
</head>
<body>
 <input type="hidden" title="10" value="3.5">
 <input type="hidden" title="5" value="1.5">
 <script>
  var input=document.querySelectorAll("input[type=hidden]");
  input.forEach(function(_input){
   var Div=document.createElement("div");
   Div.className="xin";
   Div.style.width=18*(_input.title || 5)*2 + "px";
   _input.parentNode.insertBefore(Div,_input);
   var span=document.createElement("span");
   span.style.width=(_input.value)*36+"px";
   var p=document.createElement("p");
   p.innerHTML=_input.value+"分";
   p.className="fensu";
   Div.parentNode.insertBefore(p,Div);
   Div.parentNode.insertBefore(Div,p);
   Div.appendChild(span);
   var ul=document.createElement("ul");
   Div.appendChild(ul);
   for(var i=0;i<(_input.title || 5)*2;i++){
    var li=document.createElement("li");
    li.title=(i+1)/2+"分";
    ul.appendChild(li);
   }
   var LI=ul.querySelectorAll("li");
   LI.forEach(function(_li,x){
    _li.onclick=function(){
     _input.value=(x+1)/2;
     span.style.width=18*(x+1)+"px";
     p.innerHTML=_input.value+"分";
    }
    _li.onmouseover=function(){
     span.style.width=18*(x+1)+"px";
    }
    _li.onmouseout=function(){
     span.style.width=(_input.value)*36+"px";
    }
   })
   var br=document.createElement("br");
   p.parentNode.insertBefore(br,p);
   p.parentNode.insertBefore(p,br);
  })
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
JavaScript实现美化滑块效果
May 17 #Javascript
vue中使用mxgraph的方法实例代码详解
May 17 #Javascript
vue中引入mxGraph的步骤详解
May 17 #Javascript
微信小程序云开发 搭建一个管理小程序
May 17 #Javascript
微信小程序云开发实现增删改查功能
May 17 #Javascript
微信小程序云开发实现云数据库读写权限
May 17 #Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 #Javascript
You might like
图文详解PHP环境搭建教程
2016/07/16 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
详解python读取和输出到txt
2019/03/29 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
通过实例解析Python调用json模块
2019/12/11 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
蔻驰法国官网:COACH法国
2018/11/14 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
经济国贸专业求职信
2014/06/18 职场文书
档案工作汇报材料
2014/08/21 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server