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 相关文章推荐
JSON语法五大要素图文介绍
Dec 04 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
解决vue 表格table列求和的问题
Nov 06 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
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
10个实用的PHP代码片段
2011/09/02 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
javascript中的throttle和debounce浅析
2014/06/06 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
捷克时尚网上商店:OTTO
2018/03/15 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
一年级数学教学反思
2014/02/01 职场文书
大专生找工作自荐书
2014/06/10 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
关于颐和园的导游词
2015/01/30 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
2016年教师节慰问信
2015/12/01 职场文书
导游词之杭州西湖
2019/09/19 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL
nginx配置指令之server_name的具体使用
2022/08/14 Servers