穆年小菜鳥的日常隨記 JS計時器功能

2021-10-21 20:38:28 字數 3140 閱讀 1011

功能介紹——計時器功能

檔案位置:/public/static/js/timeset.js
實現方式

方法使用

使用示例

賦值的元素	 class="

" id

="timeset"

role

="button"

data-open

="#"

>

00:00:00a

>

觸發開始的按鈕 class

="cardbtn timeset"

data-id

="1"

data-modal="

" data-title

="開始"

>

開始a>

觸發暫停的按鈕 class

="cardbtn timeclear"

data-modal="

" data-title

="暫停"

>

暫停a>

獲取引數
**

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

**//獲取快取引數根據自身需求獲取

var proceed_time = localstorage.

getitem

('proceed_time'

)var second = localstorage.

getitem

('second'

)var order_id = localstorage.

getitem

('order_id')**

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

****

**//計時器開始**

console.

log(

"1.計時器開始執行");

var second =0,

s=0;

if(localstorage.

getitem

('order_id'))

//獲取計時器邏輯方法(傳參s為秒數的初始值,當快取存在時取快取的值,快取沒有時傳0即可)

function

timeset()

;//不滿兩位數時前面補0

if(minite<10)

;//不滿兩位數時前面補0

if(second<10)

;//不滿兩位數時前面補0$(

'#timeset').

html

(hour+

":"+minite+

":"+second)

;//獲得的時間賦值到計時器容器

localstorage.

setitem

('second'

,s);

//快取功能進行的時間秒數

localstorage.

setitem

('proceed_time'

,hour+

":"+minite+

":"+second)

;//快取功能進行的時間秒數

}function

timeclear()

//固定class【timeset】觸發計時器$(

'.timeset').

click

(function()

})//監聽頁面重新整理動作

$(window).on

('beforeunload'

,function()

);

應用過程**現的問題:

1.發現動態繫結了click事件並有時候會失效,將原來的動態繫結

$

('.timeset').

click

(function()

})

改為:

$

(document).on

('click'

,'.timeset'

,function()

})

注:如果是多個子頁面引入到乙個父頁面當中,此類名可能查詢不到,所以直接給乙個父級,採用未來式的查詢事件即可

JS中的計時器

js計時器中this指標指向window 函式名 time 多長時間執行一次 value 傳入引數 1.1建立計時器 可以不用變數接收方法一 var timer setinterval function 1000 方法二 var timer function setinterval timer,10...

js的兩種計時器

js中的計時器有兩種,分別是setinterval和settimeout 按照指定的週期 以毫秒計 來呼叫函式或計算表示式 var interval setinterval function 3000 單位毫秒,1000毫秒 1秒 var button document.getelementbyid...

初學JS 實現基於計時器的小遊戲。

這幾天一直在看網易雲課堂上免費的js課程,正好今天看到講了計時器setinterval,第一感覺就是像c 裡的timer。然後課程裡舉得例子正好通過計時器改變新生成視窗的位置,然後就突然有了靈感!可以寫乙個 抓住我 的小遊戲。因為剛學js 懂的實在很少,所以就通過自己已經學過的內容實現了,主要原理是...