注意要先有图片:     放在 css/icons/下

HTML代码:

        <div class="ub ub-f1">
<input id="bz-0" type="hidden" value="">
<div class=" res-hui ub-img" id="bz-1" onclick="Fstar(this)"></div>
<div class=" res-hui ub-img" id="bz-2" onclick="Fstar(this)"></div>
<div class=" res-hui ub-img" id="bz-3" onclick="Fstar(this)"></div>
<div class=" res-hui ub-img" id="bz-4" onclick="Fstar(this)"></div>
<div class=" res-hui ub-img" id="bz-5" onclick="Fstar(this)"></div>
</div>

JS代码:

//评星功能
function Fstar(obj){//点击星星发生的事件
var id = $(obj).attr("ID");
var bz = id.split("-")[0];
var num= parseInt(id.split("-")[1]);
$("#"+bz+"-0").val(num);for(var i=0;i<6;i++){
if(i<=num){
$("#"+bz+"-"+i).css("background-image","url('css/icons/starY.png')");//
}else{
$("#"+bz+"-"+i).css("background-image","url('css/icons/starN.png')");
}
}
}

CSS代码:

.res-hui{
background-image:url('icons/starN.png');
width:1.3em;
height:1.3em;
}

Appcan 自定义星星评价的更多相关文章

  1. JS仿淘宝星星评价

    //直接复制过去就可以了(你也可以吧css和js封装成css和js文件导入). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ...

  2. 用这个插件jquery.raty.js————用于星星评价(这个案例用于后台传数据给我,前台显示星星个数)

    1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="ima ...

  3. Appcan 自定义数字加减控件

    DIV部分: *这里的三个ID:as_sub_3.as_now_3.as_add_3里面的“3”可以自定义,这个对于生成任意个数的列表形式很有帮助 *cb 为执行成功后可进行回调 <div cl ...

  4. 微信小程序星星评价

    https://www.jianshu.com/p/4d7359dfa040

  5. js写评价的星星

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/ouqi_qiou/article/det ...

  6. Android RatingBar 自定义样式

    Android RatingBar 自定义样式 1.先定义Style: <style name="RadingStyle" parent="@android:sty ...

  7. ios官方菜单项目重点剖析附项目源码

    原版教程:https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift ...

  8. iOS- 非整星的评分控件(支持小数)

    概述 订单评论里实现星级评分控件: 简单整星评价与非整星的精评价. 详细 代码下载:http://www.demodashi.com/demo/10711.html 现在很多应用都有评分功能. 有了订 ...

  9. 原生JS实现-星级评分系统

    今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...

随机推荐

  1. 我的Spring之旅(二):为请求加入參数

    1.前言 在上一篇我的Spring之旅(一)中,我们仅仅是利用不带參数的请求返回一个网页或一段json,在实际的B/S.C/S网络交互中,请求中须要自己定义的參数.本篇将简单地为之前的请求加入參数. ...

  2. 构建自己的PHP框架(邮件发送)

    完整项目地址:https://github.com/Evai/Aier 我们采用 'nette/mail' 包作为我们的邮件发送基础模块,在它的基础上封装一个 'Mail' 类,暴露出简洁的 API ...

  3. 构建自己的PHP框架(路由)

    完整项目地址:https://github.com/Evai/Aier 上一篇中我们已经建立了一个空的 Composer 项目,本篇将讲述如何构建路由. 下面我们就开始自己来构建路由,先去 GitHu ...

  4. Asp.NET的目的是学习

    一.概观 二.具体介绍 1.Request对象 Request对象是用来获取client在请求一个页面或传送一个Form时提供的全部信息.这包含可以标识浏览器和用户的HTTP变量.存储在client的 ...

  5. WPF异常捕获,并使程序不崩溃!

    原文:WPF异常捕获,并使程序不崩溃! 在.NET中,我们使用try-catch-finally来处理异常.但,当一个Exception抛出,抛出Exception的代码又没有被try包围时,程序就崩 ...

  6. 优雅实现INotifyPropertyChanged接口——利用Lambda表达式

    原文:优雅实现INotifyPropertyChanged接口--利用Lambda表达式 参考文章 在14年的时候,曾经读过上面的参考文章,不过当时并没有怎么理解,慢慢地也就将这篇文章忘诸脑后了. 直 ...

  7. WPF Binding的代码实现

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  8. 数据库访问工具 DBUtl(公孙二狗)

    数据库访问工具 DBUtil DBUtil 用于简化数据库的访问,只要准备好配置文件,调用 DBUtil 的静态函数就能直接得到查询数据库的结果. 本文主要内容有: 数据库访问的思考 DBUtil 实 ...

  9. IIS Express 启用目录浏览

    IIS Express 启用目录浏览,有需要的朋友可以参考下. 今天刚刚使用visual studio 2013创建第一个hello world,结果就发现提示错误. HTTP 错误 403.14 - ...

  10. linuxC动态内存泄漏追踪方法

    C里面没有垃圾回收机制,有时候你申请了动态内存却忘记释放,这就尴尬了(你的程序扮演了强盗角色,有借有还才是好孩子).当你想找出内存泄露的地方时,有的投入海量的代码中,头痛不已.还好GNU C库提供了些 ...