首页 > web前端 > js教程 > 正文

JS完成星级评分功能的实例详解

Y2J
发布: 2017-05-20 13:19:51
原创
2297 人浏览过

这篇文章主要为大家详细介绍了JavaScript实现简单的星星评分效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

大概实现思路就是用一张灰色的星星作为背景,然后让有颜色的星星图片定位在灰色的星星图片上,控制有颜色星星图片的宽度即可达到基本效果。如下图:

下面上代码:

<html> 
<head> 
  <meta charset="UTF-8"> 
  <title>星星</title> 
  <style> 
    .starnone,.starWrap{ 
      width: 100px; 
      height: 20px; 
    } 
    .starnone{ 
      position: relative; 
      background: url(stars-none20px.png) no-repeat; 
    } 
    .star{ 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 70%; 
      height: 20px; 
      background: url(stars20px.png) no-repeat; 
    } 
    #num{ 
      width: 30px; 
    } 
  </style> 
</head> 
<body> 
  <p class="starnone"> 
    <p class="starWrap"> 
      <p class="star" id="star"></p> 
    </p> 
  </p> 
  <p> 
    <input type="text" id="num"> % 
    <button id="ok">OK</button> 
  </p> 
  <script> 
    window.onload = function(){ 
      var star = document.getElementById("star"); 
      var okBtn = document.getElementById("ok"); 
      var num = document.getElementById("num"); 
      okBtn.onclick = function(){ 
        var value = parseFloat(num.value); 
        if (value>100) { 
          alert("请小于100"); 
          return; 
        } else if(value<0){ 
          alert("请大于0"); 
          return; 
        } 
        star.style.width = value + "px"; 
      } 
    } 
  </script> 
</body> 
</html>
登录后复制

用到的两个图片。


【相关推荐】

1. Javascript免费视频教程

2. JS如何判断文字是全角还是半角

3. nodejs+websocket完成一个聊天系统功能

4. Js完成倒计时时差效果

5. 关于JS中递归删除数组中元素的方法详解

以上是JS完成星级评分功能的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
js
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!