JavaScript学习-Dom(练习)

最新推荐文章于 2023-05-28 00:26:55 发布

_Kayo_

最新推荐文章于 2023-05-28 00:26:55 发布

阅读量297

点赞数

分类专栏：前端文章标签： javascript 学习 css

本文链接：https://blog.csdn.net/mashirokayo/article/details/126519436

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一个简单的小游戏，点击开始会在页面上随机刷新图片，点击图片，图片会消失。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        html,body{
            height: 100%;
            width: 100%;
        }
        .total_page{
            height: 100%;
            width: 100%;
        }
        .time_count{
            margin: 0 auto;
            width: 200px;
            height: 50px;
            border:2px solid black;
            box-sizing:content-box;
        }
        .timer{
            width: 0px;
            height: 50px;
            /* margin: 0 auto; */
            background-color: pink;

        }

        .game_content{
            margin-top:60px;
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }
        /* 1 position定位和margin可以一起用吗 */
        .button{
            
            width: 200px;
            height: 50px;
            /* background-color: aqua; */
            position:fixed;
            bottom: 10%;
            left:50%;
            transform:translate(-50%,-50%);
        }
        /* 2 导航栏除了float别的方法 水平垂直的方法  */
        .start{
            margin-right: 10px;
            /* height: 50px; */
            width: 60px;
            margin-top:10px;
            /* background-color: black; */
            float: left;
        }
        .stop{
            margin-right: 10px;
            /* height: 50px; */
            margin-top:10px;
            width: 60px;
            /* background-color: blue; */
            float: left;
        }
        .end{
            margin-top:10px;
            /* height: 50px; */
            width: 60px;
            /* background-color: brown; */
            float: left;
        }

        .say{
            width: 190px;
            height: 50px;
            /* background-color: aqua; */
            position:fixed;
            bottom: 5%;
            left:50%;
            transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="total_page">
        <div class="time_count">
            <div class="timer">

            </div>
        </div>

        <div class="game_content">

        </div>

        <div class="button">
            <div class="start">
                <button class="b_start">开始</button>
            </div>

            <div class="stop">
                <button class="b_stop">停止</button>
            </div>

            <div class="end">
                <button class="b_end">结束</button>
            </div>
        </div>

        <div class="say">
            <span>已经进行了0秒,剩余100秒</span>
        </div>
    </div>

    <script>
        
        let canv = document.querySelector(".game_content");
        let t = document.querySelector("span"); 
        let b_start = document.querySelector(".b_start");
        let b_end = document.querySelector(".b_end");
        let b_stop = document.querySelector(".b_stop");
        let time_bar = document.querySelector(".timer");
        let tot_time = 0;
        let t1,t2;

        // console.log(b_start);

        function updata_img(){
            // console.log("1111");
            let img = document.createElement("img");
            img.src = "1.png";
            let now_width = (0.5+Math.random()) * 100;
            // let now_height = Math.random() * 100;
            img.style.width = `${now_width}px`;
            // img.style.height = `${now_height}px`;
            img.style.position = "relative";
            let left = Math.random() * (window.innerWidth-200) + 100;
            let top = Math.random() * (window.innerHeight-600) + 100;
            img.style.left = ` ${left }px `;
            // img.style.right = ` ${Math.random() * window.innerWidth }px `;
            img.style.top = `${top }px`;
            // img.style.buttom = `${Math.random() * window.innerHeight }px`;
            img.onclick = delete_img;
            canv.appendChild(img);  
            // console.log(canv.childNodes);  
        }

        b_start.onclick = function(){
            game();
        }

        b_stop.onclick = function(){
            clearInterval(t1);
            clearInterval(t2);
        }

        b_end.onclick = function(){
            tot_time = 0;
            clearInterval(t1);
            clearInterval(t2);
            let all_img = document.querySelectorAll("img");
            let num = all_img.length;
            for(let i = 0;i<num;++i){
                all_img[i].parentNode.removeChild(all_img[i]);
            }
            time_bar.style.width = "0px";
            t.innerText = `已经进行了${tot_time}秒，剩余${100-tot_time}秒`;
            
        }

        function delete_img(){
            this.parentNode.removeChild(this);
        }

        function update_time(){
            ++tot_time;
            t.innerText = `已经进行了${tot_time}秒，剩余${100-tot_time}秒`;
            //获取元素之后怎么进行css操作
            console.log(time_bar);
            time_bar.style.width = `${tot_time*2}px` ;
            // console.log(time_bar.width)
        }

        function game(){
            tot_time = 0;
            t1 = setInterval(
                // setInterval里放函数不能写()
                update_time
            ,1000);
            t2 = setInterval(
                updata_img
            , 500);
        }

        
    </script>
</body>
</html>

感觉就是还需要练习呀，虽然昨天看了DOM的一些方法，但是今天敲的时候发现基本都忘了。

问题总结：

1 只记得怎么获取节点了，操作CSS和绑定事件的方法已经忘了orz

操作节点DOM的CSS的方法：

 <script>
    *.style.cssText = "width: 666px; color: red";
    *.style.setProperty("width", "666px");
    *.style.width="666px";
</script>

给DOM节点绑定事件

<script>
    *.onclick = function;
</script>

2 然后就是一些我不知道的知识点了

2.1 删除DOM节点的方法

<script>
    all_img[i].parentNode.removeChild(all_img[i]);
</script>

2.2 CSS中margin和position一起使用

<script>
    //这里好像是知识盲区了，设置了Position之后margin好像没生效
    //会特意研究一下原因单独发博客
</script>

3.3 横线排布用的是float，感觉还应该再巩固一下怎么做排成一排的布局

感觉还是要多写吧，不然真的不会。。

_Kayo_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习-Dom(练习)

JS-Dom练习
复制链接

扫一扫

专栏目录

JavaScript学习-Dom(练习)

“相关推荐”对你有帮助么？