前端HTML手机号抽奖案例（jQuery）

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>手机号抽奖</title><style>p{width: 100px;position: relative;}</style></head><script src="js/jquery3.4.1.js" type="text/javascript" charset="utf-8"></script><script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script><script>$(function(){var number = new Array("133","150","157","138","130");for (var i = 0;i<10; i++){var  temp = number[Math.floor(Math.random()*number.length)]//随机生成后面的8位for (var j = 0 ; j<8 ;j++) {temp = temp + Math.floor(Math.random()*10);}//设置一个延时动画setTimeout(create_animation(i,temp),0);}})//电话号放入p标签里function create_animation(i,temp){//向p标签赋值手机号码$("#div_p p:eq("+ i + ")").prepend(temp)//设置一个从左到右的动画$("#div_p p:eq("+ i +")").animate({left:'47.3%',},2000);}//开始抽奖$(document).on("click","#btn_prize",function(){//随机抽取一个0~9的随机数var temp = Math.floor(Math.random()*10)for(var i=0;i<=10;i++){//判断是否抽到手机号码if(i !=temp){$("#div_p p:eq("+ i +")").slideUp(5000);}else{$("#div_p p:eq("+ i +")").animate({fontSize:"2em",left:"44.6%",backgroundColor:"#aa0000",color:"#fff",width:210,}).css("color","#fff");}}//设置开奖按钮不可用$("#btn_prize").attr("disabled","true");})//重置$(document).on("click","#btn_re",function(){//设置一个puff动画$("body").toggle("puff");//重新加载一个页面setTimeout(function(){window.location.reload();},1000);})</script><body style="text-align: center;"><h2>抽奖列表</h2><div id="div_p" style="text-align: center;"><!--手机号码显示区域--><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div><button type="button" id="btn_prize">开始抽奖</button><button type="button" id="btn_re">重置抽奖</button></body>
</html>

前端HTML手机号抽奖案例（jQuery）相关推荐

软件架构设计案例_透过现象看本质：常见的前端架构风格和案例
所谓软件架构风格,是指描述某个特定应用领域中系统组织方式的惯用模式.架构风格定义一个词汇表和一组约束,词汇表中包含一些组件及连接器,约束则指出系统如何将构建和连接器组合起来.软件架构风格反映了领域中众 ...
征服大前端视频教程第一季（jQuery、HTML5、CSS3、Node.js）
征服大前端视频教程第一季(jQuery.HTML5.CSS3.Node.js.AngularJS.MongoDB) 网盘地址:https://pan.baidu.com/s/1-dbJMOa1RrQz ...
透过现象看本质: 常见的前端架构风格和案例
所谓软件架构风格,是指描述某个特定应用领域中系统组织方式的惯用模式.架构风格定义一个词汇表和一组约束,词汇表中包含一些组件及连接器,约束则指出系统如何将构建和连接器组合起来.软件架构风格反映了领域中众 ...
15-07-08 数组-- 手机号抽奖、福利彩票随机生成
1.手机号抽奖 Console.WriteLine("请输入手机号的个数:");int a = Convert.ToInt32(Console.ReadLine());string ...
JavaScript实现抽奖（jQuery）
JavaScript实现抽奖(jQuery) 效果展示: 代码展示: <!DOCTYPE html> <html lang="en"> <head&g ...
Web APIs，BOM树，声明dom对象，年会抽奖案例，随机图片，表单，用户注册倒计时，innerHTNL，classList的使用
介绍严格意义上讲,我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系,ECMAScript 简称 ES 它提供了一套语言标准规范,如变量.数据类型.表达式.语 ...
微信转发抽奖+php,jQuery+PHP实现微信转盘抽奖功能的方法
本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作首先要准备素材,抽奖的界面用到两张 ...
Web前端开发HTML清华大学,清华大学出版社-图书详情-《Web前端开发——HTML5+CSS+JavaScript+ jQuery +Dreamweaver》...
前言 Web前端开发是网站开发方向重要的专业课程,随着市场对Web前端工程师的需求增加,国内很多本专科院校正在或准备开设该课程.本书是咸阳师范学院2016年教材建设资助项目. Web前端开发涵盖多门技 ...
jquery php抽奖转盘,JQuery+PHP转盘抽奖程序源码下载
本站之前有提供过一个简单易扩展.可控性强的Jquery转盘抽奖程序,主要讲述了前端实现抽奖表现的部分,这里给出另一个完整的php转盘抽奖程序,通过使用jQuery和PHP来实现,用PHP后台代码控制抽 ...

前端HTML手机号抽奖案例（jQuery）

前端HTML手机号抽奖案例（jQuery）相关推荐

最新文章

热门文章