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. VIM 模板

    Vim实现自动加载模版功能可以有很多的方法,比如利用插件和AutoCmd等.根据文件名自动加载模板的功能利用网上某大牛自己写的插件实现,我针对Java代码进行简单地修改,以实现模板中的Java主类类名 ...

  2. process.nextTick,Promise.then,setTimeout,setImmediate执行顺序

    1. 同步代码执行顺序优先级高于异步代码执行顺序优先级: 2. new Promise(fn)中的fn是同步执行: 3. process.nextTick()>Promise.then()> ...

  3. Feign来调用服务

    Feign是一个声明式的伪Http客户端,它使得写Http客户端变得更简单.使用Feign,只需要创建一个接口并注解.它具有可插拔的注解特性,可使用Feign 注解和JAX-RS注解.Feign支持可 ...

  4. Python【多线程与多进程】

    import time,threading print("=======串行方式.并行两种方式调用run()函数=======")def run(): print('哈哈哈') # ...

  5. [大数据]-hadoop2.8和spark2.1完全分布式搭建

    一.前期准备工作: 1.安装包的准备: VMware(10.0版本以上) : 官方网站:https://www.vmware.com/cn.html 官方下载地址:http://www.vmware. ...

  6. 页面缓存之Meta http-equiv属性详解

    http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变 ...

  7. linux网卡的开启

    一:文件配置网卡在开机时,自动启用 首先我们使用 ip addr查看IP信息 [root@redhat2 network-scripts]# ip addr : lo: <LOOPBACK,UP ...

  8. element ui 栅格布局

    <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark&qu ...

  9. HTTP 错误 500.19 请求的页面的相关配置数据无效 解决办法

    "HTTP 错误 500.19 请求的页面的相关配置数据无效" 解决办法   HTTP 错误 500.19 - Internal Server Error无法访问请求的页面,因为该 ...

  10. hdu 3065病毒侵袭持续中

    病毒侵袭持续中 http://acm.hdu.edu.cn/showproblem.php?pid=3065 Time Limit: 2000/1000 MS (Java/Others)    Mem ...