效果图:
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
font-size: 35px;
}
</style>
</head>
<script src="./jquery-1.11.3/jquery.min.js"></script>
<body>
<span>J</span>
<span>a</span>
<span>v</span>
<span>a</span>
<span>s</span>
<span>c</span>
<span>r</span>
<span>i</span>
<span>p</span>
<span>t</span>
</body>
<script>
//获取span对象
var span = document.querySelectorAll('span');
// console.log(span);
var i =0;
setInterval(function () {
//遍历文字
for(var j=0;j<span.length;j++){
span[j].style.fontSize='35px';
span[j].style.color='black';
}
span[i].style.color='red';
span[i].style.fontSize='50px';
i++;
if(i>9){
i=0;
}
}, 100);
</script>
</html>
