IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

咨询电话 : 010-59478634

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

该问题已被官方收录

如何在九宫格里同时抓取三个格子？

2

2

操作DOM

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

无js代码

该问题已被官方收录

多次点击“开始闪”按钮后为什么三个格子闪得越来越快？

2

2

事件操作DOM

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

// 获取随机颜色
var randomColor = function() {
    var c = '0123456789abcdef'
    var color = '#'
    for (var i = 0; i < 6; i++) {
        num = [Math.floor(Math.random() * 16)]
        color += c[num]
    }
    // console.log('color', color)
    return color
}

// 返回范围随机数
var rnd = function(start, end) {
    return Math.floor(Math.random() * (end - start) + start)
}

var e = function(selector) {
    return document.querySelector(selector)
}
var es = function(selector) {
    return document.querySelectorAll(selector)
}

// 点击开始闪 随机获取3个li标签，并设置颜色
var clickButton = function() {
    var button = e('.button')
    var ul = e('ul')
    var li = es('li')

    button.addEventListener('click', function(event) {
        var target = event.target
        if (target.innerHTML === '开始闪') {
            // 每秒，随机设置3个li元素的背景颜色
            window.id = setInterval(function() {
                // 恢复默认样式
                for (var i = 0; i < li.length; i++) {
                    li[i].style.backgroundColor = 'pink'
                }
                // 用于不重复的获取ul的子元素
                var l = [0, 1, 2, 3, 4, 5, 6, 7, 8]

                // 给随机三个元素随机设置背景颜色
                for (var i = 0; i < 3; i++) {
                    // 获取范围内的随机数
                    var n = rnd(0, l.length - 1)
                    // 获取l里的值(对应li元素)
                    var num = l[n]
                    // 获取随机颜色
                    var color = randomColor()
                    // 设置背景颜色
                    li[num].style.backgroundColor = color
                    // 删除用过的元素，保证不重复设置
                    l.splice(n, 1)
                }
            }, 1000)
        // 点结束停止播放
        } else if (target.innerHTML === '结束闪') {
            // 恢复默认样式
            for (var i = 0; i < li.length; i++) {
                li[i].style.backgroundColor = 'pink'
            }
            window.clearInterval(id)
        }
    })
}
clickButton()

该问题已被官方收录

定时器报错，随机出不来

1

2

