注意要先有图片:     放在 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. WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形

    原文:WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形 说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘> ...

  2. asp.net (webapi) core 2.1 跨域配置

    原文:asp.net (webapi) core 2.1 跨域配置 官方文档 ➡️ https://docs.microsoft.com/zh-cn/aspnet/core/security/cors ...

  3. mysql重置root密码,并设置可远程访问

    linux系统: mysqld_safe --skip-grant-tables & mysql -u root use mysql UPDATE user SET host = '%' wh ...

  4. WPF Binding Path妙用

    <Window x:Class="XamlTest.Window9"        xmlns="http://schemas.microsoft.com/winf ...

  5. window对象的方法

    window.alert('大家好!');//弹出警告对话框 window.confirm('确定要删除吗?');//确定.取消对话框,返回true或false; window.navigate(ur ...

  6. wpf 快速建立可以拖动对象

    1.引用两个.net 程序集 2.xaml name space导入 xmlns:i ="http://schemas.microsoft.com/expression/2010/inter ...

  7. sqlserver创建接受任何类型的nvl

    if exists ( select * from sys.objects where object_id = object_id(N'dbo.nvl') and type = N'FN') begi ...

  8. Python杂谈: __init__.py的作用

    我们经常在python的模块目录中会看到 "__init__.py"  这个文件,那么它到底有什么作用呢? 1. 标识该目录是一个python的模块包(module package ...

  9. Windows实用小工具-问题步骤记录器

    今晚给大家介绍个实用的好工具,可以做简单的问题记录,再也不用截图加注释这么辛苦了····· 经测试,这东东在win7,2008 及2008R2里适用,也就是说,在win7以上的系统中才有.好了,下面直 ...

  10. List<T>多字段排序的一个通用类

    本文中的方法旨在解决通用的问题,非常注重效率的地方,还应该针对具体的类去写排序方法. 废话不多说,直接上代码 具体使用场景: 要排序的类 1 public class bb 2 { 3 public ...