Dszmz 2021-04-23 10:13 采纳率: 100%
浏览 99
已结题

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

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

3条回答 默认 最新

  • wanmeikakaxi 2021-04-23 22:22
    关注

    为什么没有效果？
    原因是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+="<font color="+cc[i]+" size="+zz[i]+">"+xs[i]+"</font><br>";
    则修改如下
    document.getElementById('p1').innerHTML+="<span style='color:"+cc[i]+";font-size:"+zz[i]+";'>"+xs[i]+"</span><br>";

     

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 11月26日

悬赏问题

  • ¥15 微信小程序协议怎么写
  • ¥15 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题，求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看