顺序/随机颜色

最新推荐文章于 2021-06-07 13:45:38 发布

alo_ne

最新推荐文章于 2021-06-07 13:45:38 发布

阅读量194

点赞数

分类专栏： js-案例

本文链接：https://blog.csdn.net/alo_ne/article/details/106517792

版权

js-案例专栏收录该内容

25 篇文章 0 订阅

订阅专栏

思路：
1、页面创建一个div、button、input
2、获取创建的元素
3、创建一个数组存放颜色
4、在button上监听点击事件
5、获取input中的字符串并转为数组
6、遍历数组将数组的每个item赋值一个新的标签（带背景颜色）

    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px gray solid;
            padding: 10px;
        }

        div span {
            display: inline-block;
            margin: 5px;
            padding: 5px;
            color: #fff;
            border: 1px gray solid;
        }
    </style>


<body>
    <div></div>
    <input type="text">
    <button>提交</button>
    <script>
        var mydiv = document.querySelector("div")
        var myinput = document.querySelector("input")
        var btn = document.querySelector("button")
        var arr = ["red", "blue", "green", "orange", "pink"];
        btn.onclick = function () {
            var str = myinput.value.split('')
            for (let i = 0; i < str.length; i++) {
                str[i] = `<span  style= "background-color:${arr[i % arr.length]}">${str[i]}</span>`
            }
            mydiv.innerHTML += str.join('')
            myinput.value = ""
        }
    </script>
</body>

颜色随机只是在顺序的基础上创建一个随机数即可
css代码同上

<script>
   var mydiv = document.querySelector("div")
   var myinput = document.querySelector("input")
   var btn = document.querySelector("button")
   var arr = ["red","blue","green","orange","pink"];
   btn.onclick = function(){
    var txt = myinput.value.split("");//分成数组 
    for (let i = 0; i < txt.length; i++) {
        var num = Math.floor(Math.random()*5);
    txt[i] = `<span style= "background-color:${arr[num]}">${txt[i]}</span>`
    }
 mydiv.innerHTML +=txt.join("")
myinput.value = ""
   }