JS實現的手寫書信效果

2022-09-10 19:33:10 字數 1758 閱讀 2329

重點:

一:兩個標籤,乙個letter_src用於存放將逐一顯示的文件內容(本身內容不顯示),另乙個letter將通過innerhtml顯示letter_src中的內容。(這樣的設計很巧妙!)

三:乙個css3新屬性:background-size.屬性值cover,contain,auto的不同運用。

四:事件window.onload(),網頁在一開啟就會執行js

五:最重要的函式dostep()的建立和呼叫.settimeout(dostep, idelay)函式的運用其實用到了高階語言程式設計裡的遞迴思想。文件內容是乙個字元乙個字元的加進innerhtml中的,但每個字元的處理方式都是一樣,只是會有不同的情況,dostep()函式其實就是乙個處理文件字元並將其顯示的函式。

六:字元的幾種情況:

1.正常字元 直接schars += schar;

2.模擬錯誤情況,用"|"表示寫錯的字元

3.內建標籤起始符"<"

4.內建特殊字元起始符"&"

5.句截至符號"."

6.分號","

7.最最重要的單詞截至符——空格" "

七:icurink的巧妙使用(實現的單詞顏色改變)

八:inkwell2.gif的隱藏和顯示

主函式dostep()**:

1 window.onload = function

()33

34else

if(schar == "|") //

遇到錯誤單詞

3540

else

if(schar == "<") //

轉行41

46else

if(schar == "&") //

html 特殊字元

4752

else

if(schar == ".")

5356

else

if(schar == ",")

5760

else

if(ichar > 5)

6164

65if(schar == " ") //

剛寫完乙個單詞

6670

if(document.getelementbyid("inkwell2").style.visibility == "visible")

7176

77if(icurink > 160) //

設定計數值,重新蘸取墨汁

7884

85 schars +=schar;

8687

if(ichar == stext.length - 1)

8891

92 vletter.innerhtml = schars +scurcaret;

9394 ichar++;

9596

if(ichar 97100 } //

dostop()函式

101 dostep(); //

必須先呼叫函式

102 };

canvas畫布實現手寫簽名效果

最近專案中涉及到移動端手寫簽名的功能需求,將實現 記錄於此,供小夥伴們參考指摘哦 html class msign signmark box class msign signmark write box id msign signmark signature pad class msign sign...

JS手寫instanceof實現方式

使用方式 function car color const cc new car red console.log cc instanceof car 重點是分為基本資料型別和引用資料型別判斷 引用資料型別中,需要判斷物件 child 的原型鏈是否相等 param child 例項化物件 param ...

js實現換膚效果

基本原理很簡單,就是使用 js 切換對應的 css 樣式表檔案。例如導航 hao123 的右上方就有網頁換膚功能。除了切換 css 樣式表檔案之外,通常的網頁換膚還需要通過 cookie 來記錄使用者之前更換過的 這樣下次使用者訪問的時候,就可以自動使用上次使用者配置的選項。那麼基本工作流程就出來了...