Maison > Article > interface Web > Yuansheng JS crée une page de loterie
Yuansheng JS crée une page de loterie
- php中世界最好的语言original
- 2018-05-09 10:18:121889parcourir
Cette fois, je vais vous montrer comment créer une page de loterie avec Yuansheng JS. Quelles sont les précautions pour créer une page de loterie avec Yuansheng JS. Voici un cas pratique, jetons un oeil.
Rendu :
Matériel photo :
Le code est le suivant, copiez et utilisez :
<!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>
<p class="login-box">
<input type="button" value="点击开始抽奖" class="login" id="luckbtn" onclick="luck()"/>
</p>
</body>
<script>
//JS代码：幸运抽奖
var no = prompt("请输入您的四位会员卡号：");
//获取到抽奖按钮
document.getElementById("luckbtn").value =no+"-欢迎你，点击开始抽奖" ;
//当点击抽奖按钮的时候调用，幸运抽奖的规则及提醒，功能 function 函数
function luck(){
//系统随机生成一个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>
Si vous avez une meilleure méthode ou plus de fonctions, vous pouvez le partager avec nous. S'il y a des erreurs, veuillez me contacter pour les corriger.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Explication détaillée des cas d'utilisation calculés dans Vue.js
Comment Vue utilise les composants Echarts actualisés dynamiquement
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!