您现在的位置是：主页 > news > 衡阳市住建局官方网站/网上培训机构
衡阳市住建局官方网站/网上培训机构
admin2025/5/1 17:58:03【news】
简介衡阳市住建局官方网站,网上培训机构,wordpress封面,导航网站建站系统思路： 1、页面创建一个div、button、input 2、获取创建的元素 3、创建一个数组存放颜色 4、在button上监听点击事件 5、获取input中的字符串并转为数组 6、遍历数组 将数组的每个item赋值一个新的标签（带背景颜色 ） <style>div {width:…
衡阳市住建局官方网站,网上培训机构,wordpress封面,导航网站建站系统思路： 1、页面创建一个div、button、input 2、获取创建的元素 3、创建一个数组存放颜色 4、在button上监听点击事件 5、获取input中的字符串并转为数组 6、遍历数组 将数组的每个item赋值一个新的标签（带背景颜色 ） <style>div {width:…
思路：
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 = ""}
