这篇文章主要介绍了 js 实现的星星评分功能函数, 涉及 JavaScript 响应鼠标事件实现针对页面元素的遍历与样式属性的修改技巧, 非常简单实用的代码, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现的星星评分功能函数。分享给大家供大家参考,具体如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 星星评分
- </title>
- <script type="text/javascript">
- function rate(obj, oEvent) {
- // 图片地址设置
- var imgSrc = '../images/s0.gif'; //没有填色的星星
- var imgSrc_2 = '../images/s1.gif'; //打分后有颜色的星星
- if (obj.rateFlag) return;
- var e = oEvent || window.event;
- var target = e.target || e.srcElement;
- var imgArray = obj.getElementsByTagName("img");
- for (var i = 0; i < imgArray.length; i++) {
- imgArray[i]._num = i;
- imgArray[i].onclick = function() {
- if (obj.rateFlag) return;
- obj.rateFlag = true;
- alert(this._num + 1); //this._num+1这个数字写入到数据库中,作为评分的依据
- };
- }
- if (target.tagName == "IMG") {
- for (var j = 0; j < imgArray.length; j++) {
- if (j <= target._num) {
- imgArray[j].src = imgSrc_2;
- } else {
- imgArray[j].src = imgSrc;
- }
- }
- } else {
- for (var k = 0; k < imgArray.length; k++) {
- imgArray[k].src = imgSrc;
- }
- }
- }
- </script>
- </head>
- <body>
- <p onmouseover="rate(this,event)">
- <img src="../images/s0.gif" title="很烂" />
- <img src="../images/s0.gif" title="一般" />
- <img src="../images/s0.gif" title="还好" />
- <img src="../images/s0.gif" title="较好" />
- <img src="../images/s0.gif" title="很好" />
- </p>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: