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. 单点登录(四)-----遇到问题-----cas server 源码部署tomcat运行报错ClassNotFoundException: org.jasig.cas.CasEnvironmentCo

    情况 cas单点登录 cas server 源码部署tomcat运行报错 把cas server的代码下载下来后使用gradle插件或者maven插件以及转化成eclipse·后导入发现部署到tomc ...

  2. google插件备份与安装

    说明 chrome浏览器中有很多有用的扩展程序, 但是可能因为某些原因我们不能直接去扩展程序商店进行下载获取, 如果我们自己电脑上已经通过某种方式添加了扩展程序, 想把它移植到其他没有FQ或者压根没有 ...

  3. Google Gson用法

    the latest version is 2.8.0. If you're using Gradle, add the following line: compile 'com.google.cod ...

  4. 解题：ZJOI 2015 幻想乡战略游戏

    题面 神**所有点都爆int,我还以为我写出什么大锅了,不开long long见祖宗... 动态点分治利用点分树树高不超过log的性质,我们对每个点维护一个子树和,一个点分树子树和,一个点分树上父亲的 ...

  5. SDOI 2019 Round1 游记

    \(SDOI~2019 ~ Round1\) 游记 \(Day ~0\) 报道.骑车子去的,好热.到了之后看到好几个同校神仙,还从那里莫名其妙的等了一会,然后交了钱签了名就拿挂牌走人了.现在居然还有受 ...

  6. K8S调度之标签选择器

    Kubernetes 调度简介 除了让 kubernetes 集群调度器自动为 pod 资源选择某个节点(默认调度考虑的是资源足够,并且 load 尽量平均),有些情况我们希望能更多地控制 pod 应 ...

  7. 数据库sharding系列好文收藏

    部分摘自于:http://my.oschina.net/u/188625/blog/104743 1. 又拍网架构中的数据库分库设计 . http://blog.csdn.net/nanjingjia ...

  8. java 编码问题

    Java默认使用Unioncode编码,即不论什么语言都是一个字符占两个字节 Java的class文件编码为UTF-8,而虚拟机JVM编码为UTF-16 UTF-8编码下,一个中文占3个字节,一个英文 ...

  9. 蓝桥杯 算法提高 学霸的迷宫 经典BFS问题

      算法提高 学霸的迷宫   时间限制:1.0s   内存限制:256.0MB      问题描述 学霸抢走了大家的作业,班长为了帮同学们找回作业,决定去找学霸决斗.但学霸为了不要别人打扰,住在一个城 ...

  10. Git Cannot rebase: You have unstaged changes.

    Cannot rebase: You have unstaged changes. 那说明你有修改过的文件git stashgit pull --rebase (每次push之前最好这样做一次)git ...