一般我们在一些购物以及美食的网站都会看到五星好评之类的，一下是使用js制作的五星好评！

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style type="text/css">
  7. *{
  8. margin:0;
  9. padding:0;
  10. }
  11. div{
  12. width:135px;
  13. height: 30px;
  14. z-index: 1;
  15. opacity: .8;
  16. background: url("images/star.gif") repeat-x;
  17. position: relative;
  18. }
  19. .one{
  20. height: 30px;
  21. position: absolute;
  22. top:0;
  23. left:0;
  24. background:url('images/star.gif') repeat-x 0 -30px;
  25. }
  26. </style>
  27. <script>
  28. window.onload=function() {
  29. var div = document.getElementsByTagName("div")[0];
  30. var p = document.createElement("p");
  31. p.setAttribute("class","one");
  32. div.appendChild(p);
  33. div.onclick=function(ev)
  34. {
  35. var oEvent=ev||event;
  36. var wid = oEvent.offsetX;
  37. if(wid>=135){
  38. wid = 135;
  39. }
  40. p.style.width=wid+"px";
  41. }
  42. }
  43. </script>
  44. </head>
  45. <body>
  46. <div></div>
  47. </body>
  48. </html>
 

直接复制粘贴 即可查看效果图：

js五星好评的更多相关文章

  1. js五星好评2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 如何用jQuery实现五星好评

    jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了. 接下 ...

  3. jQuery实现简单的五星好评

    最近一直在认真的努力工作,今天工作完成得差不多了,比较轻松点,在工作中有遇到用jq实现五星好评功能,觉得简单又有用,所以空闲时间就想分享出来. css部分: <style> .u_star ...

  4. 亲，麻烦给个五星好评！—RatingBar

    引言 上一篇的CheckBox已经让大家越来越接近实战演练了,本章我们继续分享干货给大家,今天介绍一个实用的UI控件RatingBar(星级评分条),对于使用过电商APP(某东,某宝等)的小伙伴们来说 ...

  5. python爬虫06 | 你的第一个爬虫，爬取当当网 Top 500 本五星好评书籍

    来啦,老弟 我们已经知道怎么使用 Requests 进行各种请求骚操作 也知道了对服务器返回的数据如何使用 正则表达式 来过滤我们想要的内容 ... 那么接下来 我们就使用 requests 和 re ...

  6. UWP 五星好评

    var pfn = Package.Current.Id.FamilyName; await Launcher.LaunchUriAsync(new Uri("ms-windows-stor ...

  7. JQ五星好评效果

    $(".list-txt ul").find("li").click(function(){    if($(this).index()==0){       ...

  8. js五星评分

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. python爬虫06取当当网 Top 500 本五星好评书籍

    主要思路 使用 page 变量来实现翻页 我们使用 requests 请求当当网 然后将返回的 HTML 进行正则解析 由于我们暂时还没学到数据库 所以解析完之后就把内容存到文件中 def main( ...

随机推荐

  1. 供安全工程师实用的SOC模型

    一.背景 如今,安全概念满天飞,什么安全运营中心(SOC).威胁情报(TI).态势感知等等不一而足,这些概念及其背后代表的安全思想都很好,不过很多产品为了迎合国内的工作汇报都做成了很多Dashboar ...

  2. 内网渗透中的NTLM-Hash Relay

    基础知识 NTLN和Net-NTLM 1.NTLM(V1/V2)的hash是存放在安全账户管理(SAM)数据库以及域控的NTDS.dit数据库中,获取该Hash值可以直接进行PtH攻击,我博客中前文也 ...

  3. Maven 搭建 SSM框架——Spring+SpringMVC+Mybatis的搭建教程

    一:概述 SSM框架在项目开发中经常使用到,相比于SSH框架,它在仅几年的开发中运用的更加广泛. Spring作为一个轻量级的框架,有很多的拓展功能,最主要的我们一般项目使用的就是IOC和AOP.Sp ...

  4. iOS 截屏分享（包含状态栏与不包含状态栏）

    iOS8以上的新方法PhotoKit 监听截图相册变化,取最后一张图片:http://www.hangge.com/blog/cache/detail_1515.html PhotoKit 获取本机相 ...

  5. Java--static、final、static final的区别

    一.final final修饰类:表示该类不能被继承:final类中的方法默认是final的: final修饰方法:表示该方法无法被重写: final修饰方法参数:表示在变量的生存期中它的值不能被改变 ...

  6. ELK之在windows安装filebeat收集日志

    登录官方网站下载filebeat的windows客户端 https://www.elastic.co/downloads/beats 下载压缩包,无需解压 修改配置文件filebeat.yml 其余设 ...

  7. 洛谷P1117 优秀的拆分【Hash】【字符串】【二分】【好难不会】

    题目描述 如果一个字符串可以被拆分为AABBAABB的形式,其中 A和 B是任意非空字符串,则我们称该字符串的这种拆分是优秀的. 例如,对于字符串aabaabaaaabaabaa,如果令 A=aabA ...

  8. 51nod1432 独木舟

    1432 独木舟  基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 n个人,已知每个人体重.独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者 ...

  9. Solr学习笔记之问题汇总

    一. 问题描述:Solr在建立索引时候出现如下错误:org.apache.solr.common.SolrException: Document [null] missing required fie ...

  10. 计蒜客 30990 - An Olympian Math Problem - [简单数学题][2018ICPC南京网络预赛A题]

    题目链接:https://nanti.jisuanke.com/t/30990 Alice, a student of grade 6, is thinking about an Olympian M ...