评论星等级 的实现

最新推荐文章于 2020-06-28 21:13:27 发布
最新推荐文章于 2020-06-28 21:13:27 发布
阅读量159 收藏
点赞数
分类专栏： java 文章标签： QQ JavaScript HTML J# ViewUI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dengji.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=GBK">
   
  <script type="text/javascript">  
   var quantity1=0;
   var quantity2=0;
   var quantity3=0;
   var quantity4=0;
  function aa(num,a){   
               
    for(var i=a*5;i<num;i++)  {  
      var str="img"+(i+1);
      var   img   =   document.getElementById(str);     
      var cc="images/xingyellow2.jpg";
      var index=img.src.indexOf(cc);
      if(index == -1){
             img.src     =   "images/xingonly.jpg";        
      }
      }
    }
   
    function cc(num,a){
           if(num<=5)                quantity1=num;
           if(num>5&&num<=10)        quantity2=num-5;
           if(num>10&&num<=15)       quantity3=num-10;             
           if(num>15&&num<=20)       quantity4=num-15; 
        
      for(var i=a*5;i<num;i++)  { 
     var str="img"+(i+1);
      var   img   =   document.getElementById(str);
            img.src     =   "images/xingyellow2.jpg";  
      }
      document.getElementById(str).οnmοuseοut=function(){};
      for(var j=num;j<(a*5+5);j++)  {  
      var str1="img"+(j+1);
      var   img1   =   document.getElementById(str1);
            img1.src     =   "images/xingonly.jpg";  
      }
      document.getElementById(str).οnmοuseοut=function(){};       
    }
   
   
     function qq(num,a){
           
    for(var i=a*5;i<num;i++)  { 
     var str="img"+(i+1);
      var   img   =   document.getElementById(str);            
    var cc="images/xingyellow2.jpg";
      var index=img.src.indexOf(cc);
      if(index == -1){
             img.src     =   "images/xingyellow1.jpg";
             document.getElementById(str).οnmοuseοut=function(){for(var i=a*5;i<num;i++)  {  
       var str="img"+(i+1);
       var   img   =   document.getElementById(str);     
       var cc="images/xingyellow2.jpg";
       var index=img.src.indexOf(cc);
       if(index == -1){
              img.src="images/xingonly.jpg";        
       }
        }};     
      }  
      }
    }   
   
    function testxing(){
   
    alert("服务:"+quantity1);
    alert("质量:"+quantity2);
    alert("环境:"+quantity3);
    alert("价格:"+quantity4);
   
    }
 </script>

  </head>
 
  <body>
     <form action="" name="form1">
    <table width="100%" border="0" cellspacing="0" cellpadding="0"
     class="bodor">
    
     <tr>
      <td width="90" height="24" align="right" class="ditop">
       <a name="dianping">添加点评</a>
      </td>
      <td width="627" align="left" class="ditop">
       &nbsp;
      </td>
     </tr>
     <tr>
      <td align="left" class="tdco1">
       <ul>
        <li>
         服务
        </li>
        <li>
         <img src="images/xingonly.jpg"
          οnmοusemοve="qq(1,0)" οnmοuseοut="aa(1,0)" alt="差"
          οnmοusedοwn="cc(1,0)" id="img1" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(2,0)" οnmοuseοut="aa(2,0)" alt="一般"
          οnmοusedοwn="cc(2,0)" id="img2" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(3,0)" οnmοuseοut="aa(3,0)" alt="好"
          οnmοusedοwn="cc(3,0)" id="img3" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(4,0)" οnmοuseοut="aa(4,0)" alt="很好"
          οnmοusedοwn="cc(4,0)" id="img4" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(5,0)" οnmοuseοut="aa(5,0)" alt="非常好"
          οnmοusedοwn="cc(5,0)" id="img5" />
        </li>
        <li>
         质量
        </li>
        <li>
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(6,1)" οnmοuseοut="aa(6,1)" alt="差"
          οnmοusedοwn="cc(6,1)" id="img6" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(7,1)" οnmοuseοut="aa(7,1)" alt="一般"
          οnmοusedοwn="cc(7,1)" id="img7" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(8,1)" οnmοuseοut="aa(8,1)" alt="好"
          οnmοusedοwn="cc(8,1)" id="img8" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(9,1)" οnmοuseοut="aa(9,1)" alt="很好"
          οnmοusedοwn="cc(9,1)" id="img9" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(10,1)" οnmοuseοut="aa(10,1)" alt="非常好"
          οnmοusedοwn="cc(10,1)" id="img10" />
        </li>
        <li>环境 </li>
        <li>
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(11,2)" οnmοuseοut="aa(11,2)" alt="差"
          οnmοusedοwn="cc(11,2)" id="img11" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(12,2)" οnmοuseοut="aa(12,2)" alt="一般"
          οnmοusedοwn="cc(12,2)" id="img12" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(13,2)" οnmοuseοut="aa(13,2)" alt="好"
          οnmοusedοwn="cc(13,2)" id="img13" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(14,2)" οnmοuseοut="aa(14,2)" alt="很好"
          οnmοusedοwn="cc(14,2)" id="img14" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(15,2)" οnmοuseοut="aa(15,2)" alt="非常好"
          οnmοusedοwn="cc(15,2)" id="img15" />
        </li>

        <li>
         价格
        </li>
        <li>
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(16,3)" οnmοuseοut="aa(16,3)" alt="差"
          οnmοusedοwn="cc(16,3)" id="img16" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(17,3)" οnmοuseοut="aa(17,3)" alt="一般"
          οnmοusedοwn="cc(17,3)" id="img17" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(18,3)" οnmοuseοut="aa(18,3)" alt="好"
          οnmοusedοwn="cc(18,3)" id="img18" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(19,3)" οnmοuseοut="aa(19,3)" alt="很好"
          οnmοusedοwn="cc(19,3)" id="img19" />
         <img src=" images/xingonly.jpg"
          οnmοusemοve="qq(20,3)" οnmοuseοut="aa(20,3)" alt="非常好"
          οnmοusedοwn="cc(20,3)" id="img20" />
        </li>

       </ul>
      </td>
     </tr>
    </table>
    <input type="button" οnclick="testxing();" value="查看星级"/>
    </form>
  </body>
