js鍵盤實例講解,js鍵盤實例講解教程

本文目錄一覽:

用js怎麼寫一個回車鍵盤事件

一、設計思路:設計一個簡單的輸入對話框,然後按下enter進行輸入事件。

二、聊天輸入框的代碼如下:

三、此時的頁面展示如下:

四:設計函數,使得輸入文字時,按下按鈕可以提交到聊天框。

五、此時在頁面上測試,輸入一段文字:

六、執行結果如下:

七、設計函數,使得按下enter跟按鈕同樣的功能:

八、刷新頁面,測試:

js實現可鍵盤控制的簡單抽獎程序

本文實例為大家分享了js抽獎程序的編寫代碼,以及編寫注意事項,感興趣的小夥伴們可以參考一下

代碼:

!DOCTYPE

html

html

lang=”en”

head

meta

charset=”UTF-8″

title簡單抽獎(可用鍵盤)/title

style

*{margin:0;padding:0;}

.box{width:

400px;height:

300px;margin:50px

auto;background:

red}

.title{color:

#fff;font-size:

30px;font-weight:700px;padding:

50px

0;text-align:

center;height:40px;}

.btm{text-align:

center;padding:20px

0;}

.btm

a{display:

inline-block;width:

120px;height:60px;line-height:

60px;background:

#FEF097;margin:0

10px;text-decoration:

none;}

/style

script

var

data=[‘Iphone’,’Ipad’,’筆記本’,’相機’,’謝謝參與’,’充值卡’,’購物券’],

timer=null,//定時器

flag=0;//阻止多次回車

window.onload=function(){

var

play=document.getElementById(‘play’),

stop=document.getElementById(‘stop’);

//

開始抽獎

play.onclick=playFun;

stop.onclick=stopFun;

//

鍵盤事件

document.onkeyup=function(event){

event

=

event

||

window.event;

//

回車鍵的code值:13

if(event.keyCode==13){

if(flag==0){

playFun();

flag=1;

}else{

stopFun();

flag=0;

}

}

}

function

playFun(){

var

title=document.getElementById(‘title’);

var

play=document.getElementById(‘play’);

clearInterval(timer);

timer=setInterval(function(){

var

random=Math.floor(Math.random()*data.length);

title.innerHTML=data[random];

},60);

play.style.background=’#999′;

}

function

stopFun(){

clearInterval(timer);

var

play=document.getElementById(‘play’);

play.style.background=’#FEF097′;

}

}

/script

/head

body

div

class=”box”

div

class=”title”

id=”title”淘家趣抽獎/div

div

class=”btm”

a

href=”javascript:;”

id=”play”開始/a

a

href=”javascript:;”

id=”stop”停止/a

/div

/div

/body

/html

注意點:

1.隨機數,取數組的其中一個;取0-n之間:Math.random()*(n+1)

2.定時器,開始抽獎時要停止前面的一次抽獎,不然會定時器重疊

3.按鍵操作,要判斷是抽獎進行中,還是未開始,所有設置了變數

flag

想要學習更多關於javascript抽獎功能,請參考此專題:javascript實現抽獎功能

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

javascript代碼實現鍵盤控制方向

通過創建一個event.keyCode對象,有獲取鍵盤上的方向鍵,運行代碼後,點擊鍵盤上的任意方向鍵。代碼如下:

html

head

title取得鍵盤的方向鍵/title

script language=”javascript”

!–

function showkey(){

key = event.keyCode;

if (key == 37) alert(“按了←鍵!”);

if (key == 38) alert(“按了↑鍵!”);

if (key == 39) alert(“按了→鍵!”);

if (key == 40) alert(“按了↓鍵!”);

}

document.onkeydown=showkey;

/script

/head

body

請按方向鍵←↑→↓

/body

/htmlbr /center如不能顯示效果,按Ctrl+F5刷新。

js鍵盤事件的使用

