资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

js怎么实现随机数小游戏

小编给大家分享一下js怎么实现随机数小游戏，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联长期为近1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为济阳企业提供专业的成都做网站、成都网站建设，济阳网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

具体内容如下

1、HTML结构代码如下


 
  
   
谁去拿外卖

   X
  
           

         随机到最小数字的人去拿外卖
        
    

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 h3 {
 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 += '
  • ' + '扔出了一个' + arr[i] + '
    • ';
 }
 //在ul数组中动态指定最小值
 ullist.getElementsByTagName('li')[index].className = 'takeout-list';
}

    以上是“js怎么实现随机数小游戏”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


    标题名称：js怎么实现随机数小游戏
    分享网址：http://www.cdkjz.cn/article/ippogi.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    广汉锦华兴宏源活动板房做手机网站什邡网站建设成都网站建设成都网站建设成都网络营销西信服务器托管成都二枢电信服务器托管H5网站制作

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图