效果图
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代码，具体看代码。
