利用JS&CSS实现”逐字敲打程序代码“效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>default</title>

<script language="javascript">
 var Num_span=53;//span的数目
 var s=0;
 var count=0;
 var index=0;
 
 var length=new Array();
 var plus=new Array();
 
  function coding(){
	  
	  for(var i=1;i<=Num_span;i++){
		  length[i-1]=document.getElementById("s"+i+"_hiding").innerHTML.length;
		  }
		  
	  for(var i=0;i<Num_span;i++)
	   {
		   plus[i]=0;
		   for(var j=0;j<=i;j++) 
		    {plus[i]+=length[j];}
		   }
		   
	  s=setInterval(sub_Coding,65); //每隔150ms函数sub_Coding运行一次,直到用clearInterval(s)函数
	
	}
  

  function which_span(count){
	  
	  
	   if(count==plus[Num_span-1]) clearInterval(s);
	   
	  for(var i=0;i<Num_span-1;i++){
		   if(count==plus[i]) index=0;
		 
		   if(count>=plus[i]&&count<plus[i+1]){
			    return i+2;
			   }
			  
		 }
      return 1;  

    }

  function sub_Coding(){
	  var string;
	  string=document.getElementById("s"+which_span(count)+"_hiding").innerHTML;	 
	  document.getElementById("s"+which_span(count)).innerHTML+=string.charAt(index);
	 	  
	 index++;
	 count++;
	}//function sub_Coding()

</script>

</head>

<style type="text/css">

body{
  background: none repeat scroll 0 0 #FFFFEE;
  font-size: 12px;
  margin: 0;
  padding: 0;
	}

#code{
	margin-left:100px;
	margin-top:100px;
	color: #333333;
	font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";
	font-size: 12px;
	height:600px;
	}
.content{
	}
.comments{
	color:#3F7F5F;
	padding-left:15px;
	}
.keywords{
	color:#7F0055;
	font-weight:bold;
	}
.string{
	color:#2A36FF;
	}

#copyright{
	text-align:center;
	width:500px;
	color: #333333;
	float: left;
	font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";
	font-size: 12px;
	}
</style>

<body onLoad="coding()">


<embed src="凤凰花开的路口.mp3" autostart="true" loop="true" hidden="true">
<div id="code_hiding" style="display:none">

<span id="s1_hiding" class="comments">// As Mr_11 very care about Miss_11:30. he changed to sleep at 12:00 from that time</span><br/>
<span id="s2_hiding" >Sir Mr_12 = </span>
<span id="s3_hiding" class="keywords">new</span>
<span id="s4_hiding" > Sir(</span>
<span id="s5_hiding" class="string">"sleep at 12"</span>
<span id="s6_hiding">);</span><br/>

