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

效果图:

图片素材 :

代码如下,复制即可使用:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>幸运抽奖页面</title>
  6. <style>
  7. /*CSS代码*/
  8. *{
  9. padding:0;
  10. margin:0;
  11. }
  12. .login-box{
  13. width:500px;
  14. height:430px;
  15. /* border:1px solid red;*/
  16. /*水平居中*/
  17. margin:100px auto;
  18.  
  19.        <!-- 此处需要修改为自己的图片路径 -->
  20. background: url(img/tx1.png) no-repeat;
  21. box-shadow: 0 0 2px rgba(0,0,0,.5);
  22. }
  23. .login{
  24. padding:5px;
  25. border:0 none;
  26. background: #0a88e1;
  27. color: white;
  28. font-size:12px;
  29. text-align: center;
  30. width:220px;
  31. line-height: 20px;
  32. margin-top:200px;
  33. margin-left:120px;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div class="login-box">
  39. <input type="button" value="点击开始抽奖" class="login" id="luckbtn" onclick="luck()"/>
  40. </div>
  41. </body>
  42. <script>
  43. //JS代码:幸运抽奖
  44. var no = prompt("请输入您的四位会员卡号:");
  45. //获取到抽奖按钮
  46. document.getElementById("luckbtn").value =no+"-欢迎你,点击开始抽奖" ;
  47.  
  48. //当点击抽奖按钮的时候调用,幸运抽奖的规则及提醒,功能 function 函数
  49. function luck(){
  50. //系统随机生成一个0-10之间的随机整数 :Math.random() 0-1之间的浮点数
  51. var num = parseInt(Math.random()*10);
  52. /*alert(num);*/
  53. //随机数=会员卡号的百位数
  54. /* var gewei = no%10;
  55. alert(gewei);*/
  56. /*var shiwei = parseInt(no/10%10);
  57. alert(shiwei);*/
  58. var baiwei = parseInt(no/100%10);
  59. /*alert(baiwei);*/
  60. if(baiwei == num){
  61. alert("恭喜"+no+",您中奖了!");
  62. }else{
  63. alert("对不起,"+no+",您没有中奖!");
  64. }
  65. }
  66.  
  67. </script>
  68. </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. linux下tar.gz、tar、bz2、zip等解压缩、压缩命令

    转至:http://www.jb51.net/LINUXjishu/43356.html 说明:Linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令 ...

  2. Qt 状态栏设置

    版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处!     导语 在程序主窗口QMainWindow中,主要包含菜单栏,工具栏,中心部件和状 ...

  3. unity生成Android apk

    前提:本文默认你安装了unity5.6版本,不是这个版本的没有Gradle(new)选项,也默认你安装了Android Studio并配置好了环境变量. Gradle(new):打包Android S ...

  4. web项目中classPath指的是哪里?

    classpath可以是SRC下面的路径 但是项目最终编译会到WEB-INF下面,所以有时候WEB-INF下面的classes也可以放配置文件,也可以读取到. 因为最终src都会放到WEB-INF下面 ...

  5. bcdiv bcmul

    /** * 分 转为 钱 */public static function cent2yuan($price) { return bcdiv($price,100,2);} /** * 元 转为 分 ...

  6. python的内置模块time和datetime的方法详解以及使用(python内的time和datetime时间格式)

    time内置模块的方法 1.time() 时间戳 time() -> floating point number  浮点数 Return the current time in seconds ...

  7. P1022 计算器的改良

    P1022 计算器的改良 题目背景 NCL 是一家专门从事计算器改良与升级的实验室,最近该实验室收到了某公司所委托的一个任务:需要在该公司某型号的计算器上加上解一元一次方程的功能.实验室将这个任务交给 ...

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

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

  9. Jmeter javaRequest插件开发

    1. 适用场景 Jmeter工具当前支持的协议或协议所支持的传输方式及传输内容不能满足当前项目的测试要求时,就需要根据实际要求手动编写java测试代码(实现对应的Jmeter规范),以插件方式加载到J ...

  10. 针对TCP连接异常断开的分析

    我们知道,一个基于TCP/IP的客户端-服务器的程序中,正常情况下,我会是启动服务器使其在一个端口上监听请求,等待客户端的连接:通过TCP的三次握手,客户端能够通过socket建立一个到服务器的连接: ...