js能通过数组实现字逐行显示并且每行字体大小不一样颜色不一样吗？已经做到颜色和字体逐行显示

js能通过数组实现字逐行显示并且每行字体大小不一样颜色不一样吗？已经做到颜色和字体逐行显示了但是每行字体大小不一样做不到了求解答！！！

为什么没有效果？
原因是font 标签中的 size 最大值为7，且不支持设置px属性，只需填入单纯数值就行了。
再说了，html中已经不赞成使用font size，因为有局限性，建议采用style形式设置效果。

把字体的数组
zz=["20px","40px","60px","80px"];
改成以下即可
zz=["2","4","6","7"];

如果你想设置更多大小效果，建议改成style内联方式
zz数组不变
zz=["20px","40px","60px","80px"];
然后
document.getElementById('p1').innerHTML+=""+xs[i]+" ";
则修改如下
document.getElementById('p1').innerHTML+=""+xs[i]+" ";

font标签版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="p1"></p>
</body>
    <script>
        var xs=["123","456","789","666"];
        var zz=["2","4","6","7"];
        var cc=["red","blue","pink","green"];
        i=0;
        function wz(){
           document.getElementById('p1').innerHTML+="<font color="+cc[i]+" size="+zz[i]+">"+xs[i]+"</font><br>";
            // document.getElementById('p1').style.fontSize=zz[i];
            i++;
            if(i>xs.length){
            i=0;
            document.getElementById('p1').innerHTML="";
            }
           setTimeout("wz()",500);
        }
		wz();
    </script>
</html>

style版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="p1"></p>
</body>
    <script>
        var xs=["123","456","789","666"];
        var zz=["20px","40px","60px","80px"];
        var cc=["red","blue","pink","green"];
        i=0;
        function wz(){
           document.getElementById('p1').innerHTML+="<span style='color:"+cc[i]+";font-size:"+zz[i]+";'>"+xs[i]+"</span><br>";
            // document.getElementById('p1').style.fontSize=zz[i];
            i++;
            if(i>xs.length){
            i=0;
            document.getElementById('p1').innerHTML="";
            }
           setTimeout("wz()",500);
        }
		wz();
    </script>
</html>

答案满意记得采纳，谢谢

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>测试</title>
    </head>
    <body>
<div id="aaa">
</div>
    </body>
	<script>
var s = ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7', '测试8', '测试9', '测试10', '测试11', '测试12', '测试13', '测试14', '测试15', '测试16', '测试17'];

var str = '';

for(var i=0;i<s.length;i++){

str+="<span style='color:RGB"+rgb()+";font-size:"+getSize()+"px;'>"+s[i]+"</span>";

document.getElementById("aaa").innerHTML = str+="</br>";

}
function rgb(){
	//rgb颜色随机
			var r = Math.floor(Math.random()*256);
			var g = Math.floor(Math.random()*256);
			var b = Math.floor(Math.random()*256);
			var rgb = '('+r+','+g+','+b+')';
			return rgb;
		}
function getSize(){
	//随机字体大小
    return Math.floor(Math.random() * (30 - 10) + 10);
}
	</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        xs=["123","456","789","666"];
        zz=["20px","40px","60px","80px"];
        cc=["red","blue","pink","green"];
        i=0;
        function wz(){
           document.getElementById('p1').innerHTML+="<font color="+cc[i]+" size="+zz[i]+">"+xs[i]+"</font><br>";
            // p1.style.fontSize=zz[i];
            i++;
            if(i>xs.length){
            i=0;
            p1.innerHTML="";
            }
           setTimeout("wz()",500);
        }
    </script>
</head>
<body onload="wz()">
    <p id="p1"></p>
</body>
</html>

现在这个逐行文字显示和颜色已经有了，但是这个字体每行大小不一样我定义的数组是没办法这样用吗？字体现在也有效果，不过不是从20px开始的，直接都最大了。

js能通过数组实现 字逐行显示 并且每行字体大小不一样 颜色不一样吗？ 已经做到颜色 和字体逐行显示

js能通过数组实现字逐行显示并且每行字体大小不一样颜色不一样吗？已经做到颜色和字体逐行显示