<span id="s7_hiding">Lady Miss_11:30 = </span>
<span id="s8_hiding" class="keywords">new</span>
<span id="s9_hiding" > Lady(</span>
<span id="s10_hiding" class="string">"sleep at 11:30"</span>
<span id="s11_hiding">);</span><br/>
<span id="s12_hiding" class="comments">//Miss_11:30 returned home at 11:00 regularly. when the wash finished, time was close to her sleep time.</span><br/>
<span id="s13_hiding" > Miss_11:30.wash(</span>
<span id="s14_hiding" class="string">"10min"</span>
<span id="s15_hiding">);</span><br/>
<span id="s16_hiding" class="comments">//Sometimes Miss_11:30 opened Wechat for a while if she felt happy and leisure.</span><br/>
<span id="s17_hiding" class="keywords">boolean </span>
<span id="s18_hiding" >isLeisure = </span>
<span id="s19_hiding" class="keywords">true</span>
<span id="s20_hiding" >;</span><br/>
<span id="s21_hiding" class="keywords">if</span>
<span id="s22_hiding" >(isLeisure) {</span><br/>
<span id="s23_hiding" class="comments">//She replied to Mr_12 out of politeness.this eternel politeness sometimes disappointed Mr_12.</span><br/>
<span id="s24_hiding" >Miss_11:30.open_Wechat(</span>
<span id="s25_hiding" class="string">"see what Mr_12 sent to her and reply"</span>
<span id="s26_hiding">);</span><br/>
<span id="s27_hiding">}</span><br/>
<span id="s28_hiding" class="comments">//Mr_12 was waiting for her from 10:00 p.m. He got more and more happy when time closed.</span><br/>
<span id="s29_hiding" class="keywords">boolean </span>
<span id="s30_hiding" >isMissed = </span>
<span id="s31_hiding" class="keywords">true</span>
<span id="s32_hiding">;</span><br/>
<span id="s33_hiding" class="keywords">while </span>
<span id="s34_hiding" >(isMissed){</span><br/>
<span id="s35_hiding" >Mr_12.waitFor(Miss_11:30);</span>
<span id="s36_hiding" >isMissed = Miss_11:30.reply();</span><br/>
<span id="s37_hiding" >}</span><br/>
<span id="s38_hiding" class="comments">//Time was flying when you desire to seize it.and now it was 11:30.</span><br/>
<span id="s39_hiding" >time.flying();</span><br/>
<span id="s40_hiding" class="keywords">if</span>
<span id="s41_hiding" >(time.</span>
<span id="s42_hiding" class="keywords">value</span>
<span id="s43_hiding" > = </span>
<span id="s44_hiding" class="string">"11:30"</span>
<span id="s45_hiding" > ) {</span><br/>
<span id="s46_hiding" >Mr_12.say(</span>
<span id="s47_hiding" class="string">"sweet dream"</span>
<span id="s48_hiding" >);</span><br/>
<span id="s49_hiding" >Miss_11:30.sleep(</span>
<span id="s50_hiding" class="string">"feel better after chating"</span>
<span id="s51_hiding" >);</span><br/>
<span id="s52_hiding" >}</span><br/>
<span id="s53_hiding" class="comments">//Sometimes,when Miss_11:30 had no reply for several days, Mr_12 became a little sad and felt something go wrong.</span><br/>
</div>

<div id="code">

<span id="s1" class="comments"></span><br/>
<span id="s2"></span>
<span id="s3" class="keywords"></span>
<span id="s4"></span>
<span id="s5" class="string"></span>
<span id="s6"></span><br/>
<span id="s7"></span>
<span id="s8" class="keywords"></span>
<span id="s9"></span>
<span id="s10" class="string"></span>
<span id="s11"></span><br/>
<span id="s12" class="comments"></span><br/>
<span id="s13" ></span>
<span id="s14" class="string"></span>
<span id="s15"></span><br/>
<span id="s16" class="comments"></span><br/>
<span id="s17" class="keywords"></span>
<span id="s18" ></span>
<span id="s19" class="keywords"></span>
<span id="s20" ></span><br/>
<span id="s21" class="keywords"></span>
<span id="s22" ></span><br/>
<span id="s23" class="comments"></span><br/>
<span id="s24" ></span>
<span id="s25" class="string"></span>
<span id="s26"></span><br/>
<span id="s27"></span><br/>
<span id="s28" class="comments"></span><br/>
<span id="s29" class="keywords"></span>
<span id="s30" ></span>
<span id="s31" class="keywords"></span>
<span id="s32"></span><br/>
<span id="s33" class="keywords"></span>
<span id="s34" ></span><br/>
<span id="s35" ></span><br/>
<span id="s36" ></span><br/>
<span id="s37" ></span><br/>
<span id="s38" class="comments"></span><br/>
<span id="s39" ></span><br/>
<span id="s40" class="keywords"></span>
<span id="s41" ></span>
<span id="s42" class="keywords"></span>
<span id="s43" >  </span>
<span id="s44" class="string"></span>
<span id="s45" ></span><br/>
<span id="s46" ></span>
<span id="s47" class="string"></span>
<span id="s48" ></span><br/>
<span id="s49" ></span>
<span id="s50" class="string"></span>
<span id="s51" ></span><br/>
<span id="s52" ></span><br/>
<span id="s53" class="comments"></span><br/>
</div>


</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值