基于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 相关文章推荐
让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
You might like
用PHP函数解决SQL injection
2006/10/09 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
jQuery入门知识简介
2010/03/04 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
使用JavaScript进行表单校验功能
2017/08/01 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
会计学生自我鉴定
2014/02/06 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
明星邀请函
2015/02/02 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
Oracle用户管理及赋权
2022/04/24 Oracle