java - 小星级评分的jsp页面-6ren

java - 小星级评分的jsp页面

转载作者：行者123 更新时间：2023-11-28 03:41:23

25

4

我有一个页面，star.jsp，我有他的css代码，style.css，它工作正常，但我希望星星更小。

我的代码

star.jsp

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <link href="css/style.css" rel="stylesheet" type="text/css">

    <title>Notation</title>
    <script type="text/javascript">
        function notation(starId) {

            var elements = document.getElementsByClassName("notation-star-
               selected");

            for (i = 0; i < elements.length; i++) {
                elements[i].className = "notation-star";
            }


            document.getElementById(starId).className = "notation-star-
            selected";


            document.getElementById("notationNote").value = starId.substr(4, 
                  4);

            var note = document.getElementById("notationNote").value = 
            starId.substr(4, 4);

            document.getElementById("vote").innerHTML = note.valueOf();



           }
        </script>



       </head>

         <div class="notation-text">Votre avis nous est très précieux pour 
         améliorer la qualité de notre service</div>


   <form method="post" action="voting">
   <div id="star5" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star4" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star3" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star2" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star1" class="notation-star" onClick="notation(this.id);"></div>
   <input type="hidden" id="notationNote" name="notation_note" value="0">
   <input type="submit" value="ok"></form  <br>

   <p id="vote"></p>

              </html>

我的代码

样式.css

body {
font-family: Verdana, arial;
 }

.notation-text {
color: #000000;
font-size: 18px;
text-align: center;
margin: 18px;
}

.notation-block-star {
display: table;
margin: 0 auto;
width: inherit;
}


.notation-star {
background-image: url("../images/etoile_grise.png");
background-repeat: no-repeat;
cursor: pointer;
display: table-cell;
float: right;
height: 64px;
width: 64px;
padding: 10 5px;
}


.notation-star:hover,
.notation-star:hover ~ .notation-star {
background-image: url("../images/etoile_jaune.png");
}

.notation-star-selected {
background-image: url("../images/etoile_jaune.png");
background-repeat: no-repeat;
cursor: pointer;
display: table-cell;
float: right;
height: 64px;
width: 64px;
padding: 0 5px;
}

.notation-star-selected  ~ .notation-star {
background-image: url("../images/etoile_jaune.png");
}

我更新了 width 和 height 并添加了 font-size但它仍然没有用。

最佳答案

示例工作代码希望这能解决您的问题

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <link href="css/style.css" rel="stylesheet" type="text/css">

    <title>Notation</title>
 

<style>
body {
font-family: Verdana, arial;
 }

.notation-text {
color: #000000;
font-size: 18px;
text-align: center;
margin: 18px;
}

.notation-block-star {
display: table;
margin: 0 auto;
width: inherit;
}


.notation-star {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Empty_Star.svg/2000px-Empty_Star.svg.png");
background-repeat: no-repeat;
cursor: pointer;
display: table-cell;
float: right;
height: 20px;
width: 20px;
padding: 10 5px;
background-size: cover;
}


.notation-star:hover,
.notation-star:hover ~ .notation-star {
background-image: url("http://findicons.com/files/icons/1035/human_o2/128/bookmark_new.png");
}

.notation-star-selected {
background-image: url("../images/etoile_jaune.png");
background-repeat: no-repeat;
cursor: pointer;
display: table-cell;
float: right;
height: 64px;
width: 64px;
padding: 0 5px;
}

.notation-star-selected  ~ .notation-star {
background-image: url("../images/etoile_jaune.png");
}
</style>

       </head>

         <div class="notation-text">Votre avis nous est très précieux pour 
         améliorer la qualité de notre service</div>


   <form method="post" action="voting">
   <div id="star5" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star4" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star3" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star2" class="notation-star" onClick="notation(this.id);"></div>
   <div id="star1" class="notation-star" onClick="notation(this.id);"></div>
   <input type="hidden" id="notationNote" name="notation_note" value="0">
   <input type="submit" value="ok"></form  <br>

   <p id="vote"></p>

              </html>

关于java - 小星级评分的jsp页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44199516/

25

4

0

文章推荐： c++ - 在 C++ 中制作 **指针列表

文章推荐： c++ - shobjidl.h 中的第二个 C 链接

文章推荐： c++ - 在库 : symbol structure query 上使用 Breakpad

solr 评分 - fieldnorm
当我搜索“iphone”时，我有以下记录和分数 - 记录1: 字段名称 - 显示名称:“iPhone” 字段名称 - 名称:“iPhone” 11.654595 = (MATCH) sum of:
elasticsearch - 根据子字段值对父文档进行排序/评分
Types Description: parent type 1)Parent Type: "product" 2)childType : "ratings" 问题描述:我有一个es查询(q
使用数据转储进行 Freebase 评分
如果您使用 Freebase 搜索按名称获取任何实体的匹配项，您将获得按 relevance score 排序的结果.例如尝试 Taj Mahal . 我正在尝试使用 Freebase 数据转储获得类
mysql - 如何根据排序顺序百分位数进行分类/评分
我试图根据多个不同的标准给不同的城市打从 1 到 5 的“分数”，最终将分数相加并决定哪个城市最好。表“international_tobacco_alcohol”包含居民用于酒精和烟草的收入百分比
多个索引的 Elasticsearch 评分
我有一年中任何一个季度的索引(“index-2015.1”，“index-2015.2”...) 我在每个索引上有大约 3000 万个文档。文档有一个文本字段('title') 我的文档排序方式是(
algorithm - 非线性比较排序/评分
我有一个数组，我想根据为数组中的每个元素分配一个分数来排序。假设可能的分数范围是 0-100。为了获得该分数，我们将使用 2 个比较数据点，一个权重为 75，一个权重为 25。我们称它们为 valu
regex - 根据歧义对正则表达式进行“评分”
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this qu
dynamic - 如何做随机数的星星？ (评分)
做一排星星作为评级是微不足道的，但我不确定做随机数的正确 flutter 方法是什么？换句话说，假设我的评分最多为 5 颗星，我该怎么做，只有一颗或两颗星？我可以有一个 switch 语句，并返回带
.net - 评分/评级引擎 - 建议和示例？
我需要创建一个灵活的(最好是动态的)评分引擎，就像信用评分或保费计算系统一样。有创建评分引擎实践经验的人有任何建议、示例或建议模式吗？我已经知道: Rete Algorithm FICO The o
sorting - ElasticSearch 深度嵌套排序/评分
我的索引中有以下类型的文档，但由于深度嵌套方面，找不到正确排序的方法。文档示例: { "metadatas": [{ "name": "name", "timeValidity"
elasticsearch - Lucene 自定义相似度/评分
我正在寻找 Lucene (Java) 中的相似性模块，它给出基于权重的分数。我知道这很模糊，最好用一个例子来解释。 Document 1 ----------- Firstname: Frances
java - Lucene 8 评分
我对 Lucene 8 比较陌生，想了解如何将旧版 Solr 4 评分迁移到 Lucene。这就是 Solr 4 目前的做法。 /* * From the SolrRelevan
Lucene:完全禁用加权，评分，排名，
我正在使用 Lucene 来构建标记共现的大型索引(例如 [elephant,animal]、[melon,fruit]、[宝马，汽车]，...)。我使用 BooleanQuery 查询索引以获取绝对
Android 评分 baar 无法正确显示
Ratingbar 星未正确显示。我不知道我做错了什么。当我使用自定义样式时，只显示一颗星，它的长度等于 5 星。风格是: @drawable/manual_ratingbar
java - Jsoup imdb 评分
我编写了一个程序，它读取 imdb 上排名前 250 的电影的名称和评分，并返回评分的平均值。我有以下程序 import java.io.IOException; import org.jsoup.*
Elasticsearch:使用 Ngrams 评分
我有一个直截了当的问题，我将 ngram 用于部分匹配。实现效果很好，但得分结果并不像我希望的那样有效。我希望我的分数结果看起来像这样: 柯:.1 Kev:.2 凯维:.3 凯文:.4 相反，我得到以
MySQL 评分/投票系统(根据票数按最佳评分准确排序)
假设我有一个像这样的 MySQL 表: 软件表: id int name text votes int rating int 其中投票是某人为该项目投票的次数，评分是这些投票的平均值。示例数据: i
java - Lucene EdgeNGramTokenFilter 评分
我在索引期间使用过滤器 EdgeNGramTokenFilter。当我寻找一个词时。当 Lucene 找到完整单词或另一个单词的一部分时，它的评分不会产生差异。例如，如果我正在查找单词 PUB。我
java - ElasticSearch 排名 - 评分
我们正在使用 java 并使用 elasticsearch java api 开发一个应用程序。我们对元数据建立了索引，并希望在索引时或搜索时使用排名/评分。而且，我不知道是否可以对用户单击结果时选
comparison - lucene vs solr 评分
有人可以解释(或引用引用资料)用更简单的词来比较 SOLR 和 LUCENE 使用的评分机制。它们有什么区别吗？我不太擅长 solr/lucene，但我的发现表明它们似乎不同。 P.S:我只是尝试

首页

博学

6Ren·AI

商城

java - 小星级评分的jsp页面

我的代码

我的代码