基于JavaScript实现幸运抽奖页面


Posted in Javascript onJuly 05, 2020

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

 效果图:

基于JavaScript实现幸运抽奖页面

基于JavaScript实现幸运抽奖页面

图片素材 :

基于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 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
angularJS中router的使用指南
Feb 09 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
javascript中new关键字详解
Dec 14 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 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
You might like
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
php数组和链表的区别总结
2019/09/20 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
JavaScript闭包详解
2015/02/02 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
高效使用Python字典的清单
2018/04/04 Python
便捷提取python导入包的属性方法
2018/10/15 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python实现代码审查自动回复消息
2021/02/01 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
八一慰问活动方案
2014/02/07 职场文书
实习协议书范本
2014/04/22 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
经理助理岗位职责
2015/02/02 职场文书
Redis 哨兵机制及配置实现
2022/03/25 Redis