WebAPIs-day1

Rookie_wbe

已于 2022-05-07 22:24:31 修改

阅读量625

点赞数 1

分类专栏： Web API实用案例文章标签： javascript 前端

于 2022-04-10 12:34:07 首次发布

本文链接：https://blog.youkuaiyun.com/JOUKELOVE/article/details/124072494

版权

Web API实用案例专栏收录该内容

7 篇文章

订阅专栏

课程主要内容：
操作DOM BOM，比如控制网页元素交互等各种网页交互效果
在这里插入图片描述

DOM树：

在这里插入图片描述

DOM对象：

// 我们现在学的都叫原生JS，JQuery是处理过的。
在这里插入图片描述
DOM的核心思想：
把网页内容当作对象来处理

button在html中是一个标签，被JS拿过来之后就是一个DOM对象，以对象的形式来存储。

document是DOM里面最大的一个对象

第一个重点：获取DOM对象

文档地址：

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

选择器都是匹配第一个元素，如果想要其他元素，如上图所示。
在这里插入图片描述

// 由于获取多个DOM元素，所以使用querySelectorAll而不用querySelector，为了输出li而使用遍历来实现。
<body>
    <ul class="nav">
        <li>我的首页</li>
        <li>产品介绍</li>
        <li>联系方式</li>
    </ul>
    <script>
        let re = document.querySelectorAll('.nav li')
        for (let i = 0; i < re.length;i++) {
            console.log(re[i])
        }
    </script>
</body>

了解一下：
在这里插入图片描述

innerText和innerHTML的区别是innerHTML可以识别标签（如图中的strong标签）

    <style>
        div {
            display: inline-block;
            width: 150px;
            height: 30px;
            border: 1px solid pink;
            vertical-align: middle;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>
<body>
    抽中的选手是：<div></div>
    <script>
        // 1.获取元素
        let box = document.querySelector('div')
        // 2.得到随机的名字
        function getRandom(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min
		}
        // 声明一个数组
        let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
        
        // 生成1个随机数
		let random = getRandom(0, arr.length - 1)
        // 3. 写入标签内部
        box.innerHTML = arr[random]
        
        // 之后删除这个人的名字
        arr.splice(random, 1)
    </script>

在这里插入图片描述

<body>
    <img src="./images/1.webp" alt="">
    <script>
        // 1. 获取图片元素
        let pic = document.querySelector('img')
        // 2. 随机得到图片序号
        function getRandom(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min
		}
        let random = getRandom(1, 6)
        // 3.完成src 属性赋值
        pic.src = `./images/${random}.webp`
        pic.title = '这是一个图片'
    </script>
</body>

在这里插入图片描述

    <style>
        body {
            background-image: url(./images/desktop_1.jpg);
            width: 100%;
            height: 100%;
        }
        
    </style>
</head>
<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>

在这里插入图片描述

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .active {
            width: 300px;
            height: 300px;
            background-color: hotpink;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
    // 1. 获取元素
        let box = document.querySelector('div')
    // 2. 设置样式
    // box.style.width = '300px'
        box.className = 'active'
    </script>

className因为“=”，active会覆盖原来的样式
想同时赋值样式的话：如下
在这里插入图片描述
同时拥有one和active样式

s'd

<body>

    <input type="password" value="请输入">
    <button disabled>按钮</button>
    <input type="checkbox" name="" id="" class="agree">
    
    <script>
        let input = document.querySelector('input')
        // console.log(input.value)
        input.value = '小米手机'
        input.type = 'password'
        let btn = document.querySelector('button')
        btn.disabled = false  // 给按钮添加disabled使得其无法点击，而对其进行false定义后就是取消了无法点击的属性
        let checkbox = document.querySelector('.agree')
        checkbox.checked = true // true和false的区别在于，不定义或者false的话，点选框是正常的，true则直接默认成功点选
    </script>
</body>

在这里插入图片描述

基本使用：
定时器一开始，永不停歇，除非设置其他限制条件。
注意单位是毫秒，1s = 1000ms

<script>
        // 1.直接使用定时器配合匿名函数把代码写到里面
       /*  setInterval(function(){
            document.write('高薪就业')
        },1000) */

        // 2.先定义函数再让定时器调用，注意show是不加括号的，是调用
        function show() {
            console.log('月薪过两万')
        }
        let timer = setInterval(show, 1000)  // timer是一个数字型
    </script>

在这里插入图片描述

案例-倒计时

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

    <script>
        // 1. 获取元素 button
        let btn = document.querySelector('.btn')
        // 2. 计算逻辑
        // 2.1  我们需要一个变量  用来计数
        let i = 6
        // 2.2  开启定时器 间歇函数  timer
        let timer = setInterval(function() {
            i--
            btn.innerHTML = `我已经阅读用户协议(${i})`
            if (i === 0 ) {
                // 不走了，清除定时器
            clearInterval(timer)
            // 开启按钮
            btn.disabled = false 
            // 更换文字
            btn.innerHTML = `我已经阅读用户协议`
        }
        }, 1000)
    </script>
</body>

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐10屏轮播图</title>
    <style>
        .img-box {
            width: 700px;
            height: 320px;
            margin: 50px auto 0;
            background: #000;
            position: relative;
        }

        .img-box .tip {
            width: 700px;
            height: 53px;
            line-height: 53px;
            position: absolute;
            bottom: 0px;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 10;
        }

        .img-box .tip h3 {
            width: 82%;
            margin: 0;
            margin-right: 20px;
            padding-left: 20px;
            color: #98E404;
            font-size: 28px;
            float: left;
            font-weight: 500;
            font-family: "Microsoft Yahei", Tahoma, Geneva;
        }

        .img-box .tip a {
            width: 30px;
            height: 29px;
            display: block;
            float: left;
            margin-top: 12px;
            margin-right: 3px;
        }

        .img-box ul {
            position: absolute;
            bottom: 0;
            right: 30px;
            list-style: none;
            z-index: 99;
        }
    </style>
</head>

<body>
    <div class="img-box">
        <img class="pic" src="images/b01.jpg" alt="第1张图的描述信息">
        <div class="tip">
            <h3 class="text">挑战云歌单，欢迎你来</h3>
        </div>
    </div>

    <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: '我用整颗心来等你'
            },
        ]
        
        // 1. 获取元素  图片 和 h3
        let text = document.querySelector('.text')
        let pic = document.querySelector('.pic')
        // i 记录图片的张数
        let i = 0
        // 2. 开启定时器
        let timer = setInterval(function() {
            i++
            // 修改图片的src属性
            pic.src = data[i].imgSrc
            // 修改文字内容
            text.innerHTML = data[i].title
            
            // 无缝衔接
            if (i === data.length - 1 ) {
                i = -1
            }
            // 也可以使用三元表达式达成无缝衔接
            // i === 8 ? i = -1 : i
        },1000)
    </script>
</body>

</html>

在这里插入图片描述