效果:每个字逐个显示出来,并且每个字都有随机颜色
$(函数(){
var str="早起的鸟儿有虫吃,早起的虫儿被鸟吃了!由此天赋+勤奋=成功,先天不足+同等勤奋=还是失败!天赋的重要性可见一斑!”;//产生一个0 - 255的随机整数
函数s () {
返回方法((math . random () * 255) + 1);
};
var j=1,我=0;
var p=" ";//打开一个每100个毫秒执行一次的定时器
var k=setInterval(函数(){
如果(j<=str.length) {//从第一个字开始截取,通过定时器循环遍历字符串的每一个字
var n=str.substring (i, j);
+ +;
我+ +;//为单个字添加样式
var html=' & lt;跨度比' + n + & lt;/span>;//字符串累加
p=p + html;//html()设置元素中的html内容
$ (" .mybox ") . html (p);
其他}{//遍历完成关闭定时器
clearInterval (k);
}
},100);
});
& lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>颜色打字机& lt;/title>
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/css1.css " rel=巴獠縩ofollow”/比;
& lt;脚本src=" https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js "祝辞& lt;/script>
& lt; script>
$(函数(){
var str="早起的鸟儿有虫吃,早起的虫儿被鸟吃了!由此天赋+勤奋=成功,先天不足+同等勤奋=还是失败!天赋的重要性可见一斑!”;//产生一个0 - 255的随机整数
函数s () {
返回方法((math . random () * 255) + 1);
};
var j=1,我=0;
var p=" ";//打开一个每100个毫秒执行一次的定时器
var k=setInterval(函数(){
如果(j<=str.length) {//从第一个字开始截取,通过定时器循环遍历字符串的每一个字
var n=str.substring (i, j);
+ +;
我+ +;//为单个字添加样式
var html=' & lt;跨度比' + n + & lt;/span>;//字符串累加
p=p + html;//html()设置元素中的html内容
$ (" .mybox ") . html (p);
其他}{//遍历完成关闭定时器
clearInterval (k);
}
},100);
}）;
& lt;/script>
& lt;/head>
& lt; body>
& lt; div类=癿ybox”比;
& lt;/div>
& lt;/body>
& lt;/html>
,整个HTML源代码
@charset“utf - 8”;/* */CSS文档
.mybox {
身高:200 px;
边界:5 px固体# ddd;
字体大小:25 px;
}
,需要用的CSS样式
到此这篇关于jQuery实现颜色打字机的完整代码的文章就介绍到这了,更多相关jQuery颜色打字机内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
