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 相关文章推荐
Jquery 扩展方法
May 06 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 Javascript
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
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
关于python写入文件自动换行的问题
2018/06/23 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Django Form常用功能及代码示例
2020/10/13 Python
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
外企测试工程师面试题
2015/02/01 面试题
公司廉洁自律承诺书
2014/03/27 职场文书
学校端午节活动方案
2014/08/23 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书