JS实现彩虹字

最新推荐文章于 2025-06-05 14:57:34 发布

静颍流年

最新推荐文章于 2025-06-05 14:57:34 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签：用JS实现彩虹字

本文链接：https://blog.youkuaiyun.com/weixin_43571052/article/details/89073502

效果图

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>
    <style id="css"></style>
</head>
<body>
    <input type="text"/>
    <button>转换</button>
    <p></p>
    <script>
         var arr = ["red","orange","yellow","green","blue","purple","pink"];
        var oIp = document.getElementsByTagName("input")[0];
        var Btn = document.getElementsByTagName("button")[0];
        var oP = document.getElementsByTagName("p")[0];
        var oStyle = document.getElementById("css");
        Btn.onclick = function(){
            var str = oIp.value;
            oP.innerHTML = "<span>"+str.split("").join("</span><span>")+"</span>";
        }
        for(i=0;i<arr.length;i++){
            oStyle.innerHTML += "p span:nth-child(7n+"+(i+1)+"){color:"+arr[i]+";}";
        }
        </script>
</body>
</html>

知识点

1. String.split()方法：把一个字符串分割成字符串数组。

参数一：必需，字符串或正则表达式，从该参数指定的地方分割stringObject。

参数二：可选，该参数可指定返回数组的最大长度；不设置，默认分割整个字符串。

字符中存在 . 和 | 的时候，不能直接分隔，而是String.split("\\.")或者String.split("\\ | ")，用转义符。

2. 用JS写入css代码，具体看代码。