Question

我正在研究一个工作正常的计算器脚本。（得到它形成一个教程）。现在我希望按钮是图像。例如1.jpg 2.jpg等。

我希望你们可以帮助我。亲切的问候， Jorick

＆＃13;

<html>
<form name="calculator">
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
 
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>Solution is <input type="textfield" name="ans" value="">
</form>
</html>

＆＃13;

Answer 1

您可以简单地使用image作为表单元素的输入类型。我觉得这对你有用。：）

Answer 2

您应该使用<img src="image.jpg">标记，例如：

<html>
    <form name="calculator">
        <img src="1.jpg" onClick="document.calculator.ans.value+='1'">
        <img src="2.jpg" onClick="document.calculator.ans.value+='2'">
        <img src="3.jpg" onClick="document.calculator.ans.value+='3'">
        <img src="4.jpg" onClick="document.calculator.ans.value+='4'">
        <img src="5.jpg" onClick="document.calculator.ans.value+='5'">
        <img src="6.jpg" onClick="document.calculator.ans.value+='6'">
        <img src="7.jpg" onClick="document.calculator.ans.value+='7'">
        <img src="8.jpg" onClick="document.calculator.ans.value+='8'">
        <img src="9.jpg" onClick="document.calculator.ans.value+='9'">
        <img src="minus.jpg" onClick="document.calculator.ans.value+='-'">
        <img src="plus.jpg" onClick="document.calculator.ans.value+='+'">
        <img src="mult.jpg" onClick="document.calculator.ans.value+='*'">
        <img src="div.jpg" onClick="document.calculator.ans.value+='/'">
        <img src="0.jpg" onClick="document.calculator.ans.value+='0'">
        <input type="reset" value="Reset">
        <input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
        <br>Solution is <input type="textfield" name="ans" value="">
    </form>
</html>

请注意，这假设您的图片与.html文件位于同一文件夹中。如果它们位于子文件夹中，例如“图像”，则可以<img src="images/image.jpg">。

Answer 3

If you use the <button> tag instead of <input type="button" you can just do this:

<button>
<img src="example.jpg" />
</button>

Moshiach now!

Answer 4

如果您想使用该代码并且只想将图像添加到按钮，则可以使用CSS：

// Create an item
item i;
i.Description = "english";
i.Quantity = 1;
i.Wholesalescost = 100;
i.Retailcost = 200;
i.Dateadded = 3/8/2018;

// The vector is empty, size() == 0    
// Add it to the vector
Inv.push_back(i);
// Now the vector has 1 item, size() == 1

// Now you can print it
cout << Inv.at(0).Description << endl;
cout << Inv.at(0).Quantity << endl;
cout << Inv.at(0).Wholesalescost << endl;
cout << Inv.at(0).Retailcost << endl;
cout << Inv.at(0).Dateadded << endl;

您可以在此处阅读有关CSS伪类的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

此外，也许这个旧的问题（和答案）将有所帮助：

How to add background image for input type="button"?

html input with background image

顺便说一句 - 我认为你应该编写自己的计算器脚本 - 这是必须的......

祝你好运！

使用图像作为按钮

4 个答案: