基于JavaScript實現幸運抽獎頁面
更新時間：2020年07月05日 13:06:24 作者：一代小輝
這篇文章主要為大家詳細介紹了基于JavaScript實現幸運抽獎頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JS實現簡單的幸運抽獎頁面，供大家參考，具體內容如下
效果圖：
圖片素材 ：
代碼如下，復制即可使用：
<!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+"-歡迎你，點擊開始抽獎" ;
//當點擊抽獎按鈕的時候調用，幸運抽獎的規(guī)則及提醒，功能 function 函數
function luck(){
//系統(tǒng)隨機生成一個0-10之間的隨機整數 :Math.random() 0-1之間的浮點數
var num = parseInt(Math.random()*10);
/*alert(num);*/
//隨機數=會員卡號的百位數
/* 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>
如果您有更好的方法或更多的功能，可以和我們大家一起分享哦，如有錯誤，歡迎聯系我改正。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了解決前后端交互數據出現精度丟失的多種方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
Bootstrap自動適應PC、平板、手機的Bootstrap柵格系統(tǒng)
這篇文章主要介紹了Bootstrap自動適應PC、平板、手機的Bootstrap柵格系統(tǒng)的相關資料,需要的朋友可以參考下2016-05-05
下面小編就為大家?guī)硪黄猦tml判斷當前頁面是否在iframe中的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
下面小編就為大家?guī)硪黄猨s操作XML文件的實現方法兼容IE與FireFox。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了JS ES6變量的解構賦值，對ES6感興趣的同學，可以參考下2021-05-05
這篇文章給大家介紹了JavaScript獲取數據類型的方法,文中所介紹的所有知識點、代碼示例以及提供的解決方案,均不考慮?IE?瀏覽器,僅支持最新版本的?Chrome、Firefox、Edge?和?Safari?瀏覽器,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了微信小程序數據分析之自定義分析的實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JavaScript類的繼承操作,結合實例形式總結分析了JavaScript面向對象程序設計中類的繼承常見實現方式與操作技巧,需要的朋友可以參考下2018-12-12
本文主要介紹了js獲取異步函數數據的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
本文通過實例代碼給大家介紹了js中的attr的用法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-10-10