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. 设计模式 (一)——策略模式（Strategy，行为型）

    1.概述 使用设计模式可以提高代码的可复用性.可扩充性和可维护性.策略模式(Strategy Pattern)属于行为型模式,其做法是将类所需的行为或者算法一个个封装成单独的类,并将其作为类的数据成员 ...

  2. 解题：SDOI 2014 数表

    题面 为了好写式子,先不管$a$的限制 设$facs$为因子和,那么有 $ans=\sum\limits_{i=1}^n\sum\limits_{j=1}^mfacs(gcd(i,j))$ 再设$f( ...

  3. [CQOI2012] 交换棋子 （费用流）

    $pdf\space solution$    link #include<iostream> #include<cstring> #include<cstdio> ...

  4. BZOJ 4827 循环卷积

    题意:求两个手环任意旋转对应位置的差值+c的平方最小 设b旋转到k最小,那么先将b扩张一倍构成一圈,那么答案式子就是 将这个式子展开一下,事情就变得有趣了起来 这个式子将a[ ]翻转可以化成卷积形式 ...

  5. linux下安装python和pip

    注意:不要轻易去卸载原有的python环境,因为有些软件是依赖他的 一:安装前,先将依赖环境一并安装,避免后面重复编译 [root@redhat2 bin]# yum install gcc g++ ...

  6. POJ 3308 Paratroopers（最小点权覆盖）（对数乘转加）

    http://poj.org/problem?id=3308 r*c的地图 每一个大炮可以消灭一行一列的敌人 安装消灭第i行的大炮花费是ri 安装消灭第j行的大炮花费是ci 已知敌人坐标,同时消灭所有 ...

  7. 51 nod 1046 A^B Mod C

    1046 A^B Mod C 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出3个正整数A B C,求A^B Mod C.   例如,3 5 8,3^ ...

  8. expect嵌套shell循环

    #!/bin/bash Detailtxt="test.txt" while read line do dest=`echo $line|awk '{print $1}'` ip= ...

  9. C# 定时执行方法： System.Timers.Timer用法示例

    System.Timers.Timer t = new System.Timers.Timer(5000); //设置时间间隔为5秒        private void Form1_Load(ob ...

  10. Uva 11549 - Calculator Conundrum 找规律加map

    题目链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...