Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> slider adjust typing speed effect </title> < Meta http-equiv= "Content-type" content= "text/html;charset=gb2312" > <!--Add the following code to <pead> and </pead> Between--> <style type= "text/css" > *{color: #999;} body{border:0px; margin:0px; Overflow:hidden; Background-color:transparent; Font-family: Song body; } #con {float:left; width:620px; height:400px; Overflow-y:auto; Background-color: #000; Filter:alpha (opacity=80); opacity:0.8; } #opt {float:left; width:230px; height:150px; Background-color: #333; Filter:alpha (opacity=80); opacity:0.8; Text-align:center; } fieldset{margin:10px; border:1px solid #999; padding:0px 10px 10px; Text-align:left; } legend{font-size:12px; *margin-left:-7px; Color: #999; } label{font-size:12px; Color: #999; } #spdbdr {float:left; Clear:left; Width:185px; height:15px; Overflow:hidden; border:1px solid #999; } #hand {width:50%; height:15px; Overflow:hidden; Background-color: #666; } #comment {float:left; width:230px; height:250px; Background-color: #555; Filter:alpha (opacity=80); opacity:0.8; } #fd2 {padding-bottom:5px; *padding-bottom:10px; } #probdr {float:left; Clear:both; width:185px; height:15px; Overflow:hidden; border:1px solid #999; } #pro {width:0px; height:15px; Overflow:hidden; Background-color: #666; } h5{margin:0px; margin-left:10px; margin-top:10px; } #ar {margin:40px; Text-align:center; } #date {font-size:14px; Font-weight:bold; Text-align:left; } #sep {width:100%; height:1px; Overflow:hidden; Background-color: #999; } #heart {margin-left:20px; Font-weight:normal; font-size:12px; Text-align:left; } h3{font-size:14px; Text-align:center; margin:20px Auto; } p{margin:10px Auto 0px; font-size:14px; Line-height:1.5em; Text-indent:2em; Text-align:left; } </style> <script language= "JavaScript" > function id (obj) {return document.getElementById (obj);} var speed; Window.onload=function () {Speed=parseint (1-id ("Hand"). Offsetwidth/id ("Spdbdr"). offsetwidth) *300); ID ("SPDBDR"). Onmousedown=function (e) {if (!e) e=e| | window.event; var x= (E.pagex) E.pagex:e.clientx; ID ("Hand"). style.width=x-642; Speed=parseint (1-id ("Hand"). Offsetwidth/id ("Spdbdr"). offsetwidth); } art=id ("Ar"). InnerHTML; ID ("AR"). Innerhtml=b; Show (); var art; var b= "<b>|</b>"; var i=0; var p; var mm= ""; Function Show () {if (i<art.length) {w=art.substr (i,1); mm+= (w== "<")? M=art.substr (I,art.substr (i) indexOf (">") +1): W; p= (w== "<") Art.substr (i) indexOf (">") +1:1; ID ("AR"). Innerhtml=mm+b; ID ("Pro"). Style.width= (i*100/art.length) + "%";//progress bar if (ID ("AutoScroll"). Checked) {ID ("con"). Scrolltop=id ("con"). Scrollheight-id ("con"). clientheight; } i+=p; Window.settimeout ("Show ();", speed); }else{ID ("ar"). Innerhtml=art; } </script> </pead> <body> <!--Add the following code between <body> and </body>--> <div id= "Con" > & Lt;div id= "Ar" > <div id= "Date" >aug. 15<sup>th</sup><span id= "Heart" > (mood: quite good) </span ></div> <div id= "Sep" ></div> <p> China Web first stop </p> <p> page, web design, Web page, Web page, Web-page learning, website teaching, Photoshop,flash,html,css,dreamweaver,fireworks,asp,php,jsp,asp.net, website building, website development, web effects, graphic design, personal sites, web footage. </p> </div> </div> <div id= "opt" > <fieldset> <legend> console </legend> <inpu T id= "AutoScroll" type= "checkbox" Checked><label for= "AutoScroll" > Automatic scrolling </label> <label > Animation speed ( Click Adjust) </label> <div id= "spdbdr" ><div id= "Hand" ></div></div> </fieldset> < FieldSet id= "FD2" > <legend> progress </legend> <div id= "probdr" ><div id= "Pro" ></div></ div> </fieldset> </div> <div id= "comment" > <p> log commentsOn </p> </div> </body> </ptml>
Tip: You can modify some of the code before running
