先来看看效果图
实例代码
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <tite> </title> <style> #box {margin: 100px auto; Ширина: 200px; Высота: 150px; высота линии: 150px; СКАЖИ САМЕТ: 10px; Текст-альбом: Центр; размер шрифта: 30px; шрифт-вес: смелее; Граница: 2px сплошная бледная; Word-wrap: слов-слова; граница-радий: 5px ;; позиция: относительно; } #btn {position: Absolute; Слева: 50%; Верх: 280px; } </style> </head> <body> <div id = "box"> <pan> 1 </span> <pan> 2 </span> <pan> 3 </span> <pan> 4 </span> </div> <input type = "button" id = "btn" value = "我变了哟！"/> <script> // 提取标签 var box = document.getelementbyid ("box"); var span = document.getElementsbytagname ("span"); var btn = document.getElementById ("btn"); var color = ""; var str = "0123456789abcdef"; btn.onclick = function () {for (var i = 0; i <span.length; i ++) {// 生成四位数 for (var j = 0; j <6; j ++) {// 随机改变每个数字的颜色 color+= str.substr (parseint (math.random ()*str.length), 1); // 取颜色 ， 每次提取一位 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成 进行拼接组成span [i] .innerhtml = parseint (math.random ()*10); // 生成随机数 span [i] .style.color = ("#"+color); // 随机改变每个 span 的颜色 color = "" "; }} </script> </body> </html>以上就是这篇文章的全部内容 ， 实现代码很简单 希望对大家能有一定的帮助 ， 如果有问题可以留言交流 ， 小编会尽快给大家回复的。