首頁 > web前端 > js教程 > JS實現簡單的鍵盤打字的效果_javascript技巧

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

WBOY
發布: 2016-05-16 16:02:40
原創
1121 人瀏覽過

以程式碼形式實現流程分析:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

<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://www.jb51.net/guihailiuli/";

   

  newstitle[1] = "http://www.jb51.net/guihailiuli/";

  newshref[1] = "http://www.jb51.net/guihailiuli/";

   

  newstitle[2] = "博客园欢迎你哦";

  newshref[2] = "http://www.jb51.net";

   

  newstitle[3] = "ByeBye~~";

  newshref[3] = "http://www.jb51.net";

   

  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>

登入後複製

以上所述就是本文的全部內容了,希望能夠給大家學習javascript有些幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板