1. 程式人生 > >html+javascript實現文字的打字機效果

html+javascript實現文字的打字機效果

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>標題頁</title>
 <script language=javascript>
var layers =document.layers;
var style=document.all;
var both=layers||style;
var idme=908601;
if(layers)
{ layerRef='document.layers';styleRef ='';}
if(style)
{ layerRef='document.all';styleRef = '.style';}
//開始引數的定義
function writeOnText(obj,str)
{
if(layers)with(document[obj])
{ document.open();document.write(str);document.close();}
if(style)eval(obj+'.innerHTML=str');  
}
var dispStr=new Array("證監會稱將嚴查利用內幕資訊牟取不當利益行為!"); //要出現的文字
var overMe=0;
//逐字顯示的方法
function txtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd)
{
var mystr='',strchar='';
var skip=200;
if (both && idx<=str.length) {
if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;}
if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;}
mystr = str.slice(0,idx);   //返回陣列從開始到指定位置的字串
strchar = str.charAt(idx++);//當前地址的字元
if (overMe==0 && plysnd==1)
{
//針對瀏覽器的不同,呼叫不同的顯示方法
if (navigator.plugins[0]){
if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled())
{document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100);}
} else if (document.all){
ding.Stop();
setTimeout("ding.Run()",100);}
overMe=1;}else overMe=0;
writeOnText(objId, "<span class="+objStyle+"><font color='"+color1+"'>"+mystr+"</font><font color='"+color2
+"'>"+strchar+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+objId+"', '"+objStyle+"', '"+color1+"', '"+color2+"', "+delay+" ,"+plysnd+")",delay);}}
function init()
{txtTyper(dispStr[0], 0, 'div1', 'style1', '#66CCBB', '#000000', 400, 0);}
</script>
<BODY onload=init()>
<DIV class=style1 id=div1></DIV>
</BODY>
</html>

相關推薦

html+javascript實現文字打字機效果

<html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>標題頁</title>  <script language=javascript> va

HTML 實現文字滾動效果(跑馬燈)

語法: <marquee>...</marquee> 說明: 在 marquee 標記之間新增要進行滾動的內容 重要屬性: 1.滾動方向direction(包括4個值:up、 down、 left和 right) <marquee dire

文字打字機效果,可換字體樣式

back cnblogs time rand 是個 child 好日子 blog var <div id="text">你好,歡迎光臨,今天是個好日子!</div> <script> $(function() {

javascript實現彈層效果

end 彈層 css樣式 posit .com nload script 代碼 ner 首先,需要有一個按鈕來模擬登錄: <button id="btnLogin"class="login-btn">登錄</button> 然後呢,我們想通過點

jQuery實現打字機效果

indexof pos 元素 == ctype string 打字 int jquer 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5

html css實現文字水平垂直居中顯示

這幾天在工作中遇到了一個小問題:文字內容怎麼能在div裡水平垂直居中顯示呢?同時群裡的小夥伴恰巧也有提問這個問題的,所以我就總結了一下我知道的方法。 一、利用行高(line-height)和vertical-align配合實現 具體做法如下: html: <div clas

原生javascript實現分頁效果+搜尋功能

一、概述 首先,我們要明確為何需要分頁技術,主要原因有以下:   1、分頁可以提高客戶體驗度,適當地選擇合適的資料條數,讓頁面顯得更有條理,使得使用者體驗感良好,避免過多資料的冗餘。   2、提高效能的需要。 為何需要搜尋技術,主要原因有以下: 1、搜尋功能,能準確的根據使用

Javascript實現回到頂部效果

經常看到網頁中有回到頂部的效果,今天也研究一下回到頂部有哪些方法。眾所周知,用錨鏈接是實現回到最簡單的方法,但是從使用者體驗效果來說,並不是最好的。(錨鏈接回到頂部時太快了,而且使用者可能在看到某個感興趣的東西想停下來,卻停不下來),針對上面的缺點,我們試著用Javascript的方法來得到實現。思路是這個樣

android:TextView實現文字走馬燈效果(欺騙系統獲取持久的焦點)

通常情況下我們想實現文字的走馬燈效果需要在xml檔案中這樣設定 <TextView android:layout_width="wrap_content"

android實現文字漸變效果和歌詞進度的效果

要用TextView使用漸變色,那我們就必須要了解LinearGradient(線性漸變)的用法。 LinearGradient的引數解釋 LinearGradient也稱作線性渲染,LinearGradient的作用是實現某一區域內顏色的線性漸變效果,

JavaScript實現點贊效果

1:通過自定義封裝函式來獲取標籤元素;2:建立閉包來實現資料緩衝的效果3:迴圈遍歷按鈕,設定點選事件本文重點:瞭解閉包的作用,通過閉包可以實現資料的緩衝,即外層函式與裡層函式之間的語句在呼叫外層函式時只會執行一次示例程式碼<!DOCTYPE html> <h

android採用SurfaceView實現文字滾動效果

package com.ghyf.mplay.view; import java.util.ArrayList; import java.util.ListIterator; import com.ghyf.mplay.datatype.AlignMode; import com.ghyf.mplay.d

Html+javascript實現一個簡單的計算器,可繼續計算

先展示出計算器的大致樣子 <body> <div id="main"> <table frame="box" rules="all"> <tr> <td colspan="5" ><input

JavaScript實現下雪(Snow)效果

程式碼1:<title>Happy New Year</title><body bgcolor="#ff3300" leftmargin="0" topmargin="0" onLoad="snow()" AAAD98><scrip

CSS3實現文字3D效果

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="sty

js+jQuery實現網頁打字機效果(帶游標)

在寫網站的時候,有時候可能需要打字機動畫去實現一些頁面效果的顯示,我在網上找了很久也沒有很完整的,符合我要求的程式碼,索性就結合網上的大神們的程式碼段自己寫了一個 HTML <div clas

利用Html+JavaScript實現簡單購物車

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shopping Car</title> <scr

javascript實現圖片放大鏡效果

當我們在電商網站上購買商品時,經常會看到這樣一種效果,當我們把滑鼠放到我們瀏覽的商品圖片上時,會出現類似放大鏡一樣的一定區域的放大效果,方便消費者觀察商品。今天我對這一技術,進行簡單實現,實現圖片放大鏡效果。 我在程式碼中進行了程式碼編寫的思路的說明和詳細的程

javascript實現省市級聯效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

HTML+JavaScript實現選項卡功能

選項卡,聽上去看上去都不太高大上。實際上呢,確實不高大上。但這玩意又是網站開發中必備的一個元素,這要不會的話,一個好的網站就有些困難了。說白了,這個無非就是通過js讓button和div之間發生關係,