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实现控制台控件的代码
Sep 04 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 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 中的str_replace 函数总结
2007/04/27 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
微信小程序日历效果
2018/12/29 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
python自动安装pip
2014/04/24 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Django 重写用户模型的实现
2019/07/29 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
python中xlrd模块的使用详解
2021/02/01 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
会计电算化个人自我评价
2013/11/17 职场文书
写给女生的道歉信
2014/01/08 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
python 批量压缩图片的脚本
2021/06/02 Python