js 打字机效果

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ChineseDictionary.WebForm1" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 8     <title></title>
 9     <script src="Scripts/jquery-2.1.4.min.js"></script>
10    <script type="text/javascript">
11        var it = 0;
12        var mytext;
13        function initialize() {
14            mytext = $("#typing").text();
15            var myheight = $("#typing").offsetHeight;
16            $("#typing").text("");
17            $("#typing").css("height", myheight);
18            $("#typing").show();
19            typeit();
20        }
21        var t;
22        function typeit() {
23            $("#typing").append(mytext.charAt(it));
24            if (it < mytext.length - 1) {
25                it++
26                t = setTimeout("typeit()", 100);
27            }
28            else
29                clearTimeout(t);
30        }
31 
32        //function typeit(_this){
33        //    var $ele = $("#typing"), str = $ele.html(), progress = 0;
34        //    $ele.html('');
35        //    var timer = setInterval(function() {
36        //        var current = str.substr(progress, 1);
37        //        if (current == '<') {
38        //            progress = str.indexOf('>', progress) + 1;
39        //        } else {
40        //            progress++;
41        //        }
42        //        //下面是在模拟光标              
43        //        $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
44        //        if (progress >= str.length) {
45        //            clearInterval(timer);
46        //        }
47        //    }, 75);
48        $(document).ready(function () {
49            initialize();
50        });
51     </script>
52 </head>
53 <body>
54     <form id="form1" runat="server">
55     <div>
56     <p id="typing" style=" display:none" >
57 InsertAdjacentHTML 方法是比 innerHTML、outerHTML 属性更灵活的插入 HTML 代码的方法。它可以实现在一个 DOM 元素的前面、后面、第一个子元素前面、最后一个子元素后面四个位置,插入指定的 HTML 代码。不是 W3C 标准的 DOM 方法。
58 这个方法最初是由 IE4.0 以上版本实现,为私有特性。详细内容请参见 MSDN 说明:insertAdjacentHTML Method。
59 W3C 近期在 HTML5 草案中扩展了这个方法,更多详细的信息,请参见 W3C HTML5 草案:3.5.7 insertAdjacentHTML()。
60 </p>
61     </div>
62     </form>
63 </body>
64 </html>

 

你可能感兴趣的:(js 打字机效果)