zoukankan      html  css  js  c++  java
  • jquery 抽奖

    试着写了一个jquery抽奖程序:

    学到的方法:

    数组的splice()方法:

    ------------------------------------------------------

    定义和用法

    splice() 方法用于插入、删除替换数组的元素。

    语法

    arrayObject.splice(index,howmany,element1,.....,elementX)
    参数:

    index 

    必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。

    howmany

    必需。规定应该删除多少元素。必须是数字,但可以是 "0"(用于添加)。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。

    element1

    可选。规定要添加到数组的新元素。从 index 所指的下标处开始插入。

    elementX

    可选。可向数组添加若干元素。


    返回值

    如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

    splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

    请注意,splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。


    抽奖小代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link  href="12.03/css/fyt_city_reset.css" type="text/css" rel="stylesheet" />
    <style>
    *        { margin:0; padding:0}
    body     { font-size:12px;}
    .result_xx dt,.result_xx dd { float:left; margin:10px;}
    .xname   { height:30px;margin:30px; font-size:20px; font-weight:bold; color:#c50000}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>
    $(function(){
    
      var auto;
      var arry; //声明储存姓名的数组;
      function funa(){
        arry=["111","222","333","444","555","666","777","888","999","aaa","bbb","ccc","ddd","eee","fff"];      //定义一个数组,存放名字
    	var rand=Math.floor(Math.random()*arry.length);   //随记取得数组的下标
    	$(".xname").text(arry[rand]);
    	auto=setTimeout(funa,100)
      }
      $(".beginclick").click(function(){
          auto=setTimeout(funa,100)
    	  return false;
      })
      var aleady;  //存储已经选定的人名
      $(".endclick").click(function(){
          clearTimeout(auto);
    	  var szname=$(".xname").text();
    	  var jx=$(".jxsz")[0].options.selectedIndex;    //获取选中的是哪一种奖项
    	  var nowdd=$(".result_xx").eq(jx).find("dd");
    	  var mm=nowdd.length;
    	  
    	  if(mm==jx+1){
    	       alert("此奖项人选已定!")		  
    		  }else{	        
    			      $(".result_xx").eq(jx).append("<dd>"+szname+"</dd>");
    				  arry.splice($.inArray(szname,arry),1);   //删除已经选定的数组元素 
    			  }  
    	  return false;
      })
    })
    
    
    </script>
    </head>
    
    <body>
        <div class="mt30 ml"> 抽取
            <select class="mr20 jxsz">
                <option>一等奖(1名)</option>
                <option>二等奖(2名)</option>
                <option>三等奖(3名)</option>
            </select>
            <a href="" title=""  class="beginclick mr c_red">begin</a>
            <a href="" title="" class="endclick c_red">end</a>
        </div>
        
        <h2 class="xname"></h2>
        
        <dl class="result_xx clearfix">
            <dt>一等奖得主:</dt>
      
        </dl>
        <dl class="result_xx clearfix">
            <dt>二等奖得主:</dt>
    
        </dl>
        <dl class="result_xx clearfix">
            <dt>三等奖得主:</dt>
    
        </dl>
    
    
    
    </body>
    </html>
    


  • 相关阅读:
    MySQL(后篇)
    数据库
    Ajax
    JQuery
    BOM & DOM
    CSS
    HTML
    Python之IO多路复用学习
    vue-router小记
    js中运算符的优先级
  • 原文地址:https://www.cnblogs.com/hdchangchang/p/3965402.html
Copyright © 2011-2022 走看看