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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

如何取三个不同的随机数？

6

17

操作DOM 函数表达式和运算符数据类型

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

function getRandomColor() {
    return 'rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';
}

该问题已被官方收录

多次点击“开始闪”按钮后为什么会有很多格子都开始闪？

5

8

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

function stopBox() {
    for(var i=0;i<=8;i++){
      Box[i].style.background='orange';
    }
    clearInterval(startbox);
    panD=1;
}

该问题已被官方收录

格子颜色开始随机的时候会随机三个橙色

2

7

函数操作DOM

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/*首先取出这九个格子*/
var box = document.getElementsByClassName("box");

/*遍历9个格子重置颜色*/
function reset() {
    for (var i = 0; i < box.length; i++) {
        box[i].style.background = "#fea500";
    }
}

/*做一个随机颜色函数返回随机颜色*/
function color() {
    var r, g, b;
    r = Math.floor(Math.random() * 256);
    g = Math.floor(Math.random() * 256);
    b = Math.floor(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

/*开始闪*/
function change() {//随机抽取三个格子变色
    reset();
    var a = [];//定义一个放格子下标的空数组

    for (var i = 0; i < 3; i++) {//遍历空数组并在空数组存放格子下标0~8中任意的三个
        a[i] = Math.floor(Math.random() * 9);
    }

    if (a[0] != a[1] && a[0] != a[2] && a[1] != a[2]) {//如果抽出的任意三个下标互不相等则将这三个下标所对应的格子变色
        box[a[0]].style.background = color();
        box[a[1]].style.background = color();
        box[a[2]].style.background = color();
    }


}

var z;//定义一个名叫z的全局变量
function start() {//触发变色
    clearInterval(z);//停止周期调用函数
    z = setInterval("change()", 1000);//将周期调用函数放入z变量并直接触发
}

/*结束闪*/
function stop() {//停止变色并重置
    clearInterval(z);//停止周期调用函数
    reset();
}

该问题已被官方收录

完成盒子随机后，绝大部分情况下是出现三个盒子变色的，但是偶尔却只会出现两个盒子；

2

4

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<body>
<div class="max">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="btn1">开始闪</div>
<div id="btn2">结束闪</div>

<script src="task1.js"></script>

var box = document.getElementsByClassName("box");
var start = document.getElementById("btn1");
var stop = document.getElementById("btn2");
var time;
function color() {
    var rgb;
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);
    rgb = 'rgb('+r+','+g+','+b+')';
    return rgb;
}
function getbox() {
    var one = Math.floor(Math.random()*list.length);
    var two = Math.floor(Math.random()*list.length);
    var three = Math.floor(Math.random()*list.length);
    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);

        box[one].style.backgroundColor = color();
        box[two].style.backgroundColor = color();
        box[three].style.backgroundColor = color();

    }
start.onclick = function () {
    this.style.backgroundColor = "#ffa500";
    this.style.color = "#fff";
    stop.style.backgroundColor = "#fff";
    stop.style.color = "#ffa500";
    clearInterval(time);
    time = setInterval(function(){
         for(var i = 0; i < 9; i++){
            box[i].style.backgroundColor = "";
         }
          getbox();
         },1000);
};
stop.onclick = function () {
    this.style.backgroundColor = "#ffa500";
    this.style.color = "#fff";
    start.style.backgroundColor = "#fff";
    start.style.color = "#ffa500";
    clearInterval(time);
    for(var i=0; i<9; i++){
            box[i].style.backgroundColor = "";
    }
};

该问题已被官方收录

js如何获取Dom节点以及操作Dom节点？

2

4

操作DOM

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var square=document.getElementsByClassName("square");//获取9个正方节点
square[1].style.background = '#8DE3A4';
square[4].style.background = '#C6734A';
square[7].style.background = '#F6CAFB';

该问题已被官方收录

代码运行出现节点报错

2

3

操作DOM

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var box = document.getElementsByClassName("box");
var vacancy = [];//
~function sub() {
    for(i = 0;i < box.length; i++){
        vacancy.push(i);
    }
}()//给空数组排下标
console.log(vacancy);
function ranDomNum() {
    for(i = 0;i < d; i++){
    var vacancy = [];
    var d = 9;
    var c = Math.round(Math.random()*(a.length));
    var a = [0,1,2,3,4,5,6,7,8];
    vacancy.push(a[c]);
    a.splice(c,1);

    }
    return vacancy;
}
ranDomNum();

function randomColor() {
    r = Math.round(Math.random()*255);
    g = Math.round(Math.random()*255);
    b = Math.round(Math.random()*255);
    return "rgb("+ r +","+ g +","+ b +")";
    if("rgb("+ r +","+ g +","+ b +")"
        === "rgb(255,166,0)") {
        return randomColor();
    }
    else{
        return "rgb("+ r +","+ g +","+ b +")";
    }
}
randomColor();//获取随机颜色

function Color() {
    for(i = 0;i < box.length-1;i++){
        box[i].style.backgroundColor = "#ffa600";
    }
}
Color()//重置颜色

function Result() {
    ranDomNum();
    Color();
    console.log(ranDomNum());
    console.log(Color());
    box[vacancy[0]].style.backgroundColor = randomColor();
    box[vacancy[1]].style.backgroundColor = randomColor();
    box[vacancy[2]].style.backgroundColor = randomColor();
    console.log(vacancy[0]);
}

该问题已被官方收录

js实现九宫格的随机颜色跳转不回去了

1

3

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

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    function start() {
        for (var i = 0; i < div.length; i++) {//每次随机颜色时遍历将背景设置好
            document.getElementsByTagName('div')[i].style.background = "yellow";
        }
    var arr=new Array(3);
    var arr1=new Array(3);
    for(var i=0;i<arr.length;i++) {
        var a= parseInt(Math.random()*9);
        console.log(a);
        if (i==0) {
            arr[i] = a;
        } else {
            for (var j = 0; j < i; j++) {
                if (a == arr[j]) {
                    i--
                }
                else {
                    arr[i] = a;
                }
            }
        }
    }
for (var i=0;i<arr1.length;i++){
        var a=parseInt(Math.random()*9);
        if(i==0){
            arr1[i]=a;
        }
        else {
            for(var j=0;j<i;j++){
                if (a==arr1[j]){
                    i--
                }
                else {
                    arr1[i]=a;
                }
            }
        }
}
console.log(arr1);
for (var i=0;i<arr.length;i++){
        document.getElementsByTagName('div')[arr[i]].style.background=colors[arr1[i]];
}
    }

该问题已被官方收录

随机取颜色的两种方法

1

2

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

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

function(){
    var arr =  [0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F];
    var new_arr = [] ;
    for(i = 0 ; i < 6;i++){
      z  =  Math.floor(Math.random()*16) ;
      new_arr.push(arr[z]);
 }
}

function getcolor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}

该问题已被官方收录

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

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

数据类型函数操作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);
//这是第二种乱序的方法；

去第页

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