javascript - 如何根据用户的输入生成自定义图像?
问题描述
我正在为一个带有 HTML/CSS/JS 的网站做一个测验。测验中的每个问题都有几个可能的答案供您选择。完成测验后,您将获得 0-100% 的分数。
用户提交答案后,需要将用户重定向到另一个页面,该页面将显示他们的分数。
在这个页面上,我还需要用户看到一条线的图像,线的起点代表 0%,线的终点代表 100%。
箭头图像应指向代表其百分比分数的线条区域。这是一张图片。
所以,我的问题是:如何动态自定义箭头的位置以适应 0-100% 的任何可能分数?
我在这个网站上看到了一个非常相似的事情,它会根据你对一组政治问题的回答,然后给你一个定制的图像,并根据你的回答在图表上绘制一个点。任何帮助,将不胜感激。
解决方案
一个简单的方法应该是使用 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..
推荐阅读
- python - 将对象列表解包到单独的属性中
- marklogic - XSLT 输出中处理 V 形的明显错误
- css - 使缩略图垂直后,图像比 flex-viewport 更宽
- reactjs - 模块构建失败:UnhandledSchemeError:从“别名:/路径”读取不是由插件处理(未处理的方案)
- json - Dart 中如何生成自定义 json 数据?
- linux - 从终端输出中获取多行
- python - 检查整数是否在二等分列表中,列表对于内存来说太大了
- tensorflow - 在反向传播期间是否总是使用梯度下降来更新权重?
- xamarin.forms - Xamarin Froms 和 SkiaSharp,突出显示图像上的区域
- reactjs - React:如何使用功能性 usestate/useEffect 复制特定的组件类 setstate 回调示例?