练习-彩虹字

最新推荐文章于 2022-08-27 10:10:18 发布

奋斗中的切图猿

最新推荐文章于 2022-08-27 10:10:18 发布

阅读量162

点赞数

分类专栏： js练习题文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44573096/article/details/106724514

版权

js练习题专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!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>
    <style>
    textarea,p{
        margin:0;
        width:300px;
        height:200px;
        border:1px black solid;
    }
    </style>
</head>
<body>
    <textarea></textarea>
    <br>
    <button>转换</button>
    <p></p>
    <!-- 方法：给p里的每个文字套一个span -->
    <!-- <p><span>1</span><span>2</span><span>3</span></p> -->
    <script>
    var arr=["red","orange","yellow","green","cyan","blue","purple"]
    var oTe=document.querySelector("textarea");
    var oBtn=document.querySelector("button");
    var oP=document.querySelector("p");
    var oSty=document.querySelector("style");
    oBtn.onclick=function(){
        oP.innerHTML = "<span>" +oTe.value.split("").join("</span><span>")+"</span>";
    }
    for(var i=0;i<arr.length;i++){
        // span元素是7个一轮，第8个span里字的颜色和第一个span的颜色相同，所以7n+1的span字体颜色就相同
        // n=0进行一次循环；n=1进行一次循环……直到把所有的span循环完
        // oSty.innerHTML+="span:nth-child(7n+"+(i+1)+"){color:"+arr[i]+"}";
        // 换成模板字符串方法：将上面是字符串拼接的地方换成$即可
        oSty.innerHTML+=`span:nth-child(7n+${i+1}){color:${arr[i]}}`;
    }
    </script>
</body>
</html>