Question

我尝试制作一个您输入文字的程序，然后键入您想要查看文本的次数。然后font-size每行增加10％。到目前为止，这是我的代码：

function addElement()
{
var text = document.getElementById("text").value;
var ggr = document.getElementById("ggr").value*1;
var output= "";
for(var i=0; i < ggr; i++)
{
    output += "<div " + "style=\"font-size: 10%"+i+"\" " + " >" + text  + "</div>" + "<br />";
}
document.getElementById("result").innerHTML = output;
}

<h2>Write your text here</h2>
<input type="text" id="text" value="" /> </br>
<h2>How many times do you want to see it?</h2>
<input type="text" id="ggr" value="" /> </br>
<input type="button" value="Resultat" onClick="addElement();"/></br>
<div id="result"/>

如何在每行增加10％的字体大小？

Answer 1

您的代码会写10%0，10%1，10%2，等等。

更改此行：

    output += "<div " + "style=\"font-size: "+((i+1)*10)+"%\" " + " >" + text  + "</div>" + "<br />";

这将从10％开始，每行增长10％（10%，20%，30%，...）。

Answer 2

+运算符将[i]变量添加为字符串，您需要它作为数字，这是保持操作不受字符串限制的最佳选择。

var font_start_size= 100;// Value of first size
    for(var i=0; i < ggr; i++)
    {
        var size = (10 * i) + font_start_size; 
        output += "<div style='font-size: "+size+"%'>" + text  + "</div>" + "<br />";
    }

修复之后的

代码：

function addElement()
{
var text = document.getElementById("text").value;
var ggr = document.getElementById("ggr").value*1;
var output= "";
for(var i=0; i < ggr; i++)
{
	var font_start_size= 100;// Value of first size
	var size = (10 * i) + font_start_size; 
    output += "<div style='font-size: "+size+"%'>" + text  + "</div>" + "<br />";
}
document.getElementById("result").innerHTML = output;
}

<h2>Write your text here</h2>
<input type="text" id="text" value="" /> </br>
<h2>How many times do you want to see it?</h2>
<input type="number" id="ggr" value="" /> </br>
<input type="button" value="Resultat" onClick="addElement();"/></br>
<div id="result"/>

增加字体大小

2 个答案: