<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0;margin:0;}
li{list-style:none;}
.left{float:left;padding:30px;width:400px;height:300px;border:1px solid #000;}
.center{float:left;margin:0 30px;}
.right{float:left;padding:30px;width:400px;height:300px;border:1px solid #000;}
a{display:block;margin-top:30px;width:30px;height:20px;background:red;}
li{float:left;margin:30px 0 0 10px;width:5px;height:5px;background:#666;border-radius:50%;}
</style>
</head>
<body>
<div>
<div class="left">
<p class="p1">携程旅行网是中国领先的在线旅行服务公司,向超过9000万会员提供酒店预订、酒店点评及特价酒店查询、机票预订、飞机票查询、时刻表、票价查询、航班查询、度假预订、商旅...</p>
<span class="sp1"></span>
</div>
<div class="center">
<a href="javascript:;" class="a1"></a>
<a href="javascript:;" class="a2"></a>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="right">
<p class="p2"></p>
<span class="sp2"></span>
</div>
</div>
<script>
var p1=document.getElementsByTagName('p')[0];
var p2=document.getElementsByTagName('p')[1];
var sp=document.getElementsByTagName('span')[0];
var sp2=document.getElementsByTagName('span')[1];
var a1=document.getElementsByTagName('a')[0];
var a2=document.getElementsByTagName('a')[1];
var li=document.getElementsByTagName('li');
var timer=null;
var num=0;
var leng=p1.innerHTML.length;
var leng2=p2.innerHTML.length;
a1.onclick = function () {
timer = setInterval(function () {
var len = p1.innerHTML.length;
var len2 = p2.innerHTML.length;
if (len <= 0) {
li[li.length-1].style.background='';
clearTimeout(timer);
}else{
for(var i=0;i<li.length;i++){
li[i].style.background='';
}
li[num].style.background='yellow';
num++;
num%=li.length;
}
console.log(leng);
p2.innerHTML += p1.innerHTML.charAt();
p1.innerHTML = p1.innerHTML.substring(1);
sp.innerHTML = len + '/' + leng;
sp2.innerHTML = len2;
},10);
};
sp.innerHTML=leng+'/'+leng;
sp2.innerHTML=leng2;
</script>
</body>
</html>