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

循环定时器

0

1

函数

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="grid">
    <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 class="btn">
    <button id="run" onclick="twinkle()">开始闪</button>
    <button id="stop" onclick="stop()">结束闪</button>
</div>



function getBox() {
    var box = document.getElementsByClassName("box");
    resent();
    //随机得到三个盒子
    for (var i = 0; i < 1000; i++) {
        var box1 = Math.floor(Math.random() * 9);
        var box2 = Math.floor(Math.random() * 9);
        var box3 = Math.floor(Math.random() * 9);
        if (box1 !== box2 && box1 !== box3 && box2 !== box3) {
            break;
        }
    }
    //随机的三个盒子改变颜色
    box[box1].style.backgroundColor = changeColor();
    box[box2].style.backgroundColor = changeColor();
    box[box3].style.backgroundColor = changeColor();
}

function resent() {
    var box = document.getElementsByClassName("box");
    for (var i = 0; i < 9; i++) {
        box[i].style.backgroundColor = "orange";
    }
}
//得到三个随机颜色
function changeColor() {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    return "rgb(" + r + "," + g + "," + b +")";
}

var time;
function twinkle() {
    time = setInterval(getBox(), 1000);
}

function stop() {
    clearInterval(time);
    resent();
}

如何取到数组前几位的值?

1

数据类型操作DOM

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

success: function (res) {
					let resd = res.data.data;
					console.log(resd.review.list);
					let lists = resd.review.list;
					console.log(lists.slice(0, 2));
					let xinlist = lists.slice(0, 2);

					that.setData({
						total: resd.review.total,
						total_percent: resd.review.total_percent,
						list: resd.review.list,
						xinlist: xinlist
					})

随机生成颜色（十六进制）

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var color = '#' + Math.random().toString(16).substr(-6);

任务1再次点击开始按钮报错

0

1

js基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="TaskOne.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <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>
    <button onclick="start()">开始闪</button>
    <button onclick="stop()">结束闪</button>

    <script>
        var backgroundColor = new Array;//随机数
        var randomNumber = new Array;//随机颜色
        var box = document.getElementsByClassName("box");
        //开始
        var time;
        function start() {
            //清除定时器
            // clearInterval(time);
           setInterval("showPic()",1000);
            // document.getElementsByTagName("button")[0].disabled = true;
        }
        function showPic() {
            for (var i = 0; i < 9; i++) {
                box[i].style.backgroundColor = "rgb(255,166,0)";
            } 
            makeColor();
            for (var i = 0; i < 3; i++) {
                box[randomNumber[i]].style.backgroundColor = backgroundColor[i];
            }
        }
        function makeColor() {
            var Numbers = new Array;//随机颜色
            var Colors = new Array;
            for (var i = 0; i >= 0; i++) {
                for (var i = 0; i < 3; i++) {
                    var a = Math.round(Math.random() * 255);
                    var b = Math.round(Math.random() * 255);
                    var c = Math.round(Math.random() * 255);
                    var color = "rgb(" + a + "," + b + "," + c + ")";
                    Colors.push(color);
                }
                if (Colors[0] != Colors[1] && Colors[1] != Colors[2] && Colors[2] != Colors[0]) {
                    backgroundColor = Colors;
                    break;
                } else {
                    Colors = [];
                }
            }
            console.log(backgroundColor);
            for (var i = 0; i >= 0; i++) {
                for (var i = 0; i < 3; i++) {
                    var Number = Math.round(Math.random() * 8);
                    Numbers.push(Number);
                }
                if (Numbers[0] != Numbers[1] && Numbers[1] != Numbers[2] && Numbers[2] != Numbers[0]) {
                    randomNumber = Numbers;
                    break;
                } else {
                    Numbers = [];  
                }

            }
            console.log(randomNumber);
        }
    </script>

</html>

数据转移bug

0

1

js基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

getBtnMin.addEventListener('click', function() {
   var i = getInputText.value;
   //玩家人数input
   getInputText.value = Number(i) + 1;
   //滑块位置
   getInputRange.value = Number(i) + 1;
   //滑块背景位置
   var n = Number(((i-3.5)/15)*100).toFixed(0) + "%";
   getInputRange.style.backgroundSize = n + ' ' + '100%';
});


   var i = getInputText.value;
   //玩家人数input
   getInputText.value = Number(i) + 1;
   //滑块位置
   getInputRange.value = Number(i) + 1;
   //滑块背景位置

   var m = getInputRange.value;

   var n = Number(((m-3.5)/15)*100).toFixed(0) + "%";
   getInputRange.style.backgroundSize = n + ' ' + '100%';

怎么实现九宫格随机颜色。

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var list = document.getElementsByClassName('dump');
function begin() {
    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!=three&&two!=three){
        orange();
        list[one].style.backgroundColor = 'rgb'+ colors();
        list[two].style.backgroundColor = 'rgb'+ colors();
        list[three].style.backgroundColor = 'rgb'+ colors();
    }
    else {
        begin()
    }
}
function colors() {
    var rgb;
    var r = Math.floor(Math.random()*265);
    var g = Math.floor(Math.random()*265);
    var b = Math.floor(Math.random()*265);
    rgb = '('+r+','+g+','+b+')';
    return rgb;
}
var int;
document.getElementById('start').onclick = function () {
var list = document.getElementsByClassName('dump');
function begin() {
    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!=three&&two!=three){
        orange();
        list[one].style.backgroundColor = 'rgb'+ colors();
        list[two].style.backgroundColor = 'rgb'+ colors();
        list[three].style.backgroundColor = 'rgb'+ colors();
    }
    else {
        begin()
    }
}
function colors() {
    var rgb;
    var r = Math.floor(Math.random()*265);
    var g = Math.floor(Math.random()*265);
    var b = Math.floor(Math.random()*265);
    rgb = '('+r+','+g+','+b+')';
    return rgb;
}
var int;
document.getElementsByClassName('start').onclick = function () {
    clearInterval(int);//停止定时器
    int=self.setInterval("begin()",1000)
}


