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 相关文章推荐
js setTimeout 参数传递使用介绍
Aug 13 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
详解适配器在JavaScript中的体现
Sep 28 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
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
js玩一玩WSH吧
2007/02/23 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
Node.js文件操作详解
2014/08/16 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
详解Python if-elif-else知识点
2018/06/11 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
工业自动化毕业生自荐信范文
2014/01/04 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
教师研修随笔感言
2014/01/23 职场文书
小学教师培训感言
2014/02/11 职场文书
建设投标担保书
2014/05/13 职场文书
爱护公物演讲稿
2014/09/09 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
2015年考研复习计划
2015/01/19 职场文书
出国导师推荐信
2015/03/25 职场文书
安全教育培训心得体会
2016/01/15 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
nginx服务器的下载安装与使用详解
2021/08/02 Servers