//直接复制过去就可以了(你也可以吧css和js封装成css和js文件导入)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<style>

/* 星级评分 */
.shop-rating {
    height: 25px;
    overflow: hidden;
    zoom: 1;
    padding: 2px 0px;
    position: relative;
    z-index: 999;
}

.shop-rating span {
    height: 23px;
    display: block;
    line-height: 23px;
    float: left;
}

.shop-rating span.title {
    width: 125px;
    text-align: right;
    margin-right: 5px;
}

.shop-rating ul {
    float: left;
    margin:0;padding:0
}

.shop-rating .result {
    margin-left: 20px;
    padding-top: 2px;
}

.shop-rating .result span {
    color: #ff6d02;
}
.shop-rating .result em {
    color: #f60;
    font-family: arial;
    font-weight: bold;
}
.shop-rating .result strong {
    color: #666666;
    font-weight: normal;
}
.rating-level,
.rating-level a {
    background: url(http://a.tbcdn.cn/app/rc/img/star_v2.png) no-repeat scroll 1000px 1000px;
}
.rating-level {
    background-position: 0px 0px;
    width: 120px;
    height: 23px;
    position: relative;
    z-index: 1000;
}
.rating-level li {
    display: inline;
}

.rating-level a {
    line-height: 23px;
    height: 23px;
    position: absolute;
    top: 0px;
    left: 0px;
    text-indent: -999em;
    *zoom: 1;
    outline: none;
}

.rating-level a.one-star {
    width: 20%;
    z-index: 6;
}

.rating-level a.two-stars {
width: 40%;
z-index: 5;
}

.rating-level a.three-stars {
    width: 60%;
    z-index: 4;
}

.rating-level a.four-stars {
    width: 80%;
    z-index: 3;
}

.rating-level a.five-stars {
    width: 100%;
    z-index: 2;
}

.rating-level .current-rating,.rating-level a:hover{background-position:0 -28px;}
.rating-level a.one-star:hover,.rating-level a.two-stars:hover,.rating-level a.one-star.current-rating,.rating-level a.two-stars.current-rating{background-position:0 -116px;}
.rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating{background-position:0 -28px;}
</style>
</head>
 <body>

<form>
<div class="shop-rating">
<span class="title">产品服务：</span>
<ul class="rating-level" id="stars1">
<li><a class="one-star" star:value="1" href="#">1</a></li>
<li><a class="two-stars" star:value="2" href="#">2</a></li>
<li><a class="three-stars" star:value="3" href="#">3</a></li>
<li><a class="four-stars" star:value="4" href="#">4</a></li>
<li><a class="five-stars" star:value="5" href="#">5</a></li>
</ul>
<span class="result" id="stars1-tips"></span>
<input type="hidden" id="stars1-input" name="a" value="0" size="2" />
</div>

<div class="shop-rating">
<span class="title">环境服务：</span>
<ul class="rating-level" id="stars2">
<li><a class="one-star" star:value="1" href="#">1</a></li>
<li><a class="two-stars" star:value="2" href="#">2</a></li>
<li><a class="three-stars" star:value="3" href="#">3</a></li>
<li><a class="four-stars" star:value="4" href="#">4</a></li>
<li><a class="five-stars" star:value="5" href="#">5</a></li>
</ul>
<span class="result" id="stars2-tips"></span>
<input type="hidden" id="stars2-input" name="b" value="0" size="2" />
</div>

<div class="shop-rating">
<span class="title">服务态度：</span>
<ul class="rating-level" id="stars3">
<li><a class="one-star" star:value="1" href="#">1</a></li>
<li><a class="two-stars" star:value="2" href="#">2</a></li>
<li><a class="three-stars" star:value="3" href="#">3</a></li>
<li><a class="four-stars" star:value="4" href="#">4</a></li>
<li><a class="five-stars" star:value="5" href="#">5</a></li>
</ul>
<span class="result" id="stars3-tips"></span>
<input type="hidden" id="stars3-input" name="c" value="0" size="2" />
</div>
<br/>
<div class="row" align="center">
    <div class="col-md-1"> </div>
    <div class="col-md-11" align="left">
     <button type="button" class="btn btn-primary" id="test" style="width: 100px;">我 要 评 论</button>
    </div>
 </body>
<script>

$("#test").click(function(){
    alert("产品服务="+$("#stars1-input").val()+" 分");
    alert("环境服务="+$("#stars2-input").val()+" 分");
    alert("服务态度="+$("#stars3-input").val()+" 分");
});

var Class = {
    create: function() {
        return function() { this.initialize.apply(this, arguments); }
    }
}
var Extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
}
function stopDefault( e ) {
     if ( e && e.preventDefault ){
        e.preventDefault();
    }else{
        window.event.returnValue = false;
    }
    return false;
}
/**
 * 星星打分组件
 *
 * @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 || {});
    }
}

var Stars1 = new Stars("stars1");
var Stars2 = new Stars("stars2");
var Stars3 = new Stars("stars3");

</script>
</html>

效果图：

JS仿淘宝星星评价的更多相关文章

  1. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

  2. JS 仿淘宝幻灯片 非完整版 小案例

    仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" &quo ...

  3. 原生js仿淘宝手机购买选项代码

    这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...

  4. js 实现仿 淘宝 五星评价 demo

    <style> @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.co ...

  5. JS仿淘宝左侧菜单

    http://www.webdm.cn/webcode/1c724a06-06f4-4c4f-931a-c683285fa700.html

  6. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  7. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  8. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  9. 仿淘宝头像上传功能（三）——兼容 IE6 浏览器。

    前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器 之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...

随机推荐

  1. 表单提交按钮input和button、a的差异

    现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来.在以前的日子里,大家都习惯于用input,因为 ...

  2. git实践

    撤销提交 根据–soft –mixed –hard,会对working tree和index和HEAD进行重置: git reset –mixed:此为默认方式,不带任何参数的git reset,即时 ...

  3. Effective C++ 34 区分接口继承和实现继承

    public继承从根本上讲,有两部分:接口继承和实现继承.两者之前的区别很像函数声明与函数定义. 具体设计中,会呈现三种形式:derived class只继承成员函数的接口(纯虚函数):derived ...

  4. 开大你的音响，感受HTML5 Audio API带来的视听盛宴

    话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等 ...

  5. oracle查询以当前年份为准的近些年数据

    今天在工作中遇到了一个查询近几年数据的问题,oracle学的比较渣渣,学习了一下. 举个例子: 比如说员工入职,我想看这个公司的员工入职情况,然后做一个趋势统计表. 以当前年份为准,查看近5年的情况趋 ...

  6. 【转】Java读取matlab的.mat数据文件

    参考:Java读取mat文件 下载链接:ujmp  jmatio 下载完两个.jar文件之后,如何引用到java项目当中?项目名称->右键->Property->Java Build ...

  7. Apache curator-client详解

    Apache curator框架中curator-client组件可以作为zookeeper client来使用,它提供了zk实例创建/重连机制等,简单便捷.不过直接使用curator-client并 ...

  8. 我常用的find命令

    查找某种类型文件中包含特定字符的文件 find /* -type f -name "*.php" |xargs grep "rename(" find ./|x ...

  9. 日志解析LogParse启动参数配置

    -task task_stat1001to1010.yaml -log log4j_stat1001to1010.xml 用绝对路径

  10. iOS/Android 浏览器(h5)及微信中唤起本地APP

    在移动互联网,链接是比较重要的传播媒质,但很多时候我们又希望用户能够回到APP中,这就要求APP可以通过浏览器或在微信中被方便地唤起. 这是一个既直观又很好的用户体验,但在实现过程中会遇到各种问题: ...