先来看看效果图

实例代码

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title style # box { margin : 100px auto；宽度： 200像素；高度： 150像素；线高： 150像素；字母-间距： 10px文本对齐：中心；font-size : 30px字体粗细：更粗；border: 2px实心浅绿色；单词包装：断字；边界半径： 5px；相对位置：} # btn { position:绝对值左侧：50%;top :280 px }/style/head dydiv id=' box ' span 1/span span 2/span span span 3/span span 4/span/divinput type=' button ' id=' BTN ' value='我变了哟!'/script /提取标签var box=文档。getelementbyid(' box ')；var span=文档。getelementsbytagname(' span ')；var BTN=文档。getelementbyid(' BTN ')；var color=var str=' 0123456789 abcdefbtn。onclick=function(){ for(var I=0；ispan.lengthi ){//生成四位数for(var j=0；j6；j ){//随机改变每个数字的颜色颜色=字符串。substr(ParSeint(Math。random()* str。长度)，1)；//取颜色（循环，每次提取一位，进行拼接组成6为颜色的值)}我.innerHTML=parsent(数学。random()* 10)；//生成随机数跨度。风格。color=(' # ' color)；//随机改变每个跨度的颜色color=} }/脚本/正文/html以上就是这篇文章的全部内容，实现代码很简单，希望对大家能有一定的帮助，如果有问题可以留言交流，小编会尽快给大家回复的。