基于JavaScript實現(xiàn)幸運抽獎頁面

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

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

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

效果圖：

圖片素材：

代碼如下，復制即可使用：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>幸運抽獎頁面</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="點擊開始抽獎" class="login" id="luckbtn" onclick="luck()"/>
 </div>
</body>
<script>
 //JS代碼：幸運抽獎
 var no = prompt("請輸入您的四位會員卡號：");
 //獲取到抽獎按鈕
 document.getElementById("luckbtn").value =no+"-歡迎你，點擊開始抽獎" ;

 //當點擊抽獎按鈕的時候調(diào)用，幸運抽獎的規(guī)則及提醒，功能 function 函數(shù)
 function luck(){
 //系統(tǒng)隨機生成一個0-10之間的隨機整數(shù) :Math.random() 0-1之間的浮點數(shù)
 var num = parseInt(Math.random()*10);
 /*alert(num);*/
 //隨機數(shù)=會員卡號的百位數(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+",您中獎了！");
 }else{
  alert("對不起，"+no+"，您沒有中獎！");
 }
 }

</script>
</html>

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

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

您可能感興趣的文章:

js
抽獎

解決前后端交互數(shù)據(jù)出現(xiàn)精度丟失的多種方式
這篇文章主要為大家介紹了解決前后端交互數(shù)據(jù)出現(xiàn)精度丟失的多種方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-04-04
Bootstrap自動適應PC、平板、手機的Bootstrap柵格系統(tǒng)
這篇文章主要介紹了Bootstrap自動適應PC、平板、手機的Bootstrap柵格系統(tǒng)的相關資料,需要的朋友可以參考下
2016-05-05
html判斷當前頁面是否在iframe中的實例
下面小編就為大家?guī)硪黄猦tml判斷當前頁面是否在iframe中的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
js操作XML文件的實現(xiàn)方法兼容IE與FireFox
下面小編就為大家?guī)硪黄猨s操作XML文件的實現(xiàn)方法兼容IE與FireFox。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
詳解JS ES6變量的解構(gòu)賦值
這篇文章主要介紹了JS ES6變量的解構(gòu)賦值，對ES6感興趣的同學，可以參考下
2021-05-05
JavaScript獲取數(shù)據(jù)類型的方法詳解
這篇文章給大家介紹了JavaScript獲取數(shù)據(jù)類型的方法,文中所介紹的所有知識點、代碼示例以及提供的解決方案,均不考慮?IE?瀏覽器,僅支持最新版本的?Chrome、Firefox、Edge?和?Safari?瀏覽器,需要的朋友可以參考下
2024-02-02
微信小程序數(shù)據(jù)分析之自定義分析的實現(xiàn)
這篇文章主要介紹了微信小程序數(shù)據(jù)分析之自定義分析的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
JavaScript類的繼承操作實例總結(jié)
這篇文章主要介紹了JavaScript類的繼承操作,結(jié)合實例形式總結(jié)分析了JavaScript面向?qū)ο蟪绦蛟O計中類的繼承常見實現(xiàn)方式與操作技巧,需要的朋友可以參考下
2018-12-12
js獲取異步函數(shù)數(shù)據(jù)的實現(xiàn)
本文主要介紹了js獲取異步函數(shù)數(shù)據(jù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-02-02
JS中Attr的用法詳解
本文通過實例代碼給大家介紹了js中的attr的用法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-10-10