基于JavaScript實(shí)現(xiàn)幸運(yùn)抽獎(jiǎng)頁面

更新時(shí)間：2020年07月05日 13:06:24 作者：一代小輝

這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)幸運(yùn)抽獎(jiǎng)頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

JS實(shí)現(xiàn)簡(jiǎn)單的幸運(yùn)抽獎(jiǎng)頁面，供大家參考，具體內(nèi)容如下

效果圖：

圖片素材：

代碼如下，復(fù)制即可使用：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>幸運(yùn)抽獎(jiǎng)頁面</title>
 <style>
 /*CSS代碼*/
 *{
  padding:0;
  margin:0;
 }
 .login-box{
  width:500px;
  height:430px;
  /* border:1px solid red;*/
  /*水平居中*/
  margin:100px auto;

　　　　　　　<!-- 此處需要修改為自己的圖片路徑 -->

  background: url(img/tx1.png) no-repeat;
  box-shadow: 0 0 2px rgba(0,0,0,.5);
 }
 .login{
  padding:5px;
  border:0 none;
  background: #0a88e1;
  color: white;
  font-size:12px;
  text-align: center;
  width:220px;
  line-height: 20px;
  margin-top:200px;
  margin-left:120px;
 }
 </style>
</head>
<body>
 <div class="login-box">
 <input type="button" value="點(diǎn)擊開始抽獎(jiǎng)" class="login" id="luckbtn" onclick="luck()"/>
 </div>
</body>
<script>
 //JS代碼：幸運(yùn)抽獎(jiǎng)
 var no = prompt("請(qǐng)輸入您的四位會(huì)員卡號(hào)：");
 //獲取到抽獎(jiǎng)按鈕
 document.getElementById("luckbtn").value =no+"-歡迎你，點(diǎn)擊開始抽獎(jiǎng)" ;

 //當(dāng)點(diǎn)擊抽獎(jiǎng)按鈕的時(shí)候調(diào)用，幸運(yùn)抽獎(jiǎng)的規(guī)則及提醒，功能 function 函數(shù)
 function luck(){
 //系統(tǒng)隨機(jī)生成一個(gè)0-10之間的隨機(jī)整數(shù) :Math.random() 0-1之間的浮點(diǎn)數(shù)
 var num = parseInt(Math.random()*10);
 /*alert(num);*/
 //隨機(jī)數(shù)=會(huì)員卡號(hào)的百位數(shù)
 /* var gewei = no%10;
 alert(gewei);*/
 /*var shiwei = parseInt(no/10%10);
 alert(shiwei);*/
 var baiwei = parseInt(no/100%10);
 /*alert(baiwei);*/
 if(baiwei == num){
  alert("恭喜"+no+",您中獎(jiǎng)了！");
 }else{
  alert("對(duì)不起，"+no+"，您沒有中獎(jiǎng)！");
 }
 }

</script>
</html>

如果您有更好的方法或更多的功能，可以和我們大家一起分享哦，如有錯(cuò)誤，歡迎聯(lián)系我改正。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

SVG描邊動(dòng)畫
本文主要介紹了SVG描邊動(dòng)畫的相關(guān)實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
如何為你的JavaScript代碼日志著色詳解
這篇文章主要給大家介紹了關(guān)于如何為你的JavaScript代碼日志進(jìn)行著色的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
淺析Bootstrap驗(yàn)證控件的使用
這篇文章主要介紹了淺析Bootstrap驗(yàn)證控件的使用的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
javascript實(shí)用小函數(shù)使用介紹
本文整理了一些實(shí)用小函數(shù)如阻止輸入非數(shù)字，backspace除外；限制輸入最大字符串長(zhǎng)度等，需要的朋友可以了解下
2013-11-11
小程序開發(fā)指南之全局配置
這篇文章主要給大家介紹了關(guān)于小程序開發(fā)指南之全局配置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-01-01
JavaScript函數(shù)this指向問題詳解
這篇文章主要為大家介紹了JavaScript函數(shù)this指向，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
js拖動(dòng)div 當(dāng)鼠標(biāo)移動(dòng)時(shí)整個(gè)div也相應(yīng)的移動(dòng)
要拖動(dòng)的div為最外層的div，這段代碼對(duì)顯示對(duì)話框的頭部綁定鼠標(biāo)監(jiān)聽事件，當(dāng)鼠標(biāo)移動(dòng)時(shí)，整個(gè)div也相應(yīng)的移動(dòng)，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下
2013-11-11
javascript 同時(shí)在IE和FireFox獲取KeyCode的代碼
以前一直在IE8中測(cè)試網(wǎng)站，后來寫的一部分含有Ajax的代碼出現(xiàn)了故障，不得已下載了Firefox以及它的插件Firebug，才發(fā)現(xiàn)，F(xiàn)F不支持windows.event事件。于是換了一種思路。
2010-02-02
javascript的事件觸發(fā)器介紹的實(shí)現(xiàn)
這篇文章主要介紹了javascript的事件觸發(fā)器介紹的實(shí)現(xiàn),本文所指觸發(fā)器是用程序來觸發(fā)綁定的事件,而不是人為的去觸發(fā),需要的朋友可以參考下
2014-06-06
JS中兩個(gè)數(shù)組對(duì)象篩選方法
這篇文章主要介紹了JS中兩個(gè)數(shù)組對(duì)象篩選,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12