</html>
===========================================================

 

改改图片的路径就行了 

hahaliu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Axure 星级评分插件
01-25
Axure中的插件，含有星级评分插件和常用评分插件，均可显示动态评分效果
简单实现评价星级
ZL_do_it的博客
05-25 780
星级评价实现方法 本节内容是关于如何实现星级评价，在我们当前的生活中，我们在购买某件产品或者乘坐滴滴车，都会让我们给出一个评价，我们可以给这个产品或者服务打分，通常是一到五颗星，那么这是如何实现的呢？ 首先，我们要准备好一张展示图： 我们可以看到这张图上有两颗大小相等的星星，但是一个是灰色的，一个是金黄色的，是被点亮的。那么我们为什么要准备这么一张图呢，它有什么用处呢？ 在这之前，我们需要明白我们平时给评价时是怎样的展示效果 一般而言，我们在给评价时，我们的鼠标放在哪一颗星上，那么包括这一颗星在内的前几
jquery星星评分插件Bootstrap Star Rating
06-12
Bootstrap Star Rating是一个简单而强大的jQuery插件实现星级分数评级。浏览器要求ie9以上版本.演示地址:http://www.jq22.com/jquery-info460
实现星星评分功能
11-10
很好的实现星星点击打分。星星的数量可以自己添加或减少。
java星级评分
07-09
非常好用的jsp星级评分代码 在原有的基础上经过加工处理 现在已经完美 可以用鼠标点击锁定星数
一行代码实现星级评价
07-19
在iOS开发中，星级评价是常见的用户界面元素，用于让用户对产品或服务进行打分，通常从一星到五星不等。"一行代码实现星级评价"的标题表明我们将讨论一个简洁且高效的解决方案，使得开发者能快速集成这个功能。描述...
vue 实现类似淘宝星级评分的示例
08-27
Vue 实现类似淘宝星级评分的示例 在本文中，我们将为大家分享 Vue 实现类似淘宝星级评分的示例，这篇示例具有很好的参考价值，希望对大家有所帮助。下面，让我们一起来看看如何使用 Vue 实现类似淘宝星级评分的示例...
jquery文章评论星级打分效果代码
10-27
本文将深入探讨如何使用jQuery实现文章评论的星级打分效果，这是一个常见且实用的功能，常用于博客、论坛和电子商务网站，以增强用户体验。 首先，我们需要了解星级打分的基本原理。通常，它通过一组星形图标来表示...
Jquery 等级星
11-06
**jQuery 等级星实现详解** 在网页设计和开发中，经常需要为用户评价、评分系统添加视觉反馈，如星级评价。`jQuery`库因其简单易用的API和丰富的插件，成为实现这种功能的首选工具之一。本篇文章将详细讲解如何利用...
jQuery美化单选框星级评论表单代码
11-02
用户可以通过点击星形图标选择他们对某一事物的评价等级，这些星星不仅可以被点击选择，还能实时显示用户的当前选择，提高反馈的直观性。 首先，我们需要在HTML中创建一个包含单选按钮的表单。每个星形图标对应一个...
星级评价 实现
weixin_33724570的博客
04-09 151
设置评价星星 字体的大小适合布局的大小 [Lable名 sizeToFit]; .h typedef enum kRatingViewStyle { kSmallStyle = 0, kNormalStyle = 1 }kRatingViewStyle; @interface RatingView : UIView { @private ...
uni-app+iconfont 实现星级评分（vue）
qq_38170252的博客
07-08 6440
效果图 ​​ 需求 点击星星进行评分，若评分低于三星，则展示问题原因，星级评分多少则高亮几颗星，所有选项均为必选项，评分完成后可提交表单，并把问题、星级分数、原因传给后台。 因需求原因先做了星星组件的组件，其实可以将问题、星星、备注原因整合成一个组件，这里就主要记录星星评分组件的实现。 1. uni-app uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可...
评价星级（星星）
一个很酷的人
08-23 4408
直接上代码，把下面的css和html 直接复制到jsp中就可使用，  通过改变&lt;i&gt;标签中的class样式来控制星星个数： class="star-on-png" 代表一星 class="star-half-png" 代表半颗星 class="star-off-png" 代表零颗星 效果图：（颜色可通过修改下面css中的颜色属性任意修改，大小可通过修改下面css...
Android之RatingBar实现评论星级效果
yechaoa
12-24 5941
效果图： 1.布局 <RatingBar android:id="@+id/ratingbar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numStars="5" //设置数量 andr
点评星星效果
CamilleZJ的博客
12-06 453
如上点评所获星级效果展示，星级以半颗为增长的最小宽度。 实现，如下雪碧图：  不同星级直接用background-position取到相应的图即可，上面星级可选大、中、小。 另一种做法或若是星星不是按照半颗半颗增长，则可以用一张灰图和一张亮图叠加，灰图在下亮图在上，灰图width100%，之后通过改变亮图的width，从而实现如上效果。...
（商品评价页）商品星级评分html+css+js
foolishma的博客
06-28 4300
html部分: <div class="evaluate_main"> <div class="evaluate_title"> <div class="line"></div> 我的评价 </div> <div class="evaluateP_info"> <div class="info_tit">
评价星星等级显示(包含星星对应的等级）
huachongrizhao的博客
06-17 1659
评价星星等级显示(包含星星对应的等级）
无刷新评星控件演示
lovegonghui的专栏
11-13 420
无刷新新评级控件 此控件是通过自己写一个自定义控件，无刷新技术是通过JavaScript的代码实现，通过函数getXMLHTTPRequest实现，评级数据有两种方式，一种是SQL数据库，另一种是XML文档，本例中采用的是XML，包含的评级的总人数，IP地址、评级时间、总评分。根据总评分，高亮显示几颗星。 前台调用代码： 无刷新打分控件演示
JS实现简单的评分评星功能
mydreamhope的博客
01-11 5577
for (var i = 0; i < images.length; i++) { images[i].onmouseover = (function (num) { return function () { //再遍历一次所有的星鼠标左边的星变成黄色,有边变成灰色 for (var j = 0; j < images.length; j++
商业之星V7培训教程：高级PPT详解
维护供应商资料是保证供应链顺畅的关键，包括供应商名称、联系方式、信用等级等，便于采购管理和结算。 1.5 商品档案建立： 录入商品的基本属性，如名称、规格、单位、价格等，形成完整的商品档案。 1.6 组合商品...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值