基于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 相关文章推荐
javascript tips提示框组件实现代码
Nov 19 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
js控制div弹出层实现方法
May 11 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 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 和 MySQL 基础教程(二)
2006/10/09 PHP
php adodb分页实现代码
2009/03/19 PHP
php计算整个目录大小的方法
2015/06/01 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
总结一些js自定义的函数
2006/08/05 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
python实现通过shelve修改对象实例
2014/09/26 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
python读取Kafka实例
2019/12/23 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
文科教师毕业的自我评价
2014/01/16 职场文书
法院授权委托书格式
2014/09/28 职场文书
汽车转让协议书
2015/01/29 职场文书
大学四年个人总结
2015/03/03 职场文书
教师节寄语2015
2015/03/23 职场文书
春节晚会开场白
2015/05/29 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书