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

jsp - 能否将没有 .jsp 扩展名的文件呈现为 JSP？
是否可以让标准 Java EE servlet 容器将文件解释并呈现为 JSP，即使该文件没有 .jsp 扩展名？假设我的 WAR 根目录中有一个名为 foo.xyz 的文件。该文件包含一些 jST
jsp - 适合初级 JSP 开发人员的良好 JSP 框架
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
jsp - jsp taglib 与包含 jsp 页面的根本区别是什么？
我有几个通用元素(组件)，它们会生成一些 html。似乎我的选择是创建一个 taglib，或者只是将该逻辑放入一个 jsp 页面并包含 jsp。有什么不同？积极与消极？最佳答案 Taglibs 允
jsp - 从 JSP 页面调用另一个 JSP 页面
我是 Ejb-JSP 的新手，对它知之甚少。我已经创建了一个 JSP 页面，它调用 Controller Servlet，而 servlet 调用 EJB。结构就像 JSP -> Servlet ->
jsp - 如何制作使用其他 JSP 标记的自定义 JSP 标记？
我想编写一个自定义 JSP 标签，其输出包括其他 JSP 标签，这些标签本身也应该被动态评估。但显然我的一切TagSupport子类写入 pageContext.getOut()无需任何进一步评估，直
jsp - 在过滤器中执行和呈现 JSP
我有一个包含页面顶部内容的 JSP，我们称它为 header.jsp。出于性能原因，我想呈现此 JSP 并将其刷新给用户，然后再构建页面的其余部分。 (有关性能优势的解释，请参阅 here。) 我能想
jsp - 今天的日期 JSP
我发现自己在处理一些旧的 JSP，想做一些简单的事情，比如以 dd/mm/yyyy 格式显示今天的日期好像没那么简单，到目前为止，我已经导入了 java.util.* 我试过很多东西 String
jsp - JSP 标签的字符集
关于 JSP 标签字符集的简单问题。 mytag很简单。 tag文件位于 WEB-INF/tags .这个文件在 Eclipse 中的字符集是 UTF-8。出于某种原因，UTF-8 符号无法
jsp - JSP EL可以做直接属性访问吗
这让我很吃惊!我的 JSP 中有以下代码。在我重构 SlideShow 类并公开所有属性并删除 getter/setter 之前，这段代码一直有效。所以在我看来，EL 只适用于 getter 而不
jsp - JSP 多语言化自动化
现有的一组 JSP，用英文字段标签、javascript 错误/信息消息、图像“alt”消息等硬编码，需要多语言化。将这些 JSP 转换为使用标准 Java 多语言功能(资源包、语言环境等)的最佳方
jsp - JSP-Servlet应用程序的任何viewstate实现？
Closed. This question needs to be more focused。它当前不接受答案。想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题
jsp - 是否可以从命令行执行 JSP？
我已经在 Tomcat 6.0 下部署了我们的 War 到 Linux 服务器。在那个 Linux 机器上，我们没有打开浏览器的权限。是否可以从命令行执行 JSP？最佳答案您可以使用其中 wge
jsp - JSP 和自动刷新属性的最佳缓冲区大小
有没有人建议为 JSP 设置最佳缓冲区大小？您可以使用以下页面指令在 JSP 中设置缓冲区大小我的问题如下我的理解是，您使用的缓冲区大小越小，客户端浏览器的性能就越好。我的假设正确吗？如
jsp - 我如何指定我希望我的 jsp-config 指令应用于我们的应用程序中提供的所有 JSP 页面？
我们正在使用 JBoss 7.1.3.Final 和 Java 6。我想将 UTF-8 页面编码应用于我们网站上提供的所有 JSP 页面，因此我将其添加到我们的 web.xml 文件中
jsp - 动态包含 JSP
学过jsp native，想包含动态文件。我想使用 include 调用动态页面这段代码如果我输入 dashboard.jsp?p=about 页面打开“pages/a
JSP 链接到另一个 JSP
在我的 JSP 页面中，我希望链接转发到另一个 JSP 页面。当用户在 home.jsp 上时，我希望他们转到 login.jsp 等。我遇到的问题是无法找到 JSP，除非我将页面放在项目文件夹中(在
jsp - 在grails中使用index.jsp
我正在尝试在新的grails应用程序中使用index.jsp切换index.gsp。我将默认的index.gsp重命名为not_index.gsp，并添加了index.jsp。现在，我收到以下错误。
jsp - 从服务器端代码在新的浏览器选项卡中打开 JSP
是否可以从服务器端 jsf 代码将资源打开到新的浏览器选项卡(如命令按钮的 target="_newtab")？以下代码在同一选项卡中打开资源: FacesContext.getCurrentIns
jsp - .jsp 中的 JSP 语法和 XML 语法有什么不同？
我想问一个关于 .jsp 的问题。使用 jsp 语法(例如 )和 XML 语法(例如 ... )有什么不同。使用其中一种语法是否有维护或某种 advs？谢谢。最佳答案原始的语法更加紧凑，但如
jsp - JSP 的文件命名约定
JSP 文件是否有行业标准命名约定？我遇到过来自不同来源的三种约定: 全部小写 (thisismyfile.jsp) 首字母小写的驼峰式大小写 (thisIsMyFile.jsp) 首字母大写的驼峰

首页

博学

6Ren·AI

商城

java - 小星级评分的jsp页面

我的代码

我的代码