先来看看效果图
实例代码
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> #box {margem: 100px auto; Largura: 200px; Altura: 150px; altura da linha: 150px; Espacamento de cartas: 10px; Alinhamento de texto: centro; tamanho da fonte: 30px; Peso da fonte: mais ousado; borda: 2px Solid Palegreen; Word-wrap: Break-Word; Radio de fronteira: 5px ;; Posição: relativa; } #btn {Position: Absolute; Esquerda: 50%; TOP: 280px; } </style> </head> <body> <div id = "box"> <pan> 1 </span> </span> 2 </span> <pan> 3 </span> </span> 4 </span> </div> <input type = "button" iD = "btn" value = "我变了哟！"/> <) // // 提取标签 varox "gnement = " 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 ++) {// 生成四位数 para (var j = 0; j <6; j ++) {// 随机改变每个数字的颜色 cor+= str.substr (parseint (math.random ()*str.Length), 1); 进行拼接组成 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环 循环) span [i] .innerhtml = parseint (math.random ()*10); // 生成随机数 span [i] .style.color = ("#"+cor); // 随机改变每个 span 的颜色 color = ""; }} </script> </body> </html>以上就是这篇文章的全部内容 ， 实现代码很简单 ， 希望对大家能有一定的帮助 ， 如果有问题可以留言交流 ， 小编会尽快给大家回复的。