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

如何在angular模态框中创建关闭按钮

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

如图

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

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);//停止定时器
};

typeof 疑问

0

1

js基础变量

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var name;
name = 'jin';
console.log(typeof name);
name=1;
console.log(typeof name);

数据转移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

操作DOM

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

   clearInterval(startButton);

    startButton = setInterval("changeColor()", 1000);

    document.getElementsByTagName("button")[0].disabled=true;

任务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>

循环定时器

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();
}