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>