我正在用HTML / CSS / JS进行网站测验。测验中的每个问题都有一些可能的答案可供您选择。完成测验后,您会得到0-100%的分数。
用户提交答案后,需要将用户重定向到另一个页面,该页面将显示其分数。
在此页面上,我还需要用户查看行的图像,行的开头表示0%,行的结尾表示100%。
箭头图像应指向代表百分比分数的线区域。这是的图片。
所以,我的问题是:如何动态自定义箭头的位置以适合0-100%之间的任何可能分数?
我在this网站上看到了一件非常相似的事情,该网站将您对一系列政治问题的答案,然后为您提供定制的图像,并根据您的答案在图形上绘制一个点。任何帮助将不胜感激。
答案 0 :(得分:0)
一种简单的方法应该是使用html和css显示结果。
我在其中一个项目中使用的代码如下:
<div id="mainDiv">
<div id="resultArea" style="width:80%;">
<div style='font-size:50px;display: inline-block; width: 30%; text-align: right;'>↧</div>
<div id="resultPercentage" style="padding: 10px 0; border: 1px solid #cccccc; background: #cccccc;">
<span style="float: left; margin-top: 10px;">0</span>
<span style="float: right;margin-top: 10px;">100</span>
</div>
</div>
<p> </p>
</div>
请注意,在ID为“ userPercentage”的div中,最后一个样式“ width:30%”会将Unicode箭头符号从0移到100。
答案 1 :(得分:-1)
HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
**HTML:**
<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
**CSS**
label {
display: block;
font: 1rem 'Fira Sans', sans-serif;
}
input,
label {
margin: .4rem 0;
}
.note {
font-size: .8em;
}