事件函数

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.<button id="start">开始闪</button>
<button id="end">结束闪</button>
<script type="text/javascript">
    var div=document.getElementsByClassName('box');
    var colors=['red','plum','blue','green','cyan','black','pink','gray','brown'];
    start.onclick=function(){//点击开始
        c=setInterval(function(){//使用定时器
            start();//调用函数
        },1000)//设置时间
    }
    end.onclick=function(){//停止按钮的
        for(i=0;i<div.length;i++){//循环
            div[i].style.background="#yellow";//遍历清除颜色
        }
        clearInterval(c);//停止定时器
    }
    function start() {
        for (var i = 0; i < div.length; i++) {//每次随机颜色时遍历将背景设置好
            div[i].style.background = "#FFA600";
        }

该问题已被官方收录

如何理解洗牌算法

1

2

变量操作DOM 事件

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

function upsetOrder(arrOld, num){
          var result = [], _length = num || arrOld.length, arr;
          arr = Object.assign([], arrOld);
          for (var i=0, len=arr.length; i<len; i++){
            result.push(arr.splice(Math.floor(Math.random()*arr.length), 1)[0]);
          }
          return result;
        }
        upsetOrder(a);
        var x = upsetOrder(a);

该问题已被官方收录

这两种乱序数组的方式有什么区别吗？为何大家首推洗牌算法？

1

2

数据类型函数操作DOM

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var = num [...];//这个之前我已经做了处理，它是一个0~8的数组；
function randomNumber() {
    for (i = 0; i< num.length-1 ;i++) {
        var ran = Math.floor(Math.random()*num.length);//生成随机索引值
        var middle = num [ran];
        num [ran] = num [i];
        num[i] = middle;//设定一个中间变量middle,用于换位，
        // 将最后一位的元素和随机数进行互换位置；
     }
    return num;
}
//这是洗牌算法的乱序



var arr=[];
    for(var i=0;i<100;i++){
            arr[i]=i;
        }
    arr.sort(function(){ return 0.5 - Math.random() })
    var str=arr.join();
    alert(str);
//这是第二种乱序的方法；

该问题已被官方收录

如何避免连续按按钮多次，格子越闪越快？

2

2

操作DOM 表达式和运算符变量

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

HTML
 <input name="button" type="button" onclick="start()" value="开始闪" />
JS
var w;
function start(){
    clearInterval(w);
    w=setInterval("color()",1000);
}

该问题已被官方收录

随机颜色有时候渲染不到第三个盒子？有时候只会出现两个盒子的有颜色？

1

2

操作DOM 事件

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$(function () {
    //获取所有九宫格节点
    var nodes = $('.item');
    //设置数组，获取其中3个节点，这个函数的作用是放入数组取得相应的节点
    function getRandomArrayElements(arr, count) {//count就是取得节点的数值，我们这个任务取3
        var shuffled = arr.slice(0),//复制数组
            length = arr.length,    //获得数组长度
            min = length - count,   //获取数组剩余项
            temp, index;       
        while (length-- > min) {     //进行循环
            index = ~~((length + 1) * Math.random()); //获取整数
            temp = shuffled[index];        //获取随机数组项，存入变量temp中  
            shuffled[index] = shuffled[length]; //把数组最后一项赋值给随机项
            shuffled[length] = temp;           //数组最后一项存入temp值
        }
        return shuffled.slice(min);       //完成循环，截取最后的随机项
    }
       var interval;
    //获取随机颜色
    function bgcolors() {
        return '#' + Math.floor(Math.random() * 0xffffff).toString(16);
    }
    //开始按钮点击触发事件
    $('#startBtn').on('click', function () {
        
        if(interval){
            clearInterval(interval);
        }//如果定时器存在，清除定时器，放置点击一次按钮，出现多个interval函数
        interval = setInterval(function () { //建立interval循环函数，每1s触发一次
            nodes.css('background', '#FFF');
            var nodearr = getRandomArrayElements(nodes, 3);//获取3个随机dom节点
            for (var i = 0; i < 3; i++) {
                var bgcolor = bgcolors(); //获取随机颜色
                nodearr[i].style.background = bgcolor;
            }
        }, 1000);
    });
    //结束按钮，先清除定时器
    $('#endBtn').on('click',function(){
        clearInterval(interval);
        nodes.css('background', '#FFA500');
    })

该问题已被官方收录

经常性的，只有两个盒子变色。

2

2

事件操作DOM

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

console.log("导入JS文件")

var divarr=document.getElementsByClassName("box");
var int;
function start(){  
    clock();//立即执行 
    clearInterval(int);//防止多次点击开始，闪动加速
    int =setInterval(clock, 3000);//没1000毫秒执行一次
}//开始按钮

function bg(){
    return '#'+Math.floor(Math.random()*0xffffff).toString(16);
}//随机取颜色

function clock(){
    for (var i=0;i<divarr.length;i++){
        divarr[i].style.backgroundColor="orange";
    }//恢复颜色
    var x=Math.floor(Math.random()*9);
    var y=Math.floor(Math.random()*9);
    var z=Math.floor(Math.random()*9);
    console.log(x)
    console.log(y)
    console.log(z)
    if (x!=y&&x!=z&&y!=z){
        divarr[x].style.backgroundColor=bg();
        divarr[y].style.backgroundColor=bg();
        divarr[z].style.backgroundColor=bg();
    }
    else{
        clock();
    }
}

function stop(){
    clearInterval(int);
    for (var i=0;i<divarr.length;i++){
        divarr[i].style.backgroundColor="orange";
    }//恢复颜色
}//停止按钮

该问题已被官方收录

写了一个随机获取三个格子的函数，有时会获取不到

1

2

函数

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var box = document.getElementsByClassName("box");
var btn1 =document.getElementById('btn1');
var btn2 =document.getElementById('btn2');
console.log (box);
// 2.随机取得小格子中的3个格子
function getArrItem(arr, num) {
    var temp_array = new Array();
    for (var index in arr) {
      temp_array.push(arr[index]);
    }
    var return_array = new Array();
    for (var i = 0; i < num; i++) {
      if (temp_array.length > 0) {
        var arrIndex = Math.floor(Math.random() * temp_array.length);
        //将此随机索引的对应的数组元素值复制出来 
        return_array[i] = temp_array[arrIndex];
        //然后删掉此索引的数组元素,这时候temp_array变为新的数组 
        temp_array.splice(arrIndex, 1);
      } else {
        break;
      }
    }
    return return_array;
  }
 console.log( getArrItem(box, 3));

该问题已被官方收录

九宫格闪烁重复

2

2

控制流程语句

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 if (one == two) {
        one = Math.floor(Math.random() * list.length);
    } else if (two == three) {
        two = Math.floor(Math.random() * list.length);
    } else if (one == three) {
        three = Math.floor(Math.random() * list.length);
    }

去第页

Copyright ©2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1