var orange= function(){
    for (let i=0; i<list.length ;i++){
        list[i].style.background="#ffa600";
    }
};
document.getElementById('stop').onclick = function () {
    orange();
    clearInterval(int);//停止定时器
};

数组中有哪些增删改查技巧

0

1

数据类型

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

数组的增加

 

ary.push()   向数组末尾添加元素，返回的是添加后新数组的长度，原有数组改变
ary.unshift()  向数组开头添加元素，返回的是添加后新数组的长度，原有数组改变
 var ary=[1,2,3,4];
   var res=ary.unshift(6);
   console.log(res); ---->5   返回的是新数组的长度
ary.splice(n,m,x)从索引n开始删除m个元素，把新增的元素X放在索引n的前面，把删除的元素当成一个新数组返回，原有数组改变。
ary.splice(n,0,x)从索引n开始删除0个元素，把新增加的元素x放在索引n的前面，返回的是一个空数组，原有数组改变。
ary.splice(n,m)从索引n开始删除m个元素，把删除的内容当做新数组返回，原有数组改变
splice(0,0,x)----->unshift
 

数组的删除

ary.pop() 删除数组的最后一项，返回的是删除的那一项，原有数组改变
ary.shift() 删除数组的的第一项，返回的是删除的那一项，原有数组改变
var ary=[5,8,3,4,6];
var res=ary.shift();
console.dir(res);---->5 返回数组第一项
删除数组最后一项的内容 ary.splice(ary.length-1,1)  //ary.length-1 数组最后一项的内容         ary.length-=1     ary.length--
    var ary=[5,8,3,4,6];
//     ary.splice(ary.length-1,1);
//     ary.length-=1;
      console.dir(ary);---->输出的是[5,8,3,4]
数组的查询和复制

slice(n,m)从索引n开始，找到索引m处，把找到的内容作为新的数组返回，原有数组不改变        
slice(n-1,m)把数组的第n项到第m项提取出来
slice(n) 从索引n开始查找到数组末尾
slice(0) slice() 将原有数组复制一份 属于数组克隆  
concat() 也可以实现数组克隆   
concat的本意是实现数组的拼接 ary.concat(ary2) 把两个数组进行拼接
数组转化为字符串

tostring把数组的每一项拿出来用逗号隔开，原有数组不变
join("+")把数组的每一项拿出来用指定分隔符隔开
数组求和
var ary=[5,8,3,4,6];
var str=ary.join("+");
var total=eval(str);
console.dir(total);  //将指定字符串变成真正的表达式执行
 var ary=[5,8,3,4,6];
      var total=0;
     for(var i=0;i<ary.length;i++){
         total+=ary[i];
     }
     console.dir(total);  
数组的排列和排序

reverse() 把数组倒过来排序，原有数组改变
sort 可以实现由大到小或者由小到大的排序 但是直接写sort只能排序十以内的数字  ary.sort(function(a,b){return (a-b);})
一些常用的方法 但是不兼容

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
foreach
map