博客列表 >JS-文字跑马灯特效

JS-文字跑马灯特效

梁凯达的博客
梁凯达的博客原创
2019年03月04日 11:34:093482浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<font id="show" color="blue" size="6"></font>
</body>
<script>
var show = document.getElementById('show');
var str = '今天也是3月1号也就是说一九年已经过去两个月了';
//将字符串添加标签的函数
function pick(i,str){
	tmp = str.substr(0,i);
	tmp +='<font color="red" size="7">'+str[i]+'</font>';
	tmp += str.substr(i+1);
	//alert(tmp);
	return tmp;
}
	var num = 0;
	setInterval(function(){
		if(num >=str.length){
			num = 0;
		}
		show.innerHTML =pick(num,str);
		num++;
	},300)
</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议