js实现随机数小游戏


Posted in Javascript onJune 28, 2019

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

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';
}

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

Javascript 相关文章推荐
js动态创建、删除表格示例代码
Aug 07 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
理解javascript回调函数
Dec 28 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
微信小程序实现日历效果
Dec 28 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
Node爬取大批量文件的方法示例
Jun 28 #Javascript
JavaScript实现单英文金山打字通
Jul 24 #Javascript
javascript实现导航栏分页效果
Jun 27 #Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 #Javascript
原生js实现抽奖小游戏
Jun 27 #Javascript
JavaScript实现图片放大镜效果
Jun 27 #Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 #Javascript
You might like
php验证session无效的解决方法
2014/11/04 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
python装饰器使用方法实例
2013/11/21 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
商场活动策划方案
2014/01/24 职场文书
同学聚会主持词
2014/03/18 职场文书
比赛口号大全
2014/06/10 职场文书
出纳岗位职责范本
2015/03/31 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
Go并发4种方法简明讲解
2022/04/06 Golang