JS实现简单的幸运抽奖页面

效果图：

图片素材 ：

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

<!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>

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

JS实现幸运抽奖页面的更多相关文章

  1. qq电脑管家抽奖页面源代码

    桌面qq电脑管家中个人中心的抽奖页面竟然是HTML写的,光大我HTML.!!! <!DOCTYPE html> <html> <head lang="en&qu ...

  2. 【JavasScript】折腾一个基础到不能再基础的顺滑抽奖页面

    前言 事情是这样的,作为一个意志力极低的人,最近一直在找寻提高意志力的方法. 然后决定试一试所谓的"建立奖励机制",也就是说,完成一项意志力挑战后给自己一些奖励(具体操作方法不在这 ...

  3. 利用scrapy-splash爬取JS生成的动态页面

    目前,为了加速页面的加载速度,页面的很多部分都是用JS生成的,而对于用scrapy爬虫来说就是一个很大的问题,因为scrapy没有JS engine,所以爬取的都是静态页面,对于JS生成的动态页面都无 ...

  4. Space.js – HTML 驱动的页面 3D 滚动效果

    为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...

  5. Headroom.js – 快速响应用户的页面滚动操作

    Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...

  6. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  7. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  8. js离开或刷新页面检测(且兼容FF,IE,Chrome)

    <!DOCTYPE html> <html> <head> <script> function closeIt() { return confirm(& ...

  9. js 监听整个页面的回车事件

    JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch;      ...

随机推荐

  1. Redis中国用户组|唯品会Redis cluster大规模生产实践

    嘉宾:陈群 很高兴有机会在Redis中国用户组给大家分享redis cluster的生产实践.目前在唯品会主要负责redis/hbase的运维和开发支持工作,也参与工具开发工作 Outline 一.生 ...

  2. 【线性基/神仙题】P4151 [WC2011]最大XOR和路径

    Description 给定一个无向连通图,边有边权,求一个 \(1~\sim n\) 的路径,最大化边权的异或和.如果一条边经过多次则计算多次. Input 第一行是两个整数 \(n,m\) 代表点 ...

  3. 【数据结构】【CF1073D】 Berland Fair

    Description 给定 \(n\) 个商店,他们围成一个圆圈,按照顺时针从 \(1\) 到 \(n\) 编号.你有 \(T\) 元钱,从 \(1\) 号点开始按照顺时针方向走,每到一个商店,只要 ...

  4. [转]Multivariate Time Series Forecasting with LSTMs in Keras

    1. Air Pollution Forecasting In this tutorial, we are going to use the Air Quality dataset. This is ...

  5. UESTC--1548

    题目:Easy math 原题链接:http://acm.uestc.edu.cn/problem.php?pid=1548 分析:费马小定理的应用. #include<cstdio> # ...

  6. Kubernetes Downward API

    目录 说明 环境变量方式 将pod信息注入为环境变量 将容器资源信息注入为环境变量 volume挂载方式 作用 说明 我们知道,每个Pod在成功创建出来之后,都会被系统分配唯一的名字.IP地址,并且处 ...

  7. Tomcat权威指南-读书摘要系列2

    2. 配置Tomcat 2.1. 重定向Web应用程序的目录 将工程文件与Tomcat分离 复制conf和webapps文件夹到分离目录: 配置CATALINA_BASE环境变量,值为分离目录: 2. ...

  8. day6 方法

    1.方法是一段可重复调用的代码段,今天学习的方法可以由主方法直接调用,所以加入public static关键字修饰. 2.方法的重载为方法名相同,参数的类型或个数不同.

  9. jQuery中使用attribute，prop获取，设置input的checked值

    1.prop方法获取.设置checked属性 当input控件checkbox设置了checked属性时,无论checked=”“或 checked=”checked”,$(obj).prop(“ch ...

  10. python学习笔记2-字符串操作

    一.字符串切片 #切片也能适合字符串 tittle='今 天 发 苹 果' for i t in enumerate(tittle): #enumerate可以同时循环下标和值 print('%s:% ...