Js实现炫酷随机抽人

2020年已悄然来临，一年又这样白白浪费了，年末将至，来了一个小任务，实现年会的随机抽人效果，需求：所有的人都在屏幕上四处漂泊，点击抽人后，加快速度，5秒后，抽中的人跑向中间，其他所有人，飞出屏幕外，并保证每个人抽中的概率只有一次。看到这个需求后，对于一个Android开发者而言，懵逼了！不过还是细细钻研了一番，最终实现效果如下，当然，有参考他人的思路，效果如下：

这里主要说下实现思路，主要用到了requestAnimationFrame这个函数，以及JQery里animate动画，数据源，自己写了一个txt文件，里面存储所有人姓名。

{"result":["张三","李四","王五","赵六","闫七","李八","李九","李十","张十一","钱十二","孙大","周二","吴三","郑四","王洛","冯九","都偶","某某"],"message":"成功","status":"0000"
}

页面其实很简单，一个用于动态添加到的p标签，还有两个div按钮，页面底部的js文件，首先使用JQuery获取了所有人的姓名，然后赋值给了p标签，需要注意的是，获取完名字后，这里我做了一个遍历，即让每个名字后都带了一个空格，然后调用了animate.js中的Animate对象。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>随机抽人</title><meta name="author" content=AbnerMing/><link rel="stylesheet" type="text/css" href="css/animate.css"/><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="js/animate.js" type="text/javascript" charset="utf-8"></script>
</head><body>
<article><p class="text" id="text"></p>
</article>
<div class="div_bottom"><div id="btn">随机抽人</div><div class="reset">重置</div>
</div><script type="text/javascript">$(function () {$.get("data.txt", function (data, status) {var json = JSON.parse(data);if (json.status == "0000") {//成功var result = json.result;var content = "";for (var i = 0; i < result.length; i++) {var con = result[i];content = content + con + " ";}$(".text").text(content);var neontext = new Animate("text");neontext.render.run();$("#btn").click(function () {if (isClick) {randomNum(result);isClick = false;} else {isClick = true;}neontext.render.killer(isClick);});} else {alert(json.message);//否则给出提示}});var isClick = true;//去重function randomNum(nameArr) {var size = nameArr.length;var a = 0;while (true) {a++;var num = Math.floor(Math.random() * size);var name = localStorage.getItem("name");if ((name + "").indexOf(num) == -1) {localStorage.setItem("name", name + "=" + num);localStorage.setItem("vip", nameArr[num]);break;}if (a == size - 1) {alert("所有人都抽完了！");localStorage.setItem("vip", "");break;//停止}}}$(".reset").click(function () {localStorage.setItem("name", "");localStorage.setItem("vip", "");});});</script>
</body>
</html>

animate.js里，由于前边设置的文字携带了空格，这里对于设置的文字做了分割，动态创建span标签，并定义了一个随机的集合，具体看下面代码：

var isRun = true;function Animate(id) {var ele = document.getElementById(id),eletext = ele.innerText,arr = eletext.split(" "),_this = this;this.resetTime = 10; //最大值100this.color = ['#f44336', '#e91e63', '#9c27b0','#673ab7', '#3f51b5', '#2196f3','#03a9f4', '#00bcd4', '#009688','#4caf50', '#8bc34a', '#cddc39','#ffeb3b', '#ffc107', '#ff9800','#ff5722', '#795548', '#9e9e9e','#607d8b'];this.randomColor = function () {var colorIndex = Math.floor(this.color.length * Math.random());return this.color[colorIndex];};this.posRangencala = function () {return ele.hasAttribute("ele-range") ? {minRange: {x: ele.getBoundingClientRect().left,y: ele.getBoundingClientRect().top},maxRange: {x: ele.getBoundingClientRect().right,y: ele.getBoundingClientRect().bottom}} : {minRange: {x: 0,y: 0},maxRange: {x: document.documentElement.clientWidth,y: document.documentElement.clientHeight}}};this.spanArr = (function () {ele.innerHTML = "";var spanArr = [];arr.forEach(function (value, index) {var spanDom = document.createElement("span");spanDom.style.display = "inline-block";spanDom.innerHTML = value;spanDom.style.position = "relative";spanDom.style.color = _this.randomColor();spanDom.style.fontSize = "26px";spanDom.own = {pos: {x: 0,y: 0},ran: {x: -.5 + Math.random(),y: -.5 + Math.random()},speed: {x: 1,y: 1},dir: {x: 1,y: 1}};ele.appendChild(spanDom);spanArr.push(spanDom);});return spanArr;})();this.spanOrigin = function () {this.spanArr.forEach(function (value, index) {value.own.realPos = {minx: value.getBoundingClientRect().left,maxx: value.getBoundingClientRect().right,miny: value.getBoundingClientRect().top,maxy: value.getBoundingClientRect().bottom}});this.posRangen = this.posRangencala();};this.spanOrigin();this.resetpos = function () {this.spanOrigin();this.spanArr.forEach(function (span, index) {if (span.own.realPos.minx + span.own.pos.x < _this.posRangen.minRange.x) span.own.pos.x = 0;if (span.own.realPos.maxx + span.own.pos.x > _this.posRangen.maxRange.x) span.own.pos.x = 0;if (span.own.realPos.miny + span.own.pos.y < _this.posRangen.minRange.y) span.own.pos.y = 0;if (span.own.realPos.maxy + span.own.pos.y > _this.posRangen.maxRange.y) span.own.pos.y = 0;})};this.floatText = function () {this.spanArr.forEach(function (span, index) {if (span.own.realPos.minx + span.own.pos.x < _this.posRangen.minRange.x || span.own.realPos.maxx + span.own.pos.x > _this.posRangen.maxRange.x) {span.own.dir.x = -span.own.dir.x;}if (span.own.realPos.miny + span.own.pos.y < _this.posRangen.minRange.y || span.own.realPos.maxy + span.own.pos.y > _this.posRangen.maxRange.y) {span.own.dir.y = -span.own.dir.y;}if (isRun) {timeOut(span, 0);} else {for (var a = 0; a < 20; a++) {timeOut(span, 10);}}})};function timeOut(span, time) {setTimeout(function () {span.own.pos.x += span.own.ran.x * span.own.speed.x * span.own.dir.x;span.own.pos.y += span.own.ran.y * span.own.speed.y * span.own.dir.y;span.style.transform = "translateX(" + span.own.pos.x + "px) translateY(" + span.own.pos.y + "px)";}, time);}var boolClick = true;this.floatBack = function () {this.spanArr.forEach(function (value, index) {var text = value.innerText;var x = value.own.pos.x - value.own.pos.x * _this.resetTime / 100 - 100;var y = value.own.pos.y - value.own.pos.y * _this.resetTime / 100 - 100;var vip = localStorage.getItem("vip");if (vip == text) {if (boolClick) {var tTop = value.getBoundingClientRect().top;var tLeft = value.getBoundingClientRect().left;var sizeW = winW / 2;var sizeH = winH / 2;var s = value.getBoundingClientRect().width / 3;var endX = sizeW - tLeft - s * 2;var endY = sizeH - tTop - 36;$(value).animate({top: endY, left: endX, fontSize: '36px'});boolClick = false;}} else {value.style.transform = "translateX(" + x + "px) translateY(" + y + "px)";setTimeout(function () {$(value).animate({top: '-150px'});}, 200);}});if (this.resetTime === 100) {cancelAnimationFrame(_this.send);return true;} else {this.resetTime += 5;}};this.restart = function () {this.spanArr.forEach(function (value, index) {value.own.pos.x = 0;value.own.pos.y = 0;})};this.render = {run: function () {_this.sren = requestAnimationFrame(_this.render.run);_this.floatText();},end: function () {_this.send = requestAnimationFrame(_this.render.end);_this.floatBack();},killer: function (bool) {if (bool) {isRun = true;window.location.reload();} else {isRun = false;setTimeout(function () {var that = _this;cancelAnimationFrame(that.sren);that.render.end();}, 5000);}}};var winW = 0;var winH = 0;window.onresize = function () {_this.resetpos();};getWh();function getWh() {winW = document.body.offsetWidth;winH = document.documentElement.clientHeight;}}

animate.css


* {margin: 0;padding: 0;
}html {font-family: "微软雅黑";font-size: 20px;
}::-webkit-scrollbar {overflow-x: hidden;
}body {background: #000;overflow: hidden;
}p {width: 80%;margin: 100px auto 30px;line-height: 1.5;
}.div_bottom div {width: 100%;height: 50px;background: orange;color: #ffffff;font-family: "微软雅黑";border-radius: 10px;border: 1px solid orange;text-align: center;line-height: 50px;cursor: pointer;
}.reset {margin-top: 20px;
}.div_bottom {position: absolute;bottom: 5%;width: 10%;height: 120px;left: 45%;
}

全部都是已写好的代码，可以直接复制使用，只需要更改txt文件里的名字即可。

Js实现炫酷随机抽人相关推荐

python随机抽人小程序_python抽人程序初试
抽人不是那个抽人.. 是随机抽人.. 昨晚接到班里有个任务让我写一个从班干部和不是班干部的同学中随机抽取几位去干活的程序.... 然鹅我这个初学python的渣渣我就去网上先看看了大体情况结果一 ...
Mapbox GL JS实现炫酷的地图背景
经常看到网上的各种地图,有着炫酷的地图背景,用户体验非常不错.在Mapbox GL JS这块,其实关于地图的背景没有太多的设置.但当我们想基于Mapbox GL JS实现炫酷的地图背景改怎么办呢?这里 ...
使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景近期工作有涉及到数字大屏的需求,于是利用业余时间,结合 Three.js ...
HTML+CSS+JS制作炫酷【烟花特效】
文章目录制作炫酷烟花特效一.普通烟花(分散形) HTML代码 CSS代码 JS代码二.圆形烟花 HTML代码 CSS代码 JS代码三.爱心形烟花 HTML代码 CSS代码 JS代码四.源码获 ...
华为P10手机有计算机功能吗,华为P10的这些炫酷功能一般人都不知道
日前,迪信通联合零点有数发布了 2017 年 8 月迪信通手机销量数据排行榜,数据显示, 2017 年 8 月,华为占据迪信通全渠道销量排行榜的首位,在销量上更是遥遥领先其他手机品牌高达23.3%. ...
js实现炫酷数字效果
/*** 产生一个随机整数,范围是min~max之间* @param {*} min 最小值* @param {*} max 最大值,取不到最大值*/ function getRandom(min, ...
Reveal.js HTML5炫酷幻灯片
用reveal.js和HTML5制作幻灯片,炫到没朋友! 1.首先下载reveal.js,然后引入 2.在index.html里面引入css和js,我写的简单demo如下: <!DOCTYPE ...
JS实现炫酷雪花飘落效果
用js实现漂亮的雪花飘过效果: 步骤: 页面基本样式,雪花旋转动画效果 body{width: 100vw;height: 100vh;background-color: #000;overflow: ...
html js满屏飘雪特效,JS实现炫酷雪花飘落效果
用js实现漂亮的雪花飘过效果: 步骤: 页面基本样式,雪花旋转动画效果 body{ width: 100vw; height: 100vh; background-color: #000; overf ...
JS jquery 炫酷特效
中文版jquery框架在线帮助地址: http://www.okajax.com/book/jquery/ 编辑推荐Jquery文章,希望你喜欢: JS优秀框架:jQuery最新版下载地址及jquer ...

Js实现炫酷随机抽人

Js实现炫酷随机抽人相关推荐

最新文章

热门文章