<div id="code">
  <p>/**</p>
  <p>*2014-2-12</p>
  <p>*代碼自動閃爍輸入</p>
  <p>*/</p>
  2014-2-14,I want to say:<br />
  Baby, I love you forever!<br />
</div>

js部分

function typewriter(id){
  var $ele = document.getElementById(id);
  var str = $ele.innerHTML, progress = 0;
  $ele.innerHTML = '';
  var timer = setInterval(function() {
    var current = str.substr(progress, 1);
    if (current == '<') {
      progress = str.indexOf('>', progress) + 1;
    } else {
      progress++;
    }
    $ele.innerHTML =str.substring(0, progress) + (progress & 1 ? '_' : '');
    if (progress >= str.length) {
      clearInterval(timer);
    }
  }, 75);
}

使用方法：

typewriter("code");

弄成個jquery插件

(function($) {
  $.fn.typewriter = function() {
    var $ele = $(this), str = $ele.html(), progress = 0;
    $ele.html('');
    var timer = setInterval(function() {
      var current = str.substr(progress, 1);
      if (current == '<') {
        progress = str.indexOf('>', progress) + 1;
      } else {
        progress++;
      }
      $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
      if (progress >= str.length) {
        clearInterval(timer);
      }
    }, 75);
  };
})(jQuery);

使用方法：

$("#code").typewriter();

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中json操作技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript擴(kuò)展技巧總結(jié)》、《JavaScript運(yùn)動效果與技巧匯總》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》及《javascript面向?qū)ο笕腴T教程》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)以最簡單的方式將數(shù)組元素添加到對象中的方法
下面小編就為大家分享一篇js實(shí)現(xiàn)以最簡單的方式將數(shù)組元素添加到對象中的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
JavaScript異步編程操作實(shí)現(xiàn)介紹
異步（Asynchronous, async）是與同步（Synchronous, sync）相對的概念。在我們學(xué)習(xí)的傳統(tǒng)單線程編程中，程序的運(yùn)行是同步的，同步不意味著所有步驟同時運(yùn)行，而是指步驟在一個控制流序列中按順序執(zhí)行，而異步的概念則是不保證同步的概念
2022-09-09
bootstrap改變按鈕加載狀態(tài)
這篇文章主要介紹了bootstrap改變按鈕加載狀態(tài)的方法,需要的朋友可以參考下
2014-12-12
JavaScript實(shí)現(xiàn)區(qū)塊鏈
很多朋友都聽說過比特幣和以太幣這樣的加密貨幣，但是只有極少數(shù)人懂得隱藏在它們背后的技術(shù)，接下來通過本文給大家介紹用JavaScript來創(chuàng)建一個簡單的區(qū)塊鏈來演示它們的內(nèi)部究竟是如何工作的，感興趣的朋友一起看看吧
2018-03-03
JavaScript之Map和Set_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript之Map和Set的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
最好用的省市二級聯(lián)動原生js實(shí)現(xiàn)你值得擁有
省市二級聯(lián)動效果，實(shí)現(xiàn)方法有很多，不過其他文章中介紹的都比較籠統(tǒng)，在本文有一個詳細(xì)的實(shí)現(xiàn)過程，使用原生js很容易理解，希望大家可以參考下
2013-09-09
JavaScript中字符串的常用方法總結(jié)
這篇文章主要為大家總結(jié)了一些JavaScript中字符串的常用方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下
2022-12-12
webpack.DefinePlugin與cross-env區(qū)別詳解
這篇文章主要介紹了webpack.DefinePlugin與cross-env區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
JavaScript與DropDownList 區(qū)別分析
大家都知道，.NET中一些Web服務(wù)器控件解析并編譯，最終被渲染的時候，其實(shí)是轉(zhuǎn)化成了普通的html控件。
2010-01-01
Javascript基礎(chǔ)之?dāng)?shù)組的使用
這篇文章主要介紹了Javascript基礎(chǔ)之?dāng)?shù)組的使用的相關(guān)資料，介紹的非常詳解，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05