JS運動基礎

2022-09-23 10:27:11 字數 2818 閱讀 3815

讓div運動起來

運動中的bug:

1.不會停止

2.速度取某些值會無法停止

3.到達位置後在點選還會運動

4.重複點選速度加快

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

title

>document

title

>

<

style

>

#div1

style

>

<

script

>

window.onload

=function

() else

}, 10)}}

script

>

head

>

<

body

>

<

input

id="btn"

type

="button"

value

="開始運動"

>

<

div

id="div1"

>

div>

body

>

html

>

運動框架及應用

運動框架

1.在開始運動時,關閉已有定時器

2.把運動和停止隔開(if/else)

緩衝運動

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

title

>document

title

>

<

style

>

#div

style

>

<

script

>

window.onload

=function

() , 30)}}

script

>

head

>

<

body

>

<

input

id="btn"

type

="button"

value

="緩衝運動"

>

<

div

id="div"

>

div>

body

>

html

>

右側懸浮框

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

<

title

>document

title

>

<

style

>

#div

style

>

<

script

>

window.onscroll

=function

() ;

vartime

=null

;

function

startmove(itarget)

else

},30)

}script

>

head

>

<

body

style

="height: 2000px;"

>

<

div

id="div"

>

div>

body

>

html

>

js this

先上demo,在實際開發的時候,發現this的時候,就會心一斗,為了把這個this弄清楚,查了一些資料,用最簡單的一句話就是當前呼叫物件是w...

js this

作用域 瀏覽器給js的生存環境 棧記憶體 1 this是js的一個關鍵字,指定一個物件去代替它。 函式內的this指行為發生的主體,函式外的this指window沒有意義。 為什麼函式window 因為瀏覽器執行js 的時候在執行chifan 這個函式的時候查詢到變數chifan的歸屬是window,...

js js流程控制

1 表示式 語句 2 流程控制 順序 分支 迴圈 分支 迴圈結構都有一個條件 迴圈結構 重複做一件事 3元運算子 switch語句 用來做相等性判斷 優先考慮 注意 1 switch中的相等性判斷使用的是全等判斷 既要是值相等,同時型別也要相等 2 break是跳出switch判斷,switch中若...