注意要先有图片:     放在 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. IOC DI SL的一些理论

    本文来自圣杰的简书 圣杰 yubinfeng的 这篇文章也很不错 很简单

  2. word 软换行与硬换行

    word 下的软回车,就是按住 Shift+Enter 之后产生的一种效果,通常在文字后面会有一个向下的箭头: 硬回车就是只敲击回车(enter)产生的一种效果了,通常就会在文字后面产生一个向左弯区的 ...

  3. C# WPF报表打印

    前天我的一个同学由于打印报表而苦恼,所以就介绍了一下WPF的打印报表,希望能帮助到大家. 展示报表 1. 首先新建项“报表”,选定项目,右击,点击“添加”->“新建项”->“报表”

  4. Java数组List换算方法

    1.List转换到一个数组.(这里List它是实体是ArrayList) 调用ArrayList的toArray方法. toArray public <T> T[] toArray(T[] ...

  5. BZOJ 3594 Scoi2014 方波波麦田 树阵

    标题效果:给定一个序列,能够选择k次每个部分的数量和在范围内+1,寻求操作后LIS最大值 我的做法是不是一个标准的解决方案. ..5E为什么跑飞的复杂性. . . 首先,显而易见的结论是,我们选择k右 ...

  6. Invalid default value for 'created_at'

    https://github.com/laravel/framework/issues/15144 https://stackoverflow.com/questions/30555844/larav ...

  7. DELPHI7中 TObjectList sort排序问题

    网上收集了一点东西 TOBJECTLIST里,有自带的排序功能 TLIST,TSTRINGLIST也有,MS是一样的 SORT里有一个参数: Compare:TListSortCompare 那我们先 ...

  8. WPF控件获得焦点时去除虚线框

    原文:WPF控件获得焦点时去除虚线框 <Setter Property="FocusVisualStyle" Value="{x:Null}" />

  9. ios7 获取UITablleViewCell

    iOS7之前UITablleViewCell中得contentView得superView就是UITableViewCell.但是在iOS7得时候,contentView得superView确实UIT ...

  10. 通通WPF随笔(2)——自己制作轻量级asp.net网站服务

    原文:通通WPF随笔(2)--自己制作轻量级asp.net网站服务 大学玩asp.net时就发现VS在Debug时会起一个web服务,这东西也太神奇了服务起得这么快,而相对于IIS又这么渺小. 前几个 ...