jquery 简单的随机年会抽奖 jquery实现抽奖

使用jQuery实现计算器和抽奖的效果

先来实现计算器的效果

 

1. 我们先来布局：先放一个div标签，不需要给类和ID，然后在div标签内先给一个span标签和input标签，span标签的文本就写参数一，input标签给他一个ID为xx，并且让type的值为number，这样input标签就只能输入数字了
2. 然后接着再在div标签中放一个span标签和SELECT标签，span标签的文本就写运算符，然后给SELECT标签一个ID为jj，SELECT标签里会有一个option标签，我们多复制几个，让option标签内的value值和文本都分别为 +、-、*、/
3. 接着还是在div标签内放入span标签和input标签，这个和开始的那个一样就是变成了参数二，ID改为tt，再给div标签加入一个button按钮和一个input标签，button按钮里的文本就写结果就好了，再给input标签一个ID为xjt，type值就让他为text，我们的布局就完成了，样式就不用去设置了
4. 接下来就去写jQuery实现效果去

 

我们先通过标签名把button按钮获取到并且给button按钮绑定点击事件，然后再声明四个变量分别为num1、num2、num3、index，再通过ID分别获取到两个input标签和SELECT下拉框，然后再获取到里面的数据方分别赋值给num1、num2、num3，再把0赋值给刚刚声明的index

1. 接着我们再判断一下，如果num2 == “+”，那么就让index = parseFloat（num1） + parseFloat（num3），同样当如果num2 == “-”，那么index = num1 - num3，同样当如果num2 == “*”，那么index = num1 * num3，同样当如果num2 == “/”，那么index = num1 / num3，在这里我们在加好那里还用到了parseFloat（）这个方法，因为“+”号可以表示字符串的拼接，所以要用到这个，parseFloat（）就是将字符串转化为数字（浮点数类型），最后再通过ID获取到结果的文本框，把index赋值给他就OK了

我们再来实现抽奖的效果

 

1. 先来布局：先放一个div标签，再给div标签添加类为box，然后再在div标签中再放 两个button按钮，再给button添加ID分别为btn1和btn2，button按钮的文本内容就让他为抽奖开始，再把第一个按钮给隐藏起来，需要在第一个button按钮中写display：none
2. 设置样式：我们只需要给box设置样式即可：width：300px，height：300px，margin：100px auto，就是给div设置大小让其居中显示
3. 接下来就是去写jQuery实现效果

 

首先先声明两个变量为time和bl，然后再在页面加载事件中声明一个数组为ss，数组中放入六张图片的路径即可

1. 再通过ID获取到第一个button按钮并绑定点击事件，然后再通过类选择到div标签，给div设置背景，需要用到ss[Math.floor（Math.random（）* 6）]，就是随机获取数组中的一张图片
2. 然后再通过ID获取到第二个button按钮并绑定点击事件，再声明一个定时器为time，过10毫秒就点击第一个button按钮，接着再声明一个sss来接收时间，时间为1到四秒但不包括四秒，再添加一个一次性定时器setTimeout（），把time定时器给清除掉（clearInterval（time）），再把sss放在一次性定时器的方法后面，表示点击按钮后经过sss（时间）秒后停止
3. 我们要的效果就实现了，但是还有一个缺陷，就是多次点击button按钮后，抽奖不会停止，这里就需要在定时器前面判断抽奖是否在进行，如果变量bl为true，就return false，然后再在清除定时器后面让bl = false，最后再在定时器外让bl为true，这样就不会出现那种情况了。