编程 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 相关文章推荐

javascript 二分法(数组array)

Apr 24 Javascript

一个js控制的导航菜单实例代码

Dec 03 Javascript

table行随鼠标移动变色示例

May 07 Javascript

js闭包实例汇总

Nov 09 Javascript

推荐10个2014年最佳的jQuery视频插件

Nov 12 Javascript

每天一篇javascript学习小结（面向对象编程）

Nov 20 Javascript

jQuery实现页面顶部显示的进度条效果完整实例

Dec 09 Javascript

javascript面向对象程序设计高级特性经典教程(值得收藏)

May 19 Javascript

Node.js Addons翻译(C/C++扩展)

Jun 12 Javascript

vue.js中父组件调用子组件的内部方法示例

Oct 22 Javascript

vue.js获得当前元素的文字信息方法

Mar 09 Javascript

Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法

Sep 11 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