js實現按鈕加減,長按按鈕數字一直可變

2021-09-24 17:54:38 字數 2766 閱讀 1395

今天工作過程中遇到乙個小問題,即實現按鈕加減,單擊資料+/-1,長按時會按時間來每秒+/-1。實現後如圖所示:

按鈕顯示**如下:

="input-group" style=

"width:146px;margin-left: 130px;"

>

="input-group-btn"

>

="btn" id=

"num-jian" style=

"width:25px;border:1px solid #9e9e9e;margin-right:3px;color:#9e9e9e;background-color: #fff;" type=

"button"

>—<

/button>

//減號按鈕

<

/span>

"text" id=

"input-num"

class

="form-control" style=

"width:35px;border:0px solid #fff;font-size:16px;color:#3366ff;text-align: center;" placeholder=

"設定" value=

"1">

//數字顯示

="input-group-btn"

>

="btn " id=

"num-jia" style=

"width:25px;border:1px solid #3366ff;color:#3366ff;background-color: #fff;margin-left:3px;" type=

"button"

>

+<

/button>

//加號按鈕

<

/span>

<

/div>網上很多資料都只提供了單擊事件,而對於長按按鈕數字變化都無介紹,部分資料介紹為非js,以下對兩種作出說明。

一、僅單擊事件按鈕加減**:

var num_jia = document.

getelementbyid

("num-jia");

var num_jian = document.

getelementbyid

("num-jian");

var input_num = document.

getelementbyid

("input-num");

//加號單擊事件

num_jia.

onclick

=function()

else

}//減號單擊事件

num_jian.

onclick

=function()

else

}二、單擊+長按事件

長按時涉及mousedown、mouseup事件,mouseup時不允許執行單擊事件。

此問題我給予了乙個變數i,當按下按鈕時間每多過1秒,數字增加的同時,i++,證明是長按事件,藉以i==0判斷是否需要執行單擊事件。

var num_jia = document.
getelementbyid

("num-jia");

//加號

var num_jian = document.

getelementbyid

("num-jian");

//減號

var input_num = document.

getelementbyid

("input-num");

//數字顯示

//加號按鈕事件--滑鼠按下

num_jia.

onmousedown

=function()

,1000);

if(i ==0)

}function

add(

)else

} num_jia.

onmouseup

=function()

//減號按鈕事件(內容基本同上,不予注釋)

num_jian.

onmousedown

=function()

,1000);

//1000即1秒

if(i ==0)

}function

minus()

else

} num_jian.

onmouseup

=function()

其中涉及乙個小知識:

js 定時器有以下兩個方法:

setinterval():按照指定的週期(以毫秒計)來呼叫函式或計算表示式。方法會不停地呼叫函式,直到 clearinterval() 被呼叫或視窗被關閉。

settimeout():在指定的毫秒數後呼叫函式或計算表示式。使用 cleartimeout() 或視窗關閉清除。

setinterval(code,millisec):code可以直接用引號"執行的**/方法()"或如上**所示;millisec:週期性執行或呼叫 code 之間的時間間隔,以毫秒計。

通過js簡單實現按鈕控制数字加減

簡單的實現通過按鈕簡單控制数字的加減,直接上 首先就是先html box button id btn value text id num value button id btn2 value div 我們先定義三個input,然後後面用js來控制這個三個元素來進行功能上的實現 上js的 段 var ...

Unity長按按鈕的實現

通過派生button類以及實現 ipointerdownhandler,ipointeruphandler介面,我們只需要在按鈕按下時新增乙個長按開關,和乙個計時器,長按到達指定時間進行持續觸發即可 using system.collections using system.collections....

長按按鈕讓EditText中的數字遞增

private boolean ontouched false override public boolean ontouch view v,motionevent event else break case r.id.iv minus if event.getaction motionevent....