onkeydown = function(event){

if(event.keyCode == 13)

{

alert(‘你按了回車鍵’);//不同的鍵有不同的值,你可以查找相關的鍵盤代碼表

}

}

如何用js輸出鍵盤按鍵?

input type=”button” name=”btn” value=”點擊101″

onclick=” cal(prompt(‘請輸入第一個鍵盤按鍵字母:’),prompt(‘請輸入第二個鍵盤按鍵字母:’)) ” /

script type=”text/javascript”

function cal(num01,num02){

/*var num11 = parseInt(num01);

var num22 = parseInt(num02);*/

alert(num01);

alert(num02);

}

/script

js如何才能模擬鍵盤按鍵?

這個不能把,我要是能的話不斷模擬用戶點擊 alt+F4,那網頁還能打開嗎有安全漏洞的東西,瀏覽器一般不會允許

原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/312761.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2025-01-06 15:17
下一篇 2025-01-06 15:17

相關推薦

  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性,它可以代理一個數組,監聽數據變化並進行攔截、處理。在實際開發中,使用Proxy(array)可以方便地實現數據的監…

    編程 2025-04-29
  • MQTT使用教程

    MQTT是一種輕量級的消息傳輸協議,適用於物聯網領域中的設備與雲端、設備與設備之間的數據傳輸。本文將介紹使用MQTT實現設備與雲端數據傳輸的方法和注意事項。 一、準備工作 在使用M…

    編程 2025-04-29
  • Python3.6.5下載安裝教程

    Python是一種面向對象、解釋型計算機程序語言。它是一門動態語言,因為它不會對程序員提前聲明變數類型,而是在變數第一次賦值時自動識別該變數的類型。 Python3.6.5是Pyt…

    編程 2025-04-29
  • Deepin系統分區設置教程

    本教程將會詳細介紹Deepin系統如何進行分區設置,分享多種方式讓您了解如何規劃您的硬碟。 一、分區的基本知識 在進行Deepin系統分區設置之前,我們需要了解一些基本分區概念。 …

    編程 2025-04-29
  • Python生成隨機數的應用和實例

    本文將向您介紹如何使用Python生成50個60到100之間的隨機數,並將列舉使用隨機數的幾個實際應用場景。 一、生成隨機數的代碼示例 import random # 生成50個6…

    編程 2025-04-29
  • 寫代碼新手教程

    本文將從語言選擇、學習方法、編碼規範以及常見問題解答等多個方面,為編程新手提供實用、簡明的教程。 一、語言選擇 作為編程新手,選擇一門編程語言是很關鍵的一步。以下是幾個有代表性的編…

    編程 2025-04-29
  • Qt雷達探測教程

    本文主要介紹如何使用Qt開發雷達探測程序,並展示一個簡單的雷達探測示例。 一、環境準備 在開始本教程之前,需要確保你的開發環境已經安裝Qt和Qt Creator。如果沒有安裝,可以…

    編程 2025-04-29
  • 猿編程python免費全套教程400集

    想要學習Python編程嗎?猿編程python免費全套教程400集是一個不錯的選擇!下面我們來詳細了解一下這個教程。 一、課程內容 猿編程python免費全套教程400集包含了從P…

    編程 2025-04-29
  • Python煙花教程

    Python煙花代碼在近年來越來越受到人們的歡迎,因為它可以讓我們在終端里玩煙花,不僅具有視覺美感,還可以通過代碼實現動畫和音效。本教程將詳細介紹Python煙花代碼的實現原理和模…

    編程 2025-04-29
  • 鍵盤如何啟動運行

    鍵盤作為計算機的一部分,是輸入設備的代表,具有啟動運行的至關重要作用。本文將分多個方面詳述鍵盤如何啟動運行。 一、鍵盤的連接方式 鍵盤的連接方式有2種:一種是通過PS/2口連接,另…

    編程 2025-04-29

發表回復

登錄後才能評論