时间:2021-05-26
抛出随机数实现一个“谁取餐的小游戏”,供大家参考,具体内容如下
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;}.sign::after { content: '';display: block; position: absolute;width: 40px;height: 7px; background: #ccc;right: 16px;top: 5px;} .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';}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本博文源于js基础,旨在讨论如何实现猜随机数的小游戏。题目重现随机生成一个[0,100]区间的数字,不断重复用户输入,直到用户输入对为止。实现原理先用Math.
js生成1到100的随机数js生成随机数使用math.random()函数Math.random()具体实现:1、定义一个random()函数,原理是随机数和最
本文实例为大家分享了JS实现猜数字游戏的具体代码,供大家参考,具体内容如下猜数字游戏:1)利用JS的Math内置对象,实现在1-50内选取一个整数随机数作为游戏
本文实例为大家分享了C语言实现猜数字小游戏的具体代码,供大家参考,具体内容如下代码如下#include#include#include//rand为产生随机数的
本文实例为大家分享了java实现猜数字游戏的具体代码,供大家参考,具体内容如下1.游戏分析:游戏第一步:需要一个随机数,并且该随机数有范围;(java的包中有一