jquery get 方法 html 预期;jquery中html方法 收藏 0

php手把手教你做网站（三十八）jquery 转抽奖，开盲盒

抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。

图1 转抽奖

图2 转抽奖结果

1、转

本来是想直接绘图实现，但是没有找到怎么填充文字，只好把弄成了背景图，通常用于游戏抽道具，商城积分抽奖，公司年末员工抽奖

1. 点击抽奖触发jquery的click事件；
2. 通过ajax获取后台的随机数；
3. 后台通过mt_rand得到随机奖项（角度），返回给前台；
4. 通过jquery改变css transform、transition属性，旋转背景，也就是；

html代码

js代码

说明：

1. 因为改变css进行旋转，开始的时候，直接执行了弹窗或者是console.log，这并不符合我们的要求，加入了setTimeout，在旋转完成以后，再给出提示；
2. time*1000*(5+result.angle/360) 是总得旋转时间；

后台接口程序

说明：

1. 以上概率算法采用的是所有概率求和做分母、出现的概率做分子，如果才有百分比，实现方式是一样的；
2. 采用递归，依次判断每一次的起始数字和结束数字，中奖的随机数是否在该范围内，在，就是中得该奖项，否则没中，再判断下一个；
3. 最后一个数组元素是不需要判断的，前边的都不是，最后一个一定就是中奖；
4. 记录谁获得了什么奖项，应该是在后台返回数据之前，不能是前台弹窗以后通过ajax通知后台中奖信息；

2、随机抽取一个幸运员工

点击开始抽奖，单行文本框循环显示员工，抽奖按钮文字变为停止，点击停止的时候，抽中的员工显示在获奖名单。

图3 随机抽取幸运员工

html代码

js代码

说明：

num = Math.floor(Math.random() * (yuangong.length));

1. yuangong.length员工数组长度；
2. Math.random() 0到1的小数，包含0，不包含1；
3. Math.floor 小数向下取整，可以为0；

综上：num得到的是0到数组下标的随机数。

clearInterval(t)：用于停止t = setTimeout(start, 0);

后台php接口程序

3、随机抽取多个幸运员工

没有想到什么效果，只是单纯地获取了随机数

html代码

js代码

4、在线开盲盒

需要我们点击抽奖的时候通过ajax读取后台获得的盲盒信息，直接显示到前台，前台显示同上边的，都是一样，说一下后台程序。

使用array_rand().随机获取几个数组元素

array_rand($arr,$count).用法

1. $arr目标数组；
2. $count随机的个数;

返回值是原数组的下标。

如果包含特殊奖项，需要满足抽奖多少次，一定抽中，可以达到抽奖次数以后在array_rand内随机数减一，然后把大奖塞进该次抽奖的返回信息。

array_push($rearr,$a)用法：

1. $rearr目标数组；
2. $a追加的元素或者是数组

输出结果：

前端面试题《JQuery》

$() 函数是 jQuery() 函数的别称，$()函数用于将任何对象包裹成 jQuery对象，接着被允许调用定义在jQuery对象上的多个不同方法。甚至可以将一个选择器字符串传入$()函数，它会返回一个包含所有匹配的DOM元素数组的jQuery对象。这个问题我已经见过好几次被提及，尽管它非常基础，它经常被用来区分一个开发人员是否了解jQuery。

jQuery支持不同类型的选择器，例如ID选择器、class选择器、标签选择器。鉴于这个问题没提到ID和class，可以用标签选择器来选择所有的div 元素。jQuery代码：$(\”div\”)，这样会返回一个包含所有5个div标签的jQuery 对象。

这对于很多java零基础学jQuery的初学者来说是一个棘手的问题，其实是个简单的问题。$(this) 返回一个jQuery对象，你可以对它调用多个 jQuery方法，比如用text()获取文本，用val()获取值等等。而this代表当前元素，它是JavaScript关键词中的一个，表示上下文中的当前DOM元素。你不能对它调用 jQuery方法，直到它被 $() 函数包裹，例如 $(this)。

除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的jQuery版本, 那么它就不会再去下载它一次，因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。

方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对DOM进行了一轮查找，性能方面更加出色。

可以用 jQuery方法appendTo()将一个HTML元素添加到DOM树中。这是jQuery提供的众多操控DOM的方法中的一个。可以通过appendTo()方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素。

（1）get()取得所有匹配的DOM元素集合；

（2）get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素；

（3）append(content)向每个匹配的元素内部追加内容；

（4）after(content)在每个匹配的元素之后插入内容；

（5）html()/html(var)取得或设置匹配元素的html内容；

（6）find(expr)搜索所有与指定表达式匹配的元素；

（7）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数；

（8）empty()删除匹配的元素集合中所有的子节点；

（9）hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法；

（10）attr(name)取得第一个匹配元素的属性值。

获取页面的元素；修改页面的外观；改变页面大的内容；响应用户的页面操作；为页面添加动态效果；无需刷新页面，即可以从服务器获取信息；简化常见的javascript任务。

jQuery选择器支持CSS里的选择器，jQuery选择器可用来添加样式和添加相应的行为，CSS中的选择器是只能添加相应的样式。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com