抛出随机数实现一个“谁取餐的小游戏”，供大家参考，具体内容如下1、HTML结构代码如下&
抛出随机数实现一个“谁取餐的小游戏”，供大家参考，具体内容如下
1、HTML结构代码如下
<div class="mask">
<div class="contents">
<div class="head">
<p>谁去拿外卖</p>
<a href="#" id="close">X</a>
</div>
<div class="cont-wapper">
<div class="cont-inner">
<h2></h2>
<button></button>
<div class="sign">随机到最小数字的人去拿外卖</div>
<ul>
<li class="takeout-list">扔出了一个2</li>
<li>扔出了一个3</li>
</ul>
</div>
</div>
</div>
</div>2、css样式代码如下
.mask {
position: fixed;left: 0;top: 0;
width: 100%;height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.contents {
position: absolute;top: 54px;left: 50%;
width: 360px;border: 1px solid gray;background: white;
border-radius: 5px;transform: translateX(-50%);
}
.head {
box-sizing: border-box;width: 100%;height: 44px;
padding: 10px;border-bottom: 1px solid #eee;
}
.head p {
float: left;
}
.head a {
float: right;width: 16px;
line-height: 24px;color: #ccc;
}
.head a:hover {
color: blue;
}
.cont-wapper {
width: 300px;color: #555;
padding: 15px 30px;margin: 0 auto;
}
.cont-inner {
font-size: 12px;background: #dbf0fa;
padding-top: 15px;margin: 0 auto;
margin-bottom: 10px;box-shadow: 1px 1px 2px #ddd;
}
.cont-inner h2 {
width: 186px;height: 188px;margin: 0 auto;
background: url('../../Content/img1/ico.png') 0 -120px no-repeat;
}
.cont-inner button {
display: block;cursor: pointer;/*箭头变手*/
outline:none;/*去掉浏览器默认的外边框*/
width: 271px;height: 40px;border: 0;
background: url('../../Content/img1/ico.png') 0 0 no-repeat;
margin: -45px auto 15px;
}
.sign {
position: relative;text-align: center;
color: #777;margin-bottom: 10px;
}
/*after伪元素在元素之后添加内容*/
/*content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容*/
.sign::after {
content: '';display: block;
position: absolute;width: 40px;height: 7px;
background: #ccc;right: 16px;top: 5px;
}
/*before伪元素在元素之前添加内容。*/
/*content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容*/
.sign::before {
content: '';display: block;position: absolute;
width: 40px;height: 7px;
background: #ccc;left: 16px;top: 5px;
}
.cont-inner ul {
height: 180px;margin: 0 10px;
padding: 5px 5px 0 5px;
overflow: hidden;/*隐藏滚动条*/
}
.cont-wapper li.takeout-list {
color: #fe5a23;font-weight: 600;
height: 19px;line-height: 19px;
background: url('../../Content/img1/ico.png') 0 -320px no-repeat;
}
.cont-wapper li {
padding-left: 5px;
}3、js代码获取元素
var button = document.getElementsByTagName('button')[0];//按钮
var ullist = document.getElementsByTagName('ul')[0];
var arrList = [];//创建数组
var mask = document.getElementsByClassName('mask')[0];
var text = document.getElementsByClassName('contents')[0];
var min = NaN;//最小值
var index;//索引值4、js代码实现鼠标滑过的时候背景的动态变化
//鼠标按下事件
button.onmousedown = function () {
this.style.backgroundPosition = '0 ' + (-80) + 'px';
cteatNumer()//调用生成数组的方法
//鼠标放开事件
this.onmouseup = function () {
this.style.backgroundPosition = '0 ' + (-40) + 'px';
}
};
//鼠标移入事件
button.onmouseenter = function () {
this.style.backgroundPosition = '0 ' + (-40) + 'px';
//鼠标移出事件
this.onmouseleave = function () {
this.style.backgroundPosition = '0 ' + 0 + 'px';
}
};5、js代码实现在数组输出最小值
//在数组中输出最小值
Array.prototype.min = function () {
var min = this[0];//目前生成的数值
var len = this.length;//数组目前的长度
for (var i = 1; i < len; i++) {
if (this[i] < min) {
min = this[i];
}
}
return min;
}6、js代码实现取出数组的最小值
//数组取最小值
function cteatNumer() {
var num = Math.floor(Math.random() * 100);//0-100之间随机生成一个精准的实数
if (min == num) {//判断是否有最小值重复
cteatNumer();//有重复就重新生成
return;
}
arrList.push(num);//在数组最下面显示生成的值
if (arrList.length > 11) {//数组长度超出11
if (num > min && index == 0) {//当最小值索引值为0时
arrList.splice(1, 1);//从数组索引值为1开始，删除第2个数值
} else {
arrList.shift();//数组往上移动
}
}
min = arrList.min();//最小值
index = arrList.indexOf(min);//最小值在数组中的索引
refurbishDom(arrList, index);//调用refurbishDom方法
}7、用for循环遍历当前数组的长度
function refurbishDom(arr, index) {
ullist.innerHTML = '';//清空ul所有的数值
var len = arr.length;//获取当前数组的长度
for (var i = 0; i < len; i++) {//显示对应索引的数值
ullist.innerHTML += '<li>' + '扔出了一个' + arr[i] + '</li>';
}
//在ul数组中动态指定最小值
ullist.getElementsByTagName('li')[index].className = 'takeout-list';
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
js随机数小游戏 js随机数 js小游戏