精华内容
下载资源
问答
  • jQuery手机号抽奖

    2021-05-24 21:55:08
    jQuery设置动画时,设置颜色变化时需导入jquery-ui.min.js包,否则不会生效 设置css动画时,“-”需去掉且后面首位字母大写,例如:css中的font-size、background-color,jQuery中需转为fontSize、backgroundColor。...

    笔记

    效果图

    效果1:动画效果比较僵硬
    在这里插入图片描述
    效果2;
    在这里插入图片描述

    animate()

    jQuery设置动画时,设置颜色变化时需导入jquery-ui.min.js包,否则不会生效
    设置css动画时,“-”需去掉且后面首位字母大写,例如:css中的font-size、background-color,jQuery中需转为fontSize、backgroundColor。

     $("#div_p p:eq(" + temp + ")").animate({fontSize:'200%',left:'44.6%',backgroundColor:'#aa0000',color:'#fff',width:'210px'});
    

    取随机8位整数

    循环里面一定是“;”分号分号分号!!!!!!!!不是逗号!!!!-------for(i=0;i<8;i++)
    console.log(); //怎么打印出后8位的数字???????
    啊啊啊啊啊啊找到了!!!!

    var rand = "";						
    			for (var i=0;i<8;i++){
    				rand+=Math.floor(Math.random()*10);//随机取一个0~9的整数,循环8次
    			}		
    			console.log(rand);
    
    Math.random();//随机取0~1之间的任意一位数(可能为0,不可能为1)
    Math.random()*10;//范围0~10
    Math.floor(Math.random()*10);//floor向下取整,范围[0,1,2,3,4,5,6,7,8,9]
    for(i=0;i<8;i++) {
    	Math.floor(Math.random()*10);//经过8次循环得到随机的随机的一个8位数
    }
    

    抽数组中一个

    var number = new Array("133", "149", "153", "173", "177", "180", "181", "189", "191", "199", "176", "198");
    			var len = number.length; //取数组的长度
    			var ran = Math.floor(Math.random() * len); //ran为0~(lenfth-1)的一个随机数
    			var t = number[ran]; //以ran作为下标,随机取数组number中的一个数
    			console.log(t);
    

    按钮不可用

    只要给按钮添加disabled="disabled"属性,就可实现按钮不可用。所以用attr给按钮添加一个disabled属性就可。

    <button id="btn_prize" disabled="disabled">按钮</button>
    
    $("#btn_prize").attr('disabled','disabled');
    		//给按钮添加disabled属性
    

    延迟刷新

    setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式。
    语法格式:
    setTimeout(要执行的代码, 等待的毫秒数)
    setTimeout(JavaScript 函数, 等待的毫秒数)

    setTimeout(function(){
    			window.location.reload ();//1秒后刷新window窗口
    		},1000)
    

    HTML+CSS

    <style>
    		p{
    			position: relative;
    			max-width: 210px;
    		}
    	</style>
    		<!--
    		任务1:步骤1——使用script标签引入jQuery,jqueryui,index.js文件
    	    -->
    		<script src="js/jquery-3.3.1.min.js"></script>
    		<script src="js/jquery-ui.min.js"></script>
    		<script src="js/index.js"></script>
    	</head>
    	
    	<body style="text-align: center;">
    		<h2>抽奖列表</h2>
    		<div id="div_p" style="text-align: left;">
    		</div>
    		<button type="button" id="btn_prize">开始抽奖</button>
    		<button type="button" id="btn_re">重置抽奖</button>
    	</body>		
    

    js

    //定义一个数组,每个元素是个3位数的字符串,模拟手机号的前3位
    var number = new Array("133", "149", "153", "173", "177", "180", "181", "189","191", "199");
    var temp;//生成的手机号数组
    
    $(function() {
    	/* 生成随机十个手机号 */
    	for(var i = 0; i < 10; i++) {
    		//随机生成一个数组长度以内的整数,作为数组下标来随机获取number数组中的一个元素(手机号开头的后3位)
    		temp = number[i];
    		console.log(temp);//手机号前3位	
    		/*
    		 *任务1:步骤2——随机生成8位数字,和3位数字拼接在一起,组成一个手机号
    		 */
    		for (var j=0;j<8;j++){
    			temp = temp+Math.floor(Math.random()*10);//随机取一个0~9的整数,循环8次
    		}
    		// console.log(); //怎么打印出后8位的数字???????
    		/*
    		 *任务1:步骤3——将生成的手机号码放在p标签中,并把p添加到div容器中的末尾
    		 */		
    		$("#div_p").append('<p>'+temp+'</p>');
    		console.log(temp);//11位手机号
    		//设置生成手机号时的动画
    		$('#div_p p').eq(i).animate({
    			/*任务1:步骤4——使用jquery自定义动画将左偏移量设置为47%
    			 */
    			left:'47%'
    		});
    	}
    	
    	/* 实现抽奖:为抽奖按钮绑定点击事件 */
    	$("#btn_prize").on("click", function() {
    		/*
    		 * 任务2:步骤1——使用随机数方法随机生成一个0-9的整数作为中奖号码序号。
    		 */
    		temp = Math.floor(Math.random()*10);
    		//隐藏没中奖的手机号,显示中奖的手机号
    		for(var i = 0; i <= 10; i++) {
    			if(i != temp) {
    				//没抽取到的手机号码,使用jQuery动画淡出隐藏
    				$("#div_p p:eq(" + i + ")").fadeOut();
    			} else {
    				/*
    		 		* 任务2:步骤2——抽取到的手机号码,使用jquery自定义动画显示出来。
    		 		* 动画属性为:字体大小变为2倍,左偏移 44.6%,背景颜色 "#aa0000",文字颜色:"#fff",宽度210
    		 		*/
    			   $("#div_p p:eq(" + temp + ")").animate({fontSize:'200%',left:'44.6%',backgroundColor:'#aa0000',color:'#fff',width:'210px'});
    			}
    		}
    		/*
    		 * 任务2:步骤3——设置“开始抽奖”按钮不可用。
    		 */
    		$("#btn_prize").attr('disabled','disabled');
    		//给按钮添加disabled属性
    		
    	})
    	
    	
    	/* 任务3:实现重置抽奖功能,具体步骤拉下:
    	 * 任务3:步骤1——为重置抽奖按钮绑定点击事件。
    	 * 任务3:步骤2—把body使用toggle动画隐藏 (jQuery UI puff)。
    	 * 任务3:步骤3—延迟1秒后重新加载页面。
         */
    	$("#btn_re").click(function(){
    		$("body").toggle("puff");
    		setTimeout(function(){
    			window.location.reload ();
    		},1000)		
    	})
    })
    

    源文件

    Document

    展开全文
  • jQuery随机抽中手机号码抽奖代码是一款手机号码中间4位隐藏显示,可以内定中奖者。
  • jQuery随机抽中手机号码抽奖代码是一款手机号码中间4位隐藏显示,可以内定中奖者。
  • jQuery随机抽中手机号码抽奖代码是一款手机号码中间4位隐藏显示,可以内定中奖者。
  • 红色喜庆风格界面jQuery新年年会随机手机号码滚动抽奖代码,2018年会喜迎新年幸运大抽奖活动页面。
  • js代码var u = 100;var n = 1;var timer; //定义滚动的定时器var result = 18912345678; //指定中奖结果,可以... //标识能否开始抽奖$(".num").css('backgroundPositionY',200);//开始13888888888$(".num").eq(0)...

    js代码

    var u = 100;

    var n = 1;

    var timer; //定义滚动的定时器

    var result = 18912345678; //指定中奖结果,可以抽取指定数组中的某一个

    var isBegin = false; //标识能否开始抽奖

    $(".num").css('backgroundPositionY',200);//开始13888888888

    $(".num").eq(0).css('backgroundPositionY',-100)

    $(".num").eq(1).css('backgroundPositionY',-300)

    //执行数字滚动

    function run(){

    n++;

    $(".num").each(function(index){

    var _num = $(this);

    _num.animate({

    backgroundPositionY: ((u+1)*n*(index+1))

    },100);

    });

    timer = window.setTimeout(run,100);

    isBegin = true ;

    }

    $(function(){

    //开始抽奖

    $('.start').click(function(){

    if(isBegin){

    return false;

    }else{

    run();

    }

    });

    //停止抽奖

    $('.stop').click(function(){

    var num_arr = (result+'').split('');

    $(".num").each(function(index){

    var _num = $(this);

    setTimeout(function(){

    _num.animate({

    backgroundPositionY: (u*60) - (u*num_arr[index])

    },{

    duration: 500,

    easing: "easeInOutCirc",

    complete: function(){

    if(index == 10){

    isBegin = false;

    }

    }

    });

    },100);

    });

    window.clearTimeout(timer);

    isBegin = false ;

    });

    });

    展开全文
  • 手机号码抽奖代码.rar

    2020-07-02 12:01:25
    该页面主要是实现一个随机抽取手机号码抽奖的页面,主要有三个抽奖等级,一等奖二等奖三等奖,每一个等级有人数限制,并且可以记录获奖人员的名单。
  • jQuery手机页面随机抽奖代码是一款九宫格抽奖代码。
  • jquery实现数字抽奖

    2015-12-07 09:32:33
    本demo实现用jQuery的数字抽奖,数据可以自己导入,自定义数字或手机号或姓名等,同时可以自己设置奖项个数和等次。适用于各大企业年会和活动,界面自认为也很漂亮~
  • 实训 jQuery开发交互效果页面--手机号抽奖.pptx
  • 前端HTML手机号抽奖案例(jQuery

    千次阅读 2021-07-04 19:11:23
    <!... <... <...手机号抽奖</title> <style> p{ width: 100px; position: relative; } </style> </head> <script src="js/jquery3.4.1.js
    <!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>
    
    展开全文
  • jQuery新年年会随机手机号码滚动抽奖代码 https://www.lanrenzhijia.com/jquery/4971.html
  • jquery抽奖

    2018-12-29 08:04:22
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;  &lt;meta http-equiv="Content-Type"...2018xx互联网公司会抽奖现场&lt;/title&gt;  &lt

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>2018xx互联网公司会抽奖现场</title>

        <link rel="stylesheet" href="css/index.css"/>

        <script type="text/javascript" src="{{asset}}/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="js/easing.js"></script>

    </head>
    <body>
        <!-- 主体盒子-->
        <div class="main-box">
          <!-- 喜迎新年-->
          <div class="title-box">
            <img src="images/pc-titile.png" alt=""/>
          </div>
          <!-- 装饰点缀-->
          <div class="desc-box">
              <img src="images/dianzhui.png" alt=""/>
          </div>        
          <div class="main">
              <!-- 数字背景盒子-->
              <div class="num-bg-box">
                  <!-- 数字盒子-->
                  <div class="num_box">
                      <div class="num"></div>
                      <div class="num"></div>
                      <div class="num"></div>
                      <div class="num"></div>
                      <div class="num"></div>
                      <div class="num"></div>
                      <div class="num"></div>
                      <div class="num"></div>
                      <div class="num"></div>
                      <div class="num"></div>
                      <div class="num"></div>
                  </div>
              </div>
          </div>
        </div>
        <!-- 操作按钮-->
        <div class="btn-box">
            <div class="btn start">开始抽奖</div>
            <div class="btn stop" >停止抽奖</div>
        </div>
        
        <!--js-->
        <script>
        
            var u = 100;
            var n = 1;
            var timer; //定义滚动的定时器
            
            //思路把result变活
            
            var result   = 18912345678; //指定中奖结果,可以抽取指定数组中的某一个
            
            
            //var phonarray= new Array('15142222234','13223455432','13338388888','15490909090','15545645455','15642222234','13723455432','13838388888','15990909090','15090909090');
            
            /*每个人只有3次
            var phonarray= new Array('15142222234','13223455432');
            var phone3=[];
            for(var i=0;i< phonarray.length ;i++){
               phone3[ phonarray[i] ]=0;
            }*/
            
            var isBegin  = false; //标识能否开始抽奖
        
            $(".num").css('backgroundPositionY',200);//开始13888888888
            $(".num").eq(0).css('backgroundPositionY',-100)
            $(".num").eq(1).css('backgroundPositionY',-300)
        
            //执行数字滚动
            function run(){
                n++;
                $(".num").each(function(index){
                    var _num = $(this);
                    _num.animate({
                        backgroundPositionY: ((u+1)*n*(index+1))
                    },100);
        
                });
                timer = window.setTimeout(run,100);
                isBegin = true ;
            }
            
            
            
            $(function(){
                //开始抽奖
                $('.start').click(function(){
                    if(isBegin){
                        return false;
                    }else{
                    
                    
                        //思活:变活
                        //实现,比如10个手机号码,随机抽一个
                        
                        var rand_start=1;
                        var rand_end=phonarray.length+1;
                        //alert(rand_end);
                        var rand=Math.floor(Math.random()*(rand_end-rand_start)+rand_start);
                        result=phonarray[rand-1];
                        
                        //每个人只有1次
                        //phonarray.splice(rand-1,1);
                        
                        //每个人只有3次
                        phone3[result]++;
                        if(phone3[result]>=3){
                           phonarray.splice(rand-1,1);
                        }
                        
                        
                        
                        //$.ajax() 入库
                        
                    
                        run();
                    }
                    
                    
                    
                    
                    
                });
                //停止抽奖
                $('.stop').click(function(){
        
                    var num_arr = (result+'').split('');
        
                    $(".num").each(function(index){
                        var _num = $(this);
                        setTimeout(function(){
                            _num.animate({
                                backgroundPositionY: (u*60) - (u*num_arr[index])
                            },{
                                duration: 500,
                                easing: "easeInOutCirc",
                                complete: function(){
                                    if(index == 10){
                                        isBegin = false;
                                    }
                                }
                            });
                        },100);
                    });
                    window.clearTimeout(timer);
                    isBegin = false ;
                });
            });
        </script>

    </body>
    </html>

    展开全文
  • jQuery随机中奖名单抽奖代码是一款基于json动态获取中奖名单列表,随机点名获取抽奖用户信息。这是一款适用于公司年会多个中奖名单批量抽奖源代码。
  • 这是一款很简单的jQuery倒计时自动随机抽奖代码,倒计时结束后自动抽取中奖者的姓名和手机号码。js注释非常详细,新手也能用。
  • 这是一款很简单的jQuery倒计时自动随机抽奖代码,倒计时结束后自动抽取中奖者的姓名和手机号码。js注释非常详细,新手也能用。
  • 手机抽奖活动页面模板jQuery+HTML5,带守将次数,奖励提示
  • 2018年会抽奖jQuery特效是一款2018年会喜迎新年幸运大抽奖活动页面,随机手机号码滚动抽奖,支持开始抽奖和停止抽奖代码。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 421
精华内容 168
关键字:

jquery手机号抽奖