js实现随机数小游戏

抛出随机数实现一个“谁取餐的小游戏”,供大家参考,具体内容如下

1、HTML结构代码如下

<div class="mask">
  <div class="contents">
    <div class="head">
      <p>谁去拿外卖</p>
      <a href="#" rel="external nofollow" 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';
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Js 随机数产生6位数字

    复制代码 代码如下: <script type="text/javascript"> function MathRand() { var Num=""; for(var i=0;i<6;i++) { Num+=Math.floor(Math.random()*10); } document.getElementById("Lb_Random").innerText=Num; document.getElementById(&qu

  • JS生成某个范围的随机数【四种情况详解】

    前言: JS没有现成的函数,能够直接生成指定范围的随机数. 但是它有个函数:Math.random()  这个函数可以生成 [0,1) 的一个随机数. 利用它,我们就可以生成指定范围内的随机数. 而涉及范围的话,就有个边界值的问题.这样就包含四种情况: 1)min ≤ r ≤ max  (一般这种比较常见) 2)min ≤ r < max 3) min < r ≤ max 4)min < r < max 一.min ≤ r ≤ max function RandomNumBoth(

  • 使用js Math.random()函数生成n到m间的随机数字

    摘要: 本文讲解如何使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备. Math.random()函数返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) 生成n-m,包含n但不包含m的整数: 第一步算出 m-n的值,假设等于w 第二步Math.random()*w 第三步Math.random()*w+n 第四步parseInt(Math.random()*w+n, 10) 生成n-m,不包含n但包含m的整数:​ 第一步算出 m-n的值,假设等于w 第二步Math

  • js生成随机数之random函数随机示例

    JavaScript Math.random()内置函数 random函数返回值 返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) random函数示例 //返回随机数 document.write(Math.random()); //返回10-20的随机数 document.write(Math.random()*(20-10)+10); //返回指定范围的随机数(m-n之间)的公式 document.write(Math.random()*(n-m)+m); 基于时间,亦可以产生

  • JavaScript 产生不重复的随机数三种实现思路

    在 JavaScript 中,一般产生的随机数会重复,但是有时我们需要不重复的随机数,如何实现?下面就来讲解三种方法产生不重复的随机数,并进行比较,看那种方法效率高. 方法一 思路:首先创建一个1到3000的数组,每次取一个数,然后去除数组中取出的这个数, 这样就可以实现永不重复. 复制代码 代码如下: <script type="text/javascript"> var count=3000; var originalArray=new Array;//原数组 //给原

  • js获取数组任意个不重复的随机数组元素 原创

    复制代码 代码如下: <script language="javascript"> //从一个给定的数组arr中,随机返回num个不重复项 function getArrayItems(arr, num) { //新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组; var temp_array = new Array(); for (var index in arr) { temp_array.push(arr[index]); } //取出的数值项,

  • javascript生成不重复的随机数

    题目来源:在慕课学习jQuery过程中一道测试题. 初始时:<ul>元素中仅显示5个<li>元素,其中包含还包括最后一个<li>元素,<a>元素中的显示"更多"字符. 当点击"更多"链接时,自身内容变为"简化",同时,<ul>元素中显示全部的<li>元素. 当点击"简化"链接时,自身内容变为"更多",同时,<ul>元素中仅显

  • js生成随机数的方法实例

    js生成随机数主要用到了内置的Math对象的random()方法.用法如:Math.random().它返回的是一个 0 ~ 1 之间的随机数.有了这么一个方法,那生成任意随机数就好理解了.比如实际中我们可能会有如下的需要: (1)生成一个 0 - 100 之间的随机整数,那么则可以: parseInt(100*Math.random()); 注意:因为Math.random()的返回值是包括0和1的,所以这里是有生成0和100的可能性的. (2)生成一个从 m - n 之间的随机整数,例如要生

  • Javascript 生成指定范围数值随机数

    不过经过俺的小小努力之后, 终于让俺摸着门道喽, 问题也就理所当然滴解决掉. 然后就写了个公式, 这样应该可以消失掉这个用法了, 公式: 1. 从1开始 至 任意值 linenum parseInt(Math.random()*上限+1); 2. 从任意值开始 至 任意值 linenum parseInt(Math.random()*(上限-下限+1)+下限); 上面的公式使用了 parseInt(), 因此要加1; 如果使用 Math.ceil() 则不需要加1, 俺习惯于这样写... 目录:

  • javascript获取不重复的随机数的方法比较

    不重复的随机数方案1:1531 毫秒 一般的思路是先创建一个1-3000的数组,每一次取出一个,然后让这个数组减少一个, 取一个,减少一个,这样就可以做到永不重复了. 随机不重复_www.jb51.net var count=3000; var original=new Array;//原始数组 //给原始数组original赋值 for (var i=0;i 我们 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 不重复的随机数方案2:297毫秒 但是方案1采用了slice方法,此方

随机推荐