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

用JavaScript修改CSS属性有哪几种方法；

0

1

js基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<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="go()" id="start">开始闪</button>
    <button onclick="end()">结束闪</button>
    <script src="task1 .js"></script>
</body>

任务一为什么一进去就有不一样的颜色

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    //将随机出来的盒子，赋值color函数出来的随机颜色
    while (one == two || two == three || three == one) {
        var one = boxGet[first].style.backgroundColor = color();
        var two = boxGet[second].style.backgroundColor = color();
        var three = boxGet[third].style.backgroundColor = color();
    }
    //return one, two ,three 
};
//console.log(box())  


//声明一个全局变量，进行定时器之间的参数传输
var time

function start() {
    clearInterval(time); //点击按钮之前清除定时器，避免多次点击出现堆积
    time = setInterval(function () {
        for (var j = 0; j < 9; j++) {
            boxGet[j].style.backgroundColor = "orange"
        };

        box() //在定时器内执行box函数，进行随机盒子+随机颜色工作

    }, 1000) //延时1秒
};


function end() {
    clearInterval(time) //点击end关闭后，定时器被清除，停止工作
    for (var j = 0; j < 9; j++) {
        boxGet[j].style.backgroundColor = "orange"
    };
};

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

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

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

如何把三种不同的随机颜色添加到三个随机盒子上？

1

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

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

function getRandom(minNum,maxNum,count) {
    var numArr=[],num;
    for(var i=0;i<count;i++) {
        do {
            num=Math.floor(Math.random()*maxNum);
        }while(numArr.indexOf(num)>-1);
        numArr.push(num);
    }
    return numArr;
}

for的作用、用处

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = [];
var ranNum = 5;
for (var i = 0; i < ranNum; i++) {
var ran = Math.floor(Math.random() * arr.length);

放在页面的js复制到js文件就不生效了

0

1

js基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* 获取所有div */
var timer2 = null;
var myNodelist = document.querySelectorAll("div");
var btn = document.querySelectorAll("button");
/* 随机颜色的函数 */
function color() {
    return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6)
}
/* 变色函数 */
function Time() {
    var randomArray = []; //声明一个数组
    for (var i = 0; i < myNodelist.length; i++) {
        myNodelist[i].style.background = "orange";
    } // 重置每个div的颜色为
    for (var i = 0; i < 3; i++) {
        var randomLoc = Math.floor(Math.random() * (myNodelist.length));
        if (randomArray.indexOf(randomLoc) < 0) {
            randomArray.push(randomLoc);
        } else {
            i--;
        }
    } //  给数组取三个不重复的数字
    myNodelist[randomArray[0]].style.background = color();
    myNodelist[randomArray[1]].style.background = color();
    myNodelist[randomArray[2]].style.background = color();

}

function start() {
    if (start.className == "") {
        start.className = "orange"
        clearInterval(timer2);
        timer2 = setInterval("Time()", 1000);
    }
}

function stop() {
    clearInterval(timer2);
    start.className = "";
    for (var i = 0; i < myNodelist.length; i++) {
        myNodelist[i].style.background = "orange";
    }

}

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

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

如何将随机获取的三个数与小格子链接起来？

0

1

操作DOM

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var box=document.getElementsByClassName("box")//获取九宫格DOM

//获取三个随机数
function boxnum() {
    var box = [0, 1, 2, 3, 4, 5, 6, 7, 8];//定义box数组
    var newbox = [];//定义新数组
    var runnam = 3;
    for (k = 0; k < runnam; k++) {
        var ran = Math.round(Math.random() * (box.length - 1));//获取1-8内的随机数并取整
        newbox.push(box[ran]);//将获取的数放入新数组
        box.splice(ran, 1);//删除原数组里的随机数
    }
    console.log(newbox);
    return newbox;
}

九宫格颜色不能正常显示

1

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

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var t;

function start() {
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
    for (i = 0; i < 3; i++) {
        var a = Math.floor(Math.random() * arr.length);
        var b = Math.floor(Math.random() * arr.length);
        var c = Math.floor(Math.random() * arr.length);
        if (a !== b && a !== c && b !== c) {
            break;
        }
    }

    var square = document.getElementsByClassName("square");
    for (j = 0; j < square.length; j++) {
        square[j].style.background = "orange";
    }

    function color() {
        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 + ')";
    }

    square[a].style.background=color();
    square[b].style.background=color();
    square[c].style.background=color();


    t = setTimeout("start()", 500);

}



function stop() {
    console.log(t)
    clearInterval(t);
    var square = document.getElementsByClassName("square");
    for (h = 0; h <square.length; h++) {
        square[h].style.background = "orange";
    }

}

angularjs1 module命名以及调用问题。

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

myApp.controller("artListCtrl",function ($scope,$http) {
angular.module('myApp').controller("artListCtrl",function ($scope,$http) {