编程 Javascript

基于JavaScript实现幸运抽奖页面

Posted in Javascript onJuly 05, 2020

JS实现简单的幸运抽奖页面，供大家参考，具体内容如下

效果图：

图片素材：

基于JavaScript实现幸运抽奖页面

代码如下，复制即可使用：

<!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+"-欢迎你，点击开始抽奖" ;

 //当点击抽奖按钮的时候调用，幸运抽奖的规则及提醒，功能 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>

如果您有更好的方法或更多的功能，可以和我们大家一起分享哦，如有错误，欢迎联系我改正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

基于JavaScript实现幸运抽奖页面

- Author -

一代小辉

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

让IE6支持min-width和max-width的方法

Jun 25 Javascript

js实现网站首页图片滚动显示

Feb 04 Javascript

jsp网页搜索结果中实现选中一行使其高亮

Feb 17 Javascript

jQuery中click事件用法实例

Dec 26 Javascript

Javascript技术难点之apply，call与this之间的衔接

Dec 04 Javascript

原生javascript实现分享到朋友圈功能支持ios和android

May 11 Javascript

深入理解js数组的sort排序

May 28 Javascript

关于javascript sort()排序你可能忽略的一点理解

Jul 18 Javascript

JavaScript实现的DOM绘制柱状图效果示例

Aug 08 Javascript

vue使用keep-alive保持滚动条位置的实现方法

Apr 09 Javascript

Openlayers显示地理位置坐标的方法

Sep 28 Javascript

js中延迟加载和预加载的具体使用

Jan 14 Javascript

Vue封装一个简单轻量的上传文件组件的示例

Mar 21 #Javascript

基于vue-video-player自定义播放器的方法

Mar 21 #Javascript

基于iScroll实现内容滚动效果

Mar 21 #Javascript

JS中的回调函数实例浅析

Mar 21 #Javascript

使用Vue制作图片轮播组件思路详解

Mar 21 #Javascript

JS实现为动态添加的元素增加事件功能示例【基于事件委托】

Mar 21 #Javascript

JS实现遍历不规则多维数组的方法

Mar 21 #Javascript