DOM操作实例练习

奶粉罐没粉

已于 2022-09-01 02:24:12 修改

阅读量1k

点赞数 1

文章标签： html javascript

于 2022-09-01 02:23:41 首次发布

本文链接：https://blog.csdn.net/qq_62089165/article/details/126627595

版权

一、请控制台依次输出 3个 li 的 DOM对象

<body>
    <ul>
        <li>我的首页</li>
        <li>产品介绍</li>
        <li>联系方式</li>
    </ul>
//快速写法 ul>li{$}*3
    <script>
        let mark = document.querySelectorAll('ul li')
        for (let i = 0; i < mark.length; i++){
            document.write(mark[i])
        }
    </script>
</body>

二、设置/修改DOM元素内容

<body>
    <div>
        粉红色的回忆
    </div>
    <script>
        let mark = document.querySelector('div')
        //修改元素，不能识别标签
        mark.innerText = '就只是粉色而已'
        //修改元素，可以识别标签
        mark.innerHTML = '<strong>就只是粉色而已</strong>'
    </script>
</body>

三、随机抽取的名字显示到指定的标签内部

需求：将名字放入span 盒子内部

分析： ①：获取span 元素

②：得到随机的名字

③：通过innerText 或者 innerHTML 讲名字写入元素内

<style>
    div {
        display: inline-block;
        width: 150px;
        height: 30px;
        border: 1px solid pink;
        vertical-align: middle;
        text-align: center;
        line-height: 30px;
    }
</style>
<body>
    抽中的选手：<div></div>
    <script>
        let box = document.querySelector('div')
        function getRandom(min,max){
        return Math.floor(Math.random() * (max - min + 1)) +  min
    }
        let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
        let random = getRandom(0,arr.length-1)
        box.innerHTML = arr[random]
        arr.splice(random,1)
    </script>
</body>

四、页面刷新，图片随机更换

<style>
    img {
        width: 500px;
        height: 311px;
    }
</style>
<body>
    <img src="./images/1.webp" title="这是一张图片">
    <script>
        //获取图片对象
        let pic = document.querySelector('img')
        //随机得到图片序号
        function getRandom(min,max){
        return Math.floor(Math.random() * (max - min + 1)) +  min}
        let random = getRandom(1,6)
        //修改路径
        pic.src = `./images/${random}.webp`   
    </script>
</body>

五、页面刷新，页面随机更换背景图片

需求：当我们刷新页面，页面中的背景图片随机显示不同的图片

分析： ①：随机函数

②： css页面背景图片 background-image

③：标签选择body，因为body是唯一的标签，可以直接写 document.body.style

<style>
    body{
        background: url(./images/desktop_1.jpg);
    }

</style>
<body> 
    <script>
        function getRandom(min,max){
        return Math.floor(Math.random() * (max - min + 1)) +  min}
        let random = getRandom(1,10)
        document.body.style.backgroundImage = `url(./images/desktop_${random}.jpg)`
    </script>
</body>

六、倒计时效果

需求：按钮60秒之后才可以使用案例

分析： ①：开始先把按钮禁用（disabled 属性）

②：一定要获取元素

③：函数内处理逻辑秒数开始减减按钮里面的文字跟着一起变化如果秒数等于0 停止定时器里面文字变为同意最后按钮可以点击

<textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br>
    <button class="btn">我已经阅读用户协议(60)</button>
    <script>
        let bt = document.querySelector('.btn')
        bt.disabled = true
        let i = 6 
        let timer = setInterval(function(){
            i--
        },1000)
        bt.innerHTML = `我已经阅读用户协议(${i})`
        if (i === 0){
            clearInterval(timer)
            bt.disabled = false
            btn.innerHTML = '同意'
        }
    </script>

七、综合案例-网页轮播图效果案例

需求：每隔一秒钟切换一个图片

分析： ①：获取元素（图片和文字）

②：设置定时器函数设置一个变量++ 更改图片张数更改文字信息

③：处理图片自动复原从头播放如果图片播放到最后一张就是第9张则把变量重置为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">
    <link rel="stylesheet" type="text/css" href="ys.css">
    <title>QQ音乐焦点图</title>
</head>
<style>
    img {
        width: 600px;
        height: 300px;
        margin: 0px ;
        padding: 0px;
        margin-left: 29%;
    }
    span {
        margin: 0px;
        width: 595px;
        height: 26px;
        background: gray;
        color: white;
        display: inline-block;
        margin-left: 29%;
        position: relative;
        bottom: 10px;
        padding-top: 4px;
        padding-left: 5px;
    }


</style>
<body> 
    <img class="pic"src="./images/b01.jpg" title="轮播图">
    <span class="text">第一张图的描述信息</span>
    <script>
         // 数据
         let data = [
            {
                imgSrc: 'images/b01.jpg',
                title: '挑战云歌单，欢迎你来'
            },
            {
                imgSrc: 'images/b02.jpg',
                title: '田园日记，上演上京记'
            },
            {
                imgSrc: 'images/b03.jpg',
                title: '甜蜜攻势再次回归'
            },
            {
                imgSrc: 'images/b04.jpg',
                title: '我为歌狂，生为歌王'
            },
            {
                imgSrc: 'images/b05.jpg',
                title: '年度校园主题活动'
            },
            {
                imgSrc: 'images/b06.jpg',
                title: 'pink老师新歌发布，5月10号正式推出'
            },
            {
                imgSrc: 'images/b07.jpg',
                title: '动力火车来到西安'
            },
            {
                imgSrc: 'images/b08.jpg',
                title: '钢铁侠3，英雄镇东风'
            },
            {
                imgSrc: 'images/b09.jpg',
                title: '我用整颗心来等你'
            },
        ]
        //获取元素
        let photo = document.querySelector('.pic')
        let biaoti = document.querySelector('.text')

        let i = 0
        setInterval(function(){
            i++
            photo.src = data[i].imgSrc 
            biaoti.innerHTML = data[i].title
            if (i === data.length - 1){
            i = -1
        }
        },1000)
    </script>
        
    
</body>
</html>