废话不多说,直接上代码
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="text"></div>
<div><input type="button" value="打字" onclick="typing()"></input></div>
</body>
<script>
var str = '用js实现彩色打字效果';
var i = 0;
var txt = document.getElementById("text");
var color = ["#D0021B", "#417505", "#9013FE", "#002EFA", "#417505", "#9013FE", "#8b572a", "#002EFA", "#BD10E0", "#ff5a00", "#3FA536", "#B92281"];
function typing() {
if(i < str.length){
var txt1 = document.createElement("span");
txt1.style.color = color[Math.round(Math.random()*12)];
txt.appendChild(txt1);
txt1.innerHTML += str[i];
setTimeout(typing.bind(this),200,i++);
}
}
</script>
</html>