这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 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>
- <div class="starnone">
- <div class="starWrap">
- <div class="star" id="star">
- </div>
- </div>
- </div>
- <div>
- <input type="text" id="num">
- %
- <button id="ok">
- OK
- </button>
- </div>
- <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>
用到的两个图片。
来源: http://www.phperz.com/article/17/0714/335317.html