基于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
抽獎

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