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. IDA error of " positive sp value has been found"

    问:用IDA静态分析,函数结尾出现 endp ; sp-analysis failed 用F5调不出伪代码,不知道是什么原因,请问有什么解决办法没有? 答:endp ; sp-analysis fai ...

  2. 【整体二分】【P3527】 [POI2011]MET-Meteors

    Description 有 n 个国家,总共占有一个环,环被分成了 m 段,已知有 k 次流星雨会落在这个环上的一些位置.再给出每个国家目标收集多少流星,对每个国家求出第几次流星雨后可以满足这个国家的 ...

  3. 《剑指offer》— JavaScript（15）反转链表

    反转链表 题目描述 输入一个链表,反转链表后,输出链表的所有元素. *** 思路 (本题链表默认无头结点) pHead为当前结点,如果当前结点为空的话,直接返回: pHead为当前结点,pre为当前结 ...

  4. @Html.DropDownListFor默认选中项

    http://q.cnblogs.com/q/73902/ 项目使用mvc4,给dropDownList指定默认值未选中 页面代码是: 1.未有默认选中值 Html.DropDownListFor(m ...

  5. activiti教程之示例项目activiti-explorer运行_百度经验

    https://jingyan.baidu.com/article/4e5b3e19107ad091901e249e.html

  6. 二、Linux学习之centOS的的setup

    因为我是在VMware上安装的centOS,网络设置选择的是桥接模式,这样可以和实体机使用同样的网络,但是也使用同样的IP,因此就需要设置一下IP了,否则使用ifconfig查询ip的时候显示的是12 ...

  7. ElasticStack系列之六 & 版本冲突处理之乐观锁

    悲观并发控制(PCC) 这一点在关系数据库中被广泛使用.假设这种情况很容易发生,我们就可以阻止对这一资源的访问.典型的例子就是当我们在读取一个数据前先锁定这一行,然后确保只有读取到数据的这个线程可以修 ...

  8. python中super与成员属性

    super的使用直接看例子: class A(): def __init__(self, a): print('init A...') self.a = a class B(A): def __ini ...

  9. 科学计算三维可视化---Mayavi入门（Mayavi管线）

    一:Mayavi管线 mlab.show_pipeline() #显示管线层级,来打开管线对话框 (一)管线中的对象scene Mayavi Scene:处于树的最顶层的对象,他表示场景,配置界面中可 ...

  10. Shell记录-Shell脚本基础（六）

    watch是一个非常实用的命令,基本所有的Linux发行版都带有这个小工具,如同名字一样,watch可以帮你监测一个命令的运行结果,省得你一遍遍的手动运行. 1．命令格式 watch[参数][命令] ...