Question

I am newbie in PHP, we are designing a simple quiz game in PHP.

我试图在PHP中绘制一个水平进度条。这就像一个长度为矩形（10 * 1）并分为十个相等大小的部分（1 * 1）。测验将有十个问题，因此块将填充灰色最初，当用户回答问题时，它将变为绿色或红色，具体取决于是否正确。

我找不到可以做到这一点的开源库。我应该使用PHP GD吗？并画出来？或者PLZ。建议我任何图书馆寻找

提前致谢。

KARTHIK

Answer 1

您可以使用嵌套的跨距和div轻松完成此操作。这是一个例子（未经测试，但应该给出正确的想法）10个问题（应该很容易适应或多或少的问题或使其动态）：

风格：

#outer {
    background-color: grey;
    width: 100px;
    height: 10px;
}

.inner {
    width: 10px;
    height: 10px;
    display:block;
    float:left;
}

.inner.right {
    background-color: green;
}

.inner.wrong {
    background-color: red;
}

然后你必须相应地生成跨度：

<div id="outer">
<?php foreach($i=0;$i<10;$i++): ?>
    <span class="inner <?php echo (isAnswered($i)) ? 
                                     ((isAnswerRight($i)) ? 'right' : 'wrong') :
                                      ''; ?>"></span>
<?php endforeach; ?>
</div>

更新： Example 生成的栏的外观如何。

Answer 2

我会以相反的方式陈述问题，如果你需要一个进度条，寻找在css中实现的进度条控件，你会发现很多。你也可以从html中绘制10个div，使用css像矩形框一样设置，而不是在已完成的带有php的盒子中添加一个类来改变它们的颜色。

Answer 3

只需设置绿色/红色/灰色图像的宽度。

10宽绿色，10宽红色和80灰色（10％绿色，10％红色，80％灰色/待办事项）

通过一些数学运算，你可以改变你想要的大小......

Answer 4

GD会有点矫枉过正，但可以肯定的是，如果你想学习它。

我建议使用内置灰色，绿色或红色图像的10x1表格。

的问候，

/吨

PHP中的进度条形图

4 个答案: