注意要先有图片:     放在 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. ZOJ 2334 HDU 1512 Monkey King

    题意: 猴子们打架  认识的猴子不会打架  两仅仅猴子打完以后就认识了  A认识B B认识C A也认识C  每次打架由两伙猴子进行  分别选出自己的最高战斗力  在战斗之后两仅仅猴子战斗力减半  给出 ...

  2. Blend_技巧篇_导入PSD文件制作ToggleButton (Z)

    原文:Blend_技巧篇_导入PSD文件制作ToggleButton (Z) 系统: Win7sp1 32位 IDE: Microsoft VisualStudio 2013 Ultimate Ble ...

  3. WPF中Style文件的引用——使用xaml代码或者C#代码动态加载

    原文:WPF中Style文件的引用--使用xaml代码或者C#代码动态加载 WPF中控件拥有很多依赖属性(Dependency Property),我们可以通过编写自定义Style文件来控制控件的外观 ...

  4. WPF编游戏系列 之九 物品清单再优化

    原文:WPF编游戏系列 之九 物品清单再优化        在"第三篇"和"第四篇"中通过用户控件和数据绑定功能对物品清单进行一些优化减少了部分C#代码,但感觉 ...

  5. npm学习(-)

    了解npm请前往https://www.npmjs.cn/getting-started/what-is-npm/ npm 由三个独立的部分组成: 网站 注册表(registry) 命令行工具 (CL ...

  6. DOM解析xml实现读、写、增、删、改

    qt提供了三种方式解析xml,不过如果想实现对xml文件进行增.删.改等操作,还是DOM方式最方便. 项目配置 pro文件里面添加QT+=xml include <QtXml>,也可以in ...

  7. swift4.0 Http 请求

    // // HttpHelper.swift // NavigateDemo // // Created by yixin ran on 07/08/2017. // Copyright © 2017 ...

  8. Expression Blend实例动画-大坝水位升高演示

    原文:Expression Blend实例动画-大坝水位升高演示 Expression Blend是个很强大的东西,用它可以完成很多不好做的动画效果. 动画的主要元素: 时间线(Timeline) : ...

  9. 零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上)

    原文:零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上) 一直以来都有人拿Flash的动画问我Blend ...

  10. C# 中使用OPenCV(Emgu)心得

    原文:C# 中使用OPenCV(Emgu)心得 首先介绍一下自己的情况,2010年的3月份开始接触学习C#编程,之前C#和OpenCV都是零基础,由于全都是自学进度比较慢,中间也走了不少弯路.进过三个 ...