JS實現簡單的鍵盤打字的效果

2024-05-06 16:18:36

字體：大中小

來源：轉載

供稿：網友

本文給大家分享的是使用javascript實現的簡單的鍵盤打字效果，十分的簡單實用，推薦給有需要的小伙伴參考下。

以代碼形式實現過程分析：

<html>

<head>

<title>打字效果</title>

<meta http-equiv="Content-Type" Content="text/html;charset=gb2312" />

<style type="text/css">

body{

font-size:14px;

font-color:#purple;

font-weight:bolder;

}

</style>

</head>

<body>

最新內容: <a id = "Hotnews" href="" target="_blank"> </a>

<script language="javascript">

var NewsTime = 2000; //每條信息完整出現后停留時間

var TextTime = 100; //每條信息中的字出現的間隔時間

var newsi = 0;

var txti = 0;

var txttimer; //調用setInterval的返回值，用于取消對函數的周期性執行

var newstimer;

var newstitle = new Array(); //以數組形式保存每個信息的標題

var newshref = new Array(); //以數組形式保存信息標題的鏈接

newstitle[0] = "歡迎來到我的博客"; //顯示在網頁上的文字內容和對應的鏈接

newshref[0] = "http://m.survivalescaperooms.com/guihailiuli/";

newstitle[1] = "http://m.survivalescaperooms.com/guihailiuli/";

newshref[1] = "http://m.survivalescaperooms.com/guihailiuli/";

newstitle[2] = "博客園歡迎你哦";

newshref[2] = "http://m.survivalescaperooms.com";

newstitle[3] = "ByeBye~~";

newshref[3] = "http://m.survivalescaperooms.com";

function shownew(){

hwnewstr=newstitle[newsi]; //通過newsi傳遞，依次顯示數組中的內容

newslink=newshref[newsi]; //依次顯示文字對應的鏈接

if(txti>=hwnewstr.length){

clearInterval(txttimer); //一旦超過要顯示的文字長度，清除對shownew()的周期性調用

clearInterval(newstimer);

newsi++; //顯示數組中的下一個

if(newsi>=newstitle.length){

newsi = 0; //當newsi大于信息標題的數量時，把newsi清零，重新從第一個顯示

}

newstimer = setInterval("shownew()",NewsTime); //間隔2000ms后重新調用shownew()

txti = 0;

return;

}

clearInterval(txttimer);

document.getElementById("Hotnews").href = newslink;

document.getElementById("Hotnews").innerHTML = hwnewstr.substring(0,txti+1); //截取字符，從第一個字符到txti+1個字符

txti++; //文字一個個出現

txttimer = setInterval("shownew()",TextTime);

}

shownew();

</script>

</body>

</html>