8.22 学习日志

最新推荐文章于 2022-02-12 10:23:52 发布

DA_CHUAN_

最新推荐文章于 2022-02-12 10:23:52 发布

阅读量140

点赞数 1

文章标签： js 学习日志

本文链接：https://blog.csdn.net/DA_CHUAN_/article/details/100022713

版权

添加元素

div1.appendChild(newdiv)

直接在div1中添加一个newdiv元素,会添加到div1中的最后一个子节点,

div1.insertBefore(newdiv2,newdiv)

使用div1元素(父元素)进行调用,插入的新元素是newdiv2,插入在newdiv1前面, 参数1:插入的新元素参数2:插入到谁前面去

克隆一个元素,克隆其所有的元素
var div2clone=div2.cloneNode(true);
当我们要给另外一个div中添加这个div中的一个div元素,添加进去后,会把这整个元素直接迁移过去,所以在原来的地方就没有了,在新的地方出现

div2.remove()//把调用者从文档树移除:删除自己
div2.parentElement.removeChild(div2)//删除自己的儿子

获取呈现数中的样式表

var style1=window.getComputedStyle(div1)//获取元素在呈现树中的样式表

获取到div1的style样式表

height1 = parseInt(window.getComputedStyle(first).height);

获取到first元素的样式表,然后取到height属性,将其赋值给height1.

消息框弹出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .div1css{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -100px;
        background-color: red;
        width: 400px;
        height: 200px;
    }
    .div2css{
        position: absolute;
        top: 5%;
        right: 5%;
        /* margin-right: -25px;
        margin-top: -25px; */
        background-color: blueviolet;
        width: 50px;
        height: 50px;
    }
    .div3css{
        position: absolute;
        top: 10%;
        right: 10%;
        /* margin-right: -25px;
        margin-top: -25px; */
        background-color: blueviolet;
        width: 50px;
        height: 50px;
    }
    </style>

</head>

<body>
    <!-- <div class="div1">


    </div> -->
    <script>
    var div1=document.createElement("div");
    div1.classList.add("div1css");
    document.body.appendChild(div1)
    var div2=document.createElement("div");
    div2.classList.add("div2css");
    div2.innerHTML="取消";
    div1.appendChild(div2);
    var div3=document.createElement("div");
    div3.classList.add("div3css");
    div3.innerHTML="显示";
    document.body.appendChild(div3)
    
    // var div_display=div1.cloneNode(true);


    //点击取消
    div2.onclick=function(){
        div2.parentElement.remove();

    }
    //点击显示
    div3.onclick=function(){
        document.body.appendChild(div1);

    }

    </script>


</body>
</html>

扑克牌

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1css {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -250px;
            background-color: red;
            width: 400px;
            height: 500px;
        }

        .div2css {
            position: absolute;
            top: 5%;
            left: 5%;
            /* margin-right: -25px;
        margin-top: -25px; */
            background-color: blueviolet;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .div3css {
            position: absolute;
            bottom: 5%;
            right: 5%;
            /* margin-right: -25px;
        margin-top: -25px; */
            background-color: blueviolet;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            transform: rotate(180deg)
        }

        .div4css {
            position: absolute;
            top: 5%;
            right: 5%;
            background-color: blueviolet;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;

        }
        .div5css {
            position: absolute;
            top: 20%;
            right: 5%;
            background-color: blueviolet;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;

        }
    </style>
</head>

<body>

    <script>
        function qiehuan() {
            var pai = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "KING"];
            var pai_num = Math.round(Math.random() * 13);
            console.log(pai_num);

            var div1 = document.createElement("div");
            div1.classList.add("div1css");
            document.body.appendChild(div1)
            var div2 = document.createElement("div");
            div2.classList.add("div2css");
            div2.innerHTML = pai[pai_num];
            div1.appendChild(div2);
            var div3 = document.createElement("div");
            div3.classList.add("div3css");
            div3.innerHTML = pai[pai_num];
            div1.appendChild(div3);
            var div4 = document.createElement("div");
            div4.classList.add("div4css");
            div4.innerHTML = "隐藏";
            document.body.appendChild(div4)
            var jilu = 0;
            //隐藏
            div4.onclick = function () {
                // console.log(666);
                
                if (jilu % 2 == 0) {
                    div2.remove();
                    div3.remove();  
                }
                if (jilu % 2 == 1) {
                    div1.appendChild(div2);
                    div1.appendChild(div3);
                }
                jilu=jilu+1;

            }

        }
        qiehuan();
        //切牌
        var div5 = document.createElement("div");
            div5.classList.add("div5css");
            div5.innerHTML = "切牌";
            document.body.appendChild(div5)
        div5.onclick=function(){
            qiehuan();

        }
    </script>


</body>

</html>

随机色

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .divfirst {
            width: 300px;
            height: 100px;
            margin: 20px auto;
            border: 2px solid gray;
        }
    </style>
</head>

<body>
    <div class="beijing">

    </div>
    <script>
        var beijing1=document.querySelector(".beijing")
        for (let div_geshu = 0; div_geshu < 5; div_geshu++) {
            var div_first = document.createElement("div");
            div_first.classList.add("divfirst")
            beijing1.appendChild(div_first);
            div_first.onclick=function(){
                dianji(div_geshu);
            }
        }
        function dianji(x) {
            for(let qwe=0;qwe<div_first.parentElement.children.length;qwe++){
            div_first.parentElement.children[qwe].style.backgroundColor=bianse();

            }

                div_first.parentElement.children[x].style.backgroundColor = "white";

                // console.log(666);

            }

        function bianse(){
            let x=Math.round(Math.random()*255);
            let y=Math.round(Math.random()*255);
            let z=Math.round(Math.random()*255);
            return `rgb(${x},${y},${z})`
        }
        console.log(bianse());
        
         
    </script>



</body>

</html>

点击

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <input type="button" value="改变" class="anniu">
    <script>
        var div_jihe = document.querySelectorAll(".div1");
        var jilu = 0;
        var dianji = document.querySelector(".anniu");
        console.log(dianji);
        
    
        dianji.onclick = function () {
            console.log(666);
            
            jilu=jilu%3;
            div_jihe.forEach(el => {
                el.style.backgroundColor="yellow";
            });
            div_jihe[jilu].style.backgroundColor="red";
            jilu++;
        }
    </script>

</body>

</html>

DA_CHUAN_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.22 学习日志

添加元素div1.appendChild(newdiv)直接在div1中添加一个newdiv元素,会添加到div1中的最后一个子节点,div1.insertBefore(newdiv2,newdiv)使用div1元素(父元素)进行调用,插入的新元素是newdiv2,插入在newdiv1前面, 参数1:插入的新元素参数2:插入到谁前面去克隆一个元素,克隆其所有的元素var div...
复制链接

扫一扫