Home > Developer > Web Develop
A very simple Web page effect: JS let the text appear on the page keyboard typing effect realization
Demo Address: Http://codepen.io/guihailiuli/pen/jPOYMZ
Implement process analysis in code form:
<HTML><Head><title>Typing effect</title><Metahttp-equiv= "Content-type"Content= "text/html;charset=gb2312" /><styletype= "Text/css">Body{font-size:14px;Font-color:#purple;Font-weight:Bolder;}</style></Head><Body>Latest content:<aID= "Hotnews"href=""Target= "_blank"> </a> <Scriptlanguage= "JavaScript"> varNewstime= -; //dwell time after each piece of information is fully present varTexttime= -; //The interval between the occurrences of words in each message varNewsi= 0; varTxti= 0; varTxttimer; //call the return value of SetInterval to cancel the periodic execution of the function varNewstimer; varNewstitle= NewArray (); //Save the title of each information as an array varNewshref= NewArray (); //to save a link to an information title as an arraynewstitle[0] = "Welcome to my blog"; //text content and corresponding links displayed on a Web pagenewshref[0] = "http://www.cnblogs.com/guihailiuli/"; newstitle[1] = "http://www.cnblogs.com/guihailiuli/"; newshref[1] = "http://www.cnblogs.com/guihailiuli/"; newstitle[2] = "Welcome to the Blog Park!"; newshref[2] = "http://www.cnblogs.com"; newstitle[3] = "byebye~~"; newshref[3] = "http://www.cnblogs.com"; functionshownew () {hwnewstr=NEWSTITLE[NEWSI]; //by passing NEWSI, the contents of the array are displayed in turnNewslink=NEWSHREF[NEWSI]; //Show the link of the text in turn if(Txti>=hwnewstr.length) {clearinterval (Txttimer); //clears the periodic call to Shownew () once the length of text to be displayed is exceededclearinterval (Newstimer); Newsi++; //displays the next in the array if(Newsi>=newstitle.length) {Newsi= 0; //when the NEWSI is greater than the number of information headers, the NEWSI is zeroed out and displayed again from the first} newstimer=SetInterval ("shownew ()", Newstime); //re-call Shownew () after 2000ms intervalTxti= 0; return; } clearinterval (Txttimer); document.getElementById ("Hotnews"). href=Newslink; document.getElementById ("Hotnews"). InnerHTML=hwnewstr.substring (0, Txti+1); //intercepts characters, from the first character to txti+1 charactersTxti++; //text appearsTxttimer=SetInterval ("shownew ()", Texttime); } shownew ();</Script></Body></HTML>
JS let text appear on the page keyboard typing effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
