js搖獎器代碼,js轉盤抽獎代碼

本文目錄一覽:

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實現抽獎功能

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

用js做一個簡單的搖獎程序,用javascript讓三張圖片快速切換,一個按鈕控制開始和停止,具體如下

首先圖片的名字呢 最好有規律 象 img1,img2….img10

如何讓圖片切換:在方法里要有setTimeout(“該方法名()”,時間),

再用Math.floor(Math.random()*10)+1; 產生3個隨機數

分別給img顯示

如何停下來,就判斷按鈕的value值,取得各img的圖片名,再把全局的3個目標圖片名比較

結果 就出來了 ,以上是思路,我覺得

使用JavaScript完成一個抽獎程序,當單擊頁面上開始抽獎按鈕時,在1~36中選取7個互不相同

1~36個數取7個不同的,需要用while循環+隨機數去取出7個數。

在while循環裡面,可以判斷取出來的數(用switch),是否是28,18,8. 如果有輸出相應的獎項,如果沒有,就輸出其它的。然後將這7個數,打印出來就好了。

JavaScript(縮寫為JS)是一種高級的、多範式、解釋型的編程語言,是一門基於原型、函數先行的語言,它支持面向對象編程、命令式編程以及函數式編程。

它提供語法來操控文本、數組、日期以及正則表達式,不支持I/O(比如網絡、存儲和圖形等),但可以由它的宿主環境提供支持。它已經由ECMA(歐洲計算機製造商協會)通過ECMAScript實現語言的標準化。它被世界上的絕大多數網站所使用,也被世界主流瀏覽器支持。

js搖獎用js做一個搖獎程序要求在0-10中抽出三個幸運號碼且三個號碼各不相同代碼

var map={};

document.write(“今日開獎號:br /”);

for(var i=0;i3;i++){

var r=Math.floor(Math.random()*10);

if(null==map[r]){

document.write(r+”nbsp;”);

map[r]=1;

}else{

i–;

continue;

}

}

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

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-12-10 12:07
下一篇 2024-12-10 12:07

相關推薦

  • JS Proxy(array)用法介紹

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

    編程 2025-04-29
  • Python周杰倫代碼用法介紹

    本文將從多個方面對Python周杰倫代碼進行詳細的闡述。 一、代碼介紹 from urllib.request import urlopen from bs4 import Bea…

    編程 2025-04-29
  • Python字符串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字符串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字符串寬度不限制的情況下,我們可以寫出很長很長的一行代碼。但是,為了…

    編程 2025-04-29
  • Python基礎代碼用法介紹

    本文將從多個方面對Python基礎代碼進行解析和詳細闡述,力求讓讀者深刻理解Python基礎代碼。通過本文的學習,相信大家對Python的學習和應用會更加輕鬆和高效。 一、變量和數…

    編程 2025-04-29
  • Python滿天星代碼:讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼,為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員,都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    編程 2025-04-29
  • 倉庫管理系統代碼設計Python

    這篇文章將詳細探討如何設計一個基於Python的倉庫管理系統。 一、基本需求 在着手設計之前,我們首先需要確定倉庫管理系統的基本需求。 我們可以將需求分為以下幾個方面: 1、庫存管…

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

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

    編程 2025-04-29
  • Python實現簡易心形代碼

    在這個文章中,我們將會介紹如何用Python語言編寫一個非常簡單的代碼來生成一個心形圖案。我們將會從安裝Python開始介紹,逐步深入了解如何實現這一任務。 一、安裝Python …

    編程 2025-04-29
  • 怎麼寫不影響Python運行的長段代碼

    在Python編程的過程中,我們不可避免地需要編寫一些長段代碼,包括函數、類、複雜的控制語句等等。在編寫這些代碼時,我們需要考慮代碼可讀性、易用性以及對Python運行性能的影響。…

    編程 2025-04-29
  • 北化教務管理系統介紹及開發代碼示例

    本文將從多個方面對北化教務管理系統進行介紹及開發代碼示例,幫助開發者更好地理解和應用該系統。 一、項目介紹 北化教務管理系統是一款針對高校學生和教職工的綜合信息管理系統。系統實現的…

    編程 2025-04-29

發表回復

登錄後才能評論