/**
* 星星打分组件
*
* @author Yunsd
* @date 2010-7-5
*/
var Stars = Class.create();
Stars.prototype = {
initialize: function(star,options) {
this.SetOptions(options); //默认属性
var flag = 999; //定义全局指针
var isIE = (document.all) ? true : false; //IE?
var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表
var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 输出结果
var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示
var nowClass = " " + this.options.nowClass; // 定义选中星星样式名
var tipsTxt = this.options.tipsTxt; // 定义提示文案
var len = starlist.length; //星星数量
for(i=0;i<len;i++){ // 绑定事件 点击 鼠标滑过
starlist[i].value = i;
starlist[i].onclick = function(e){
stopDefault(e);
this.className = this.className + nowClass;
flag = this.value;
input.value = this.getAttribute("star:value");
tips.innerHTML = tipsTxt[this.value]
}
starlist[i].onmouseover = function(){
if (flag< 999){
var reg = RegExp(nowClass,"g");
starlist[flag].className = starlist[flag].className.replace(reg,"")
}
}
starlist[i].onmouseout = function(){
if (flag< 999){
starlist[flag].className = starlist[flag].className + nowClass;
}
}
};
if (isIE){ //FIX IE下样式错误
var li = document.getElementById(star).getElementsByTagName('li');
for (var i = 0, len = li.length; i < len; i++) {
var c = li[i];
if (c) {
c.className = c.getElementsByTagName('a')[0].className;
}
}
}
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Input: "",//设置触保存分数的INPUT
Tips: "",//设置提示文案容器
nowClass: "current-rating",//选中的样式名
tipsTxt: ["1分-严重不合格","2分-不合格","3分-合格","4分-优秀","5分-完美"]//提示文案
};
Extend(this.options, options || {});
}
}
/* For TEST */
function teststars(){
alert(document.getElementById("stars1-input").value + "|" + document.getElementById("stars2-input").value)
}
var Stars1 = new Stars("stars1",{nowClass:"current-rating",tipsTxt:["100分-严重不合格","200分-不合格","300分-合格","400分-优秀","500分-完美"]})
var Stars2 = new Stars("stars2")
</script>
</body>
</html>
- 大小: 1.8 KB
分享到:
相关推荐
"星星评分 星级 五星评分"这个主题聚焦于一种常见的评分方式——星级评分系统,它通常由一到五星表示,五星代表最高评价。在Web开发中,实现这样的功能主要依赖JavaScript(js)技术。 首先,我们要理解星级评分的...
wpf实现简单的星级评分
在IT行业中,实现星星评分功能是一项常见的需求,尤其在电商、评论系统以及各种用户评价场景中。本篇文章将深入探讨如何使用Java来实现这一功能,包括设计思路、关键代码实现以及可能遇到的问题。 首先,我们需要...
3. 评论功能:结合星级评分,提供用户发表评论的入口,以获取更详细的反馈。 总之,Android星级评分组件是提高用户参与度和应用评价的重要工具。通过理解组件的工作原理,我们可以创建自定义的、具有交互性的评分...
在构建Web应用时,增强用户体验的一个重要特性是提供星级评分功能。这允许用户对网站上的内容,如文章、电影或资源,进行评价,为其他用户提供参考,并为网站增添互动性。本文将详细介绍如何利用jQuery和PHP来实现这...
web端星星评分,封装了js代码,可重复利用。没有html和css,需要自己写
Bootstrap图标在移动端应用中常用于增强用户界面的视觉效果,特别是在实现星星评分功能时,它能够提供直观且易于理解的反馈。Bootstrap图标库通常包含了多种预定义的图标,包括星形图标,这些图标设计简洁、响应式且...
**jQuery 星级评分插件详解** 在Web开发中,为用户提供直观的反馈和互动是至关重要的,其中星级评分系统就是一个常见的元素。jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和动画等功能,使得创建...
3. 应用实例:为了使开发者能够快速理解和使用星星评分控件,通常会提供一些简单的示例代码。这些示例可能包含HTML结构、CSS样式和JavaScript(如果涉及动态交互)三部分。通过这些例子,开发者可以了解如何在自己的...
score: 3, // 默认评分3星 half: true, // 支持半星 click: function(score) { console.log('当前评分:' + score); } }); ``` `raty-master.zip`可能是该插件的完整源码包,包含了所有相关的资源文件。`...
标题提到的"一个简单的星级评分",是针对用户评价或反馈系统中常见的一种UI元素,它允许用户通过选择星星的数量来表达他们对某个产品或服务的满意度。这种组件在各种应用中广泛使用,如电商、餐饮、电影评分等场景。...
接下来,我们使用JavaScript(这里可以使用jQuery或者其他库,但也可以纯JavaScript实现)来监听选择框的改变事件,当用户选择一个新的评分时,更新星星的样式。例如: ```javascript document.getElementById('...
【jQuery星星评分代码】是一种常见的用户界面元素,用于让用户对某个内容或服务进行评价,通常以星形图标表示。在Web开发中,星星评分系统能够为网站增添互动性,提高用户体验,同时也便于收集用户反馈。这个特定的...
在给定的资源中,“asp 简单易用的星星评分/评级 有注释”是一个利用ASP技术实现的星星评分系统,适用于产品评价或服务质量评估,类似于淘宝等电商平台上的用户反馈机制。 该系统的核心功能是让用户通过选择星星的...
"jq星星评分打分"指的是利用jQuery实现的一种用户界面功能,让用户能够对内容进行评价,通常以五角星的形式展示,用户可以点击选择一到五星来表示他们的满意度或评分。 在网页开发中,星星评分系统是一种常见的互动...
jQuery星级评分插件是一种在网页上实现用户评分功能的JavaScript工具,主要基于广泛使用的jQuery库。这个插件设计小巧,加载快速,使得它在各种网页应用中都能高效地工作,尤其是那些对性能有较高要求的场景。其核心...
**jQuery星级评分插件——Raty详解** 在Web开发中,提供用户友好、直观的界面是至关重要的。其中,星级评分系统是常见的交互元素,用于评价产品、服务或内容的质量。Raty是一款基于jQuery的开源插件,它使得在网页...
这里的`stars`可能是一个数组,如`[1, 2, 3, 4, 5]`,代表最大评分。`rating`是当前的评分值,`filled`类将根据`star`是否小于或等于`rating`来决定是否添加,从而控制星星的填充状态。 在组件的脚本部分,我们需要...
在网页设计中,星星评分系统是一种常见的用户反馈方式,它让用户能够通过点击星星来直观地表达对某个产品或服务的满意度。本项目名为"简易 js星星评分html代码",主要展示了如何利用JavaScript、HTML和Bootstrap框架...
这款php+mysql星星评分效果我本人用了非长好,而且代码修改成非常简单,任何垃圾多余代码都去掉,下载后可以直接使用,如果你本人有更高的水平也可以在上面修改,希望有兴趣的朋友可以下载,或者收藏以后备用,谢谢!