请输入关键字进行搜索...

程序员鸡皮

文章 分类 评论
60 3 9
联系我
the theme is by @冷文学习者

站点介绍

一名PHP全栈程序员的日常......

重学Javascript基础（九）DOM相关的API操作

abzzp 2024-10-07 260 0条评论 前端 JavaScript

首页 / 正文
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......

发布于2024-07-04

01.DOM的第一个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 哈哈哈哈 -->
     普通的文本
     <div class="box">
        <h2>我是标题</h2>
        <p>我是内容,哈哈哈哈哈哈</p>
     </div>

     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
     </ul>

     <input type="text">
     <button name="why"></button>

     <script>
        HTMLElement
        HTMLDivElement
        HTMLLIElement
        HTMLInputElement

        var boxEl = document.body.children[0]
        console.log(boxEl)
        boxEl.style.color = "red"

        boxEl.children[0].style.fontSize = "100px"
        boxEl.children[0].nextSibling.style.color = "orange"
     </script>
</body>
</html>

02.网页的对象模型-节点之间的导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 我是注释,哈哈哈 -->
     我是文本,呵呵呵
     <div class="box">哈哈哈哈哈哈</div>
     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
     </ul>
     <script>
        // var htmlEl = document.documentElement
        // var bodyEl = document.body
        // var headEl = document.head
        // var doctype = document.doctype
        // console.log(htmlEl,bodyEl,headEl,doctype)

        // 1.获取节点的导航
        var bodyEl = document.body
        // 1.1 获取body所有的子节点
        console.log(bodyEl.childNodes)
        // 1.2 获取body的第一个子节点
        var bodyElFirstChild = bodyEl.firstChild
        // 1.3 获取body中的注释
        var bodyElCommentChild = bodyElFirstChild.nextSibling
        console.log(bodyElCommentChild)
        // 1.4 获取body的父节点
        var bodyParent = bodyEl.parentNode
        console.log(bodyParent)
        
     </script>
</body>
</html>

03.网页的对象模型-元素之间的导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- 我是注释, 哈哈哈 -->
  我是文本, 呵呵呵

  <div class="box">哈哈哈哈哈</div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script>
    var body = document.body
    // 根据body元素去获取子元素(element)
    var childElements = bodyEl.children
    console.log(childElements)

    // 获取box元素
    var boxEl1 = bodyEl.firstElementChild
    var boxEl2 = bodyEl.children[0]
    console.log(boxEl1,boxEl2,boxEl1 === boxEl2)

    // 获取ul元素
    var ulEl = boxEl1.nextElementSibling
    console.log(ulEl)

    // 获取li元素
    var liEls = ulEl.children
    console.log(liEls)
    
  </script>
</body>
</html>

04.Document和Element之间的关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var obj = {
            name:"why",
            age:18,
            body:document.querySelector("body")
        }
        console.log(obj.name,obj.age,obj.body)

        document.body = document.querySelector("body")
        window.body = document.querySelector("body")
        document.age = 18
    </script>
</body>
</html>

05.table元素之间的导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 高级元素:table/form -->
     <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>身高</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>why</td>
                <td>18</td>
                <td>1.88</td>
            </tr>
            <tr>
                <td>kobe</td>
                <td>30</td>
                <td>1.98</td>
            </tr>
        </tbody>
     </table>

     <script>
        var tableEl = document.body.firstElementChild

        // 通过table元素获取内部的后代元素
        console.log(tableEl.tHead,tableEl.tBodies,tableEl.tFoot)
        console.log(tableEl.rows)

        // 拿到一行元素
        var rowEl = tableEl.rows[2]
        console.log(rowEl.cells[0])
        console.log(rowEl.sectionRowIndex)
        console.log(rowEl.rowIndex)
        
     </script>
</body>
</html>

06.form元素之间的导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <form action="">
        <input name="account" type="text">
        <input name="password" type="password">
        <input name="hobbies" type="checkbox" checked>
        <select name="fruits">
          <option value="apple">苹果</option>
          <option value="orange">橘子</option>
        </select>
    </form>
     
    <script>
        // 1.获取form
        // var formEl = document.body.firstElementChild
        var formEl = document.forms[0]

        // 2.获取form中的子元素
        var inputEl = formEl.elements.account
        setTimeout(function(){
            console.log(inputEl.value)
        },5000)
    </script>
</body>
</html>

07.table的导航案例练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
          border-collapse: collapse;
        }
    
        td {
          border: 1px solid #000;
          padding: 8px 12px;
        }
      </style>
</head>
<body>
    <table>
        <tr>
          <td>1-1</td>
          <td>2-1</td>
          <td>3-1</td>
          <td>4-1</td>
        </tr>
        <tr>
          <td>1-2</td>
          <td>2-2</td>
          <td>3-2</td>
          <td>4-2</td>
        </tr>
        <tr>
          <td>1-3</td>
          <td>2-3</td>
          <td>3-3</td>
          <td>4-3</td>
        </tr>
        <tr>
          <td>1-4</td>
          <td>2-4</td>
          <td>3-4</td>
          <td>4-4</td>
        </tr>
      </table>
      <script>
        var tableEl = document.body.firstElementChild
        // // 1.获取1-1
        // var row1El = tableEl.rows[0]
        // var cell1El = row1El.cells[0]
        // console.log(cell1El)

        // // 2.获取2-2
        // var row2El = tableEl.rows[1]
        // var cell2El = row2El.cells[1]
        // console.log(cell2El)
        for(var i=0;i<tableEl.rows.length;i++){
            var rowEl = tableEl.rows[i];
            var cellEl = rowEl.cells[i];
            
            cellEl.style.backgroundColor = "red"
            cellEl.style.color = "white"
        }
      </script>
</body>
</html>

08.DOM获取任意的元素对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <h2>我是标题</h2>
        <div class="container">
          <p>
            我是段落, <span class="keyword">coderwhy</span> 哈哈哈哈
          </p>
          <p>
            我也是段落, <span class="keyword">kobe</span> 呵呵呵呵额
          </p>
    
          <div class="article">
            <h3 id="title">我是小标题</h3>
            <p>
              我是文章的内容, 嘿嘿嘿嘿嘿
            </p>
          </div>
        </div>
    </div>
    <script>
        // 一.通过导航获取
        // 1.拿到body
        var bodyEl = document.body
        // 2.拿到box
        var boxEl = bodyEl.firstElementChild
        // 3.拿container
        var containerEl = boxEl.children[1]
        // 4.拿p
        var pEl = containerEl.children[0]
        // 5.拿到keyword
        var spanEl = pEl.children[0]
        spanEl.style.color = "red"

        // 二.getElementBy*
        // 1.通过className获取元素
        var keywordEls = document.getElementsByClassName("keyword")
        // 修改第一个
        keywordEls[0].style.color = "red"
        // 修改所有的
        for(var i = 0;i<keywordEls.length;i++){
            keywordEls[i].style.color = "red"
        }

        // 2.通过id获取元素
        var titleEl = document.getElementById("title")
        titleEl.style.color = "orange"

        // 三.querySelector:通过选择器查询
        var keywordEl = document.querySelector(".keyword")
        // keywordEls是对象,可迭代的
        // 可迭代对象:String/数组/节点的列表
        var keywordEls = document.querySelectorAll(".keyword")
        for(var el of keywordEls){
            el.style.color = "red"
        }
        console.log(keywordEls)

        var titleEl = document.querySelector("#title")
        titleEl.style.color = "orange"
        
    </script>
</body>
</html>

09.节点Node常见的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 我是注释 -->
     我是文本
     <div class="box">
        <h2>我是标题</h2>
        <p>我是内容, 哈哈哈哈</p>
      </div>
      <script>
        // 1.获取三个节点
        var bodyChildNodes = document.body.childNodes
        var commentNode = bodyChildNodes[1]
        var textNode = bodyChildNodes[2]
        var divNode = bodyChildNodes[3]
        // 2.节点属性
        // 2.1 nodeType 节点的类型
        for(var node of bodyChildNodes){
            if(node.nodeType === 8){

            }else if(node.nodeType === 3){

            }else if(node.nodeType === 1){

            }
        }
        console.log(commentNode.nodeType,textNode.nodeType,divNode.nodeType) // 8 3 1
        console.log(Node.COMMENT_NODE)

        // 2.2 nodeName 节点的名称
        // tagName:针对元素(element)
        console.log(commentNode.nodeName, textNode.nodeName, divNode.nodeName)
        console.log(commentNode.tagName, divNode.tagName)

        // 2.3 data(nodeValue)/innerHTML/textContent
        // data针对非元素节点获取元素
        // innerHTML:对应的html元素也会获取
        // textContent:只会获取文本内容
        // console.log(commentNode.data,textNode.data,divNode.data)
        // console.log(divNode.innerHTML)
        // console.log(divNode.textContent)

        // 设置文本,作用是一样
        // 设置文本中包含元素内容,那么innerHTML浏览器会解析,textContent会当成文本的一部分
        // divNode.innerHTML = "<h2>呵呵呵</h2>"
        // divNode.textContent = "<h2>嘿嘿嘿</h2>"

        // 2.4 outerHTML
        console.log(divNode.outerHTML)
      </script>
</body>
</html>

10.元素的全局属性-hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn">切换</button>

    <!-- hidden属性 -->
  <div id="box" class="cba" title="aaa" style="color: red">
    哈哈哈哈哈
  </div>
  <script>
    // 1.获取元素
    var boxEl = document.querySelector("#box")
    var btnEl = document.querySelector(".btn")

    // 2.监听btn的点击
    btnEl.onclick = function(){
        // 1.只是隐藏
        // boxEl.hidden = true
        // boxEl.style.display = "none"

        // // 2.切换
        // boxEl.hidden = false
        // if(boxEl.hidden === false){
        //     boxEl.hidden = true
        // }else{
        //     boxEl.hidden = false
        // }

        // 3.直接取反
        boxEl.hidden = !boxEl.hidden
    }
  </script>
</body>
</html>

11.元素Element-Attribute分类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 属性:attribute(特性) -->
     <!-- attribute的分类:
       1.如果是HTML标准定制的attribute,称之为标准Attribute
       2.而自定义的Attribute,称之为非标准Attribute -->
       <div id="abc" class="box" title="box" age="18" height="1.88">
        我是box
       </div>
       <a href="https://www.baidu.com">百度一下</a>
</body>
</html>

12.元素Element-Attribute操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="abc" class="box" title="box" age="18" height="1.88">我是box</div>

    <input type="checkbox" checked="checked">

    <script>
        var boxEl = document.querySelector(".box")

        // 1.所有的attribute都支持的操作
        console.log(boxEl.hasAttribute("AGE"),boxEl.hasAttribute("abc"),boxEl.hasAttribute("id"))
        console.log(boxEl.getAttribute("AGE"),boxEl.getAttribute("abc"),boxEl.getAttribute("id"))

        boxEl.setAttribute("id","cba")
        boxEl.removeAttribute("id")

        var boxAttributes = boxEl.attributes
        for(var attr of boxAttributes){
            console.log(attr.name,attr.value)
        }

        // 2.通过getAttribute()一定是字符串类型
        var inputEl = document.querySelector("input")
        console.log(inputEl.getAttribute("checked"))
        
    </script>
</body>
</html>

13.元素Element-Property操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 1.元素中的属性称之为attribute -->
     <!-- 标准的attribute在对应的对象模型中都有对应的property -->
     <div id="abc" class="box" title="标题"
        age="18" height="1.88">
        我是box
    </div>

    <input type="checkbox" checked>

    账号: <input class="account" type="text">
    <button class="btn">设置input的值</button>
    <script>
        // 对象中的属性称之为property
        var obj = {
            // property
            name:"why"
        }

        // 1.通过property获取attribute的值
        // 获取box元素
        var boxEl = document.querySelector(".box")
        console.log(boxEl.id,boxEl.title,boxEl.age,boxEl.height)

        // input 元素
        var inputEl = document.querySelector("input")
        // if (inputEl.getAttribute("checked")) {
        //   console.log("checkbox处于选中状态")
        // }
        if(inputEl.checked){
            console.log("checkbox处于选中状态")
        }
        console.log(typeof inputEl.checked)

        // 2.attribute和property是相互影响的
        boxEl.id = "aaaaaa"
        console.log(boxEl.getAttribute("id"))

        boxEl.setAttribute("title","哈哈哈")
        console.log(boxEl.title)

        // 3.比较特殊的情况,input设置值(了解)
        var accountInputEl = document.querySelector(".account")
        var btnEl = document.querySelector(".btn")
        btnEl.onclick = function(){
            accountInputEl.setAttribute("value","kobe")
            // 优先级更高
            accountInputEl.value = "coderwhy"
        }
        
    </script>
</body>
</html>

14.元素Element-class和style区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
          color: red;
          font-size: 24px;
          background-color: green;
        }
      </style>
</head>
<body>
    <div class="box">
        我是box
      </div>
    <script>
        // 1.获取boxEl
        var boxEl = document.querySelector(".box")
        // 2.监听点击
        var counter = 1
        boxEl.onclick = function(){
            // 1.直接修改style
            // boxEl.style.color = "red"
            // boxEl.style.fontSize = "24px"
            // boxEl.style.backgroundColor = "green"

            // 2.动态的添加某个class
            boxEl.className = "active"

            // 3.动态的修改boxEl的宽度
            boxEl.style.width = 100 * counter + "px"
            counter++
        }
    </script>
</body>
</html>

15.元素Element-class的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
          color: #fff;
          background-color: #f80;
          font-size: 25px;
        }
      </style>
</head>
<body>
    <div class="box">
        我是box
      </div>
      <button class="btn">切换</button>
      <script>
        var boxEl = document.querySelector(".box")
        // 1.方法一:className
        boxEl.classList = "abc"

        // var obj = {}
        // obj.name = "abc"
        // obj.class = "hahahaha"
        // obj.var = 123
        // console.log(obj)

        // 2.方法二:classList操作class
        boxEl.classList.add("abc")
        boxEl.classList.add("active")
        boxEl.classList.remove("abc")

        // 需求:box在active之间切换
        var btnEl = document.querySelector(".btn")
        btnEl.onclick = function(){
            // if(boxEl.classList.contains("active")){
            //     boxEl.classList.remove("active")
            // }else{
            //     boxEl.classList.add("active")
            // }

            boxEl.classList.toggle("active")
        }
      </script>
</body>
</html>

16.元素Element-style的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" style="background-color: aqua; color: white;">
        我是box
      </div>
      <script>
        var boxEl = document.querySelector(".box")

        // 1.在property中使用驼峰格式
        console.log(boxEl.style.backgroundColor)

        // 2.如果将一个属性的值设置为空的字符串，那么是使用默认值
        boxEl.style.display = ""
        boxEl.style.fontSize = ""

        // 3.设置多个样式
        boxEl.style.fontSize = "30px"
        boxEl.style.color = "red"
        boxEl.style.cssText = "font-size:30px;color:red;"
      </script>
</body>
</html>

17.元素Element-style的读取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
          font-size: 20px;
        }
      </style>
</head>
<body>
    <div class="box" style="background-color: red;">
        我是box
      </div>
    <script>
        var boxEl = document.querySelector(".box")
        console.log(boxEl.style.backgroundColor)
        // console.log(boxEl.style.fontSize)
        console.log(getComputedStyle(boxEl).fontSize)
    </script>
</body>
</html>

18.元素Element-dataset使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="abc" class="box" 
       data-age="18" data-height="1.88"></div>
    <script>
        var boxEl = document.querySelector(".box")
        // 小程序开发中使用
        console.log(boxEl.dataset.age)
        console.log(boxEl.dataset.height)
    </script>
</body>
</html>

19.元素Element-创建-插入元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>111111</span>

  <div class="box">
    <span class="box-first">呵呵呵呵</span>
    <p>哈哈哈哈哈</p>
  </div>
  <script>
    var boxEl = document.querySelector(".box")
    // 1.通过innerHTML（不推荐）
    boxEl.innerHTML = `<h2 class="title">我是标题</h2>`
    // 2.真实创建一个DOM对象
    var h2El = document.createElement("h2")
    h2El.className = "title"
    h2El.classList.add("active")
    h2El.textContent = "我是标题"

    // 将元素插入boxEl
    // boxEl.append(h2El)
    // boxEl.prepend(h2El)
    // boxEl.after(h2El)
    // boxEl.before(h2El)
    // boxEl.replaceWith(h2El,"abc")

    // 插入到span和p元素之间
    var spanEl = document.querySelector("span")
    var spanEl = boxEl.children[0]

    var spanEl = boxEl.querySelector("span")
    spanEl.after(h2El)
  </script>
</body>
</html>

20.元素Element-移除-克隆元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="remove-btn">移除box</button>
    <button class="clone-btn">复制box</button>
  
    <div class="box">
      <h2>我是标题</h2>
      <p>我是文本, 哈哈哈哈哈</p>
    </div>
    <script>
        // 1.获取元素
        var boxEl = document.querySelector(".box")
        var removeBtnEl = document.querySelector(".remove-btn")
        var cloneBtnEl = document.querySelector(".clone-btn")

        // 2.监听removeBtn的点击
        removeBtnEl.onclick = function(){
            boxEl.remove()
        }

        // 3.复制box
        var counter = 0
        cloneBtnEl.onclick = function(){
            var newNode = boxEl.cloneNode(true)
            newNode.children[0].textContent = "我是标题"+counter
            // boxEl.after(newNode)
            document.body.append(newNode)
            counter++
        }
    </script>
</body>
</html>

21.元素Element-大小-位置信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
          padding: 100px;
        }
    
        .box {
          width: 100px;
          height: 100px;
          padding: 20px;
          border: 10px solid red;
          /* box-sizing: border-box; */
          background-color: orange;
    
          overflow: auto;
        }
      </style>
</head>
<body>
    <div class="box">
        你去过国内最美的地方是哪# 我去过国内最美的地方是新疆喀纳斯。喀纳斯是一个美丽而神秘的地方，这里群山环抱，森林密布，湖水清澈，风景奇特。为国家级5A级景区，国家地质公园，国家森林公园。
      </div>
    <script>
        var boxEl = document.querySelector(".box")

        // 1.获取样式（局限性很强）
        var boxStyle = getComputedStyle(boxEl)
        console.log(boxStyle.width,boxStyle.height)

        // 2.获取更多信息
        console.log(boxEl.clientWidth)
        console.log(boxEl.clientHeight)

        console.log(boxEl.clientLeft)
        console.log(boxEl.clientTop)

        console.log(boxEl.offsetWidth)
        console.log(boxEl.offsetHeight)

        console.log(boxEl.offsetLeft)
        console.log(boxEl.offsetTop)

        console.log(boxEl.scrollHeight)
        console.log(boxEl.scrollTop)

        // window对象
        window.onclick = function(){
            console.log(boxEl.scrollTop)
        }
    </script>
</body>
</html>

22.窗口-window-大小-滚动信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
          /* width: 2000px; */
          height: 100px;
          background-color: orange;
        }
    
        .scroll-btn {
          position: fixed;
          right: 20px;
          bottom: 20px;
          /* display: none; */
        }
      </style>
</head>
<body>
    <div class="box"></div>
  <button class="scroll-btn">回到顶部</button>

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <script>
        // window大小
        console.log(window.outerWidth)
        console.log(window.outerHeight)

        console.log(window.innerWidth)
        console.log(window.innerHeight)

        console.log(document.documentElement.offsetWidth)
        console.log(document.documentElement.offsetHeight)

        // 获取window的滚动区域
        window.onclick  = function(){
            console.log(window.scrollX)
            console.log(window.scrollY)
        }

        var scrollBtnEl = document.querySelector(".scroll-btn")
        scrollBtnEl.hidden = true
        window.onscroll = function(){
            var scrollY = window.scrollY
            if(scrollY > 600){
                // scrollBtnEl.style.display = "block"
                scrollBtnEl.hidden = false
            } else {
                // scrollBtnEl.style.display = "none"
                scrollBtnEl.hidden = true
            }
        }

        // 点击按钮后滚动到某个位置
        scrollBtnEl.onclick = function(){
            // window.scrollBy(0.100)
            window.scrollTo(0,0)
        }
    </script>
</body>
</html>

23.案例的练习-输入动态列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>动态创建列表</h1>
    <ul class="list"></ul>
    <script>
        var ulEl = document.querySelector(".list")
        var isFlag = true
        while(isFlag){
            var message = prompt("请输入信息：")
            if(!message){
                // 没用输入内容

            }else{
                var liEl = document.createElement("li")
                liEl.textContent = message
                ulEl.append(liEl)
            }
        }
    </script>
</body>
</html>

24.案例的练习-动态显示时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 class="time">2022-05-19 11:14:30</h1>
    <script>
        // 封装了工具函数
        function padLeft(content,count,padStr){
            count = count || 2
            padStr = padStr || "0"

            countent = String(content)
            return countent.padStart(count,padStr)
        }

        // 1.获取时间的元素
        var timeEl = document.querySelector(".time")
        setInterval(() => {
            // 2.获取具体时间并进行格式化
            var date = new Date()
            var year = date.getFullYear()
            var month = padLeft(date.getMonth()+1)
            var day = padLeft(date.getDate())
            var hour = padLeft(date.getHours())
            var minute = padLeft(date.getMinutes())
            var second = padLeft(date.getSeconds())

            // 3.将时间放入到timeEl中
            timeEl.textContent = `${year}-${month}-${day} ${hour}:${minute}:${second}`
        }, 1000);

        // 补充String方法
        // var str = "124"
        // console.log(str.padStart(4,"0"))
    </script>
</body>
</html>

25.案例的练习-倒计时的显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .countdown {
          color: #f00;
          font-size: 20px;
        }
    
        .countdown .time {
          background-color: #f00;
          color: #fff;
          display: inline-block;
          padding: 5px;
          border-radius: 3px;
        }
      </style>
</head>
<body>
    <div class="countdown">
        <span class="time hour">03</span>
        <span class="split">:</span>
        <span class="time minute">25</span>
        <span class="split">:</span>
        <span class="time second">43</span>
    </div>

    <script src="./js/format.js"></script>
    <script>
        // 1.获取元素
        var hourEl = document.querySelector(".hour")
        var minuteEl = document.querySelector(".minute")
        var secondEl = document.querySelector(".second")

        var endDate = new Date()
        endDate.setHours(24)
        endDate.setMinutes(0)
        endDate.setSeconds(0)
        endDate.setMilliseconds(0)

        setInterval(() => {
            // 获取倒计时的销售  -分钟-秒钟
            // 11：53：22 =》 24：00：00
            var nowDate = new Date()
            var intervalTime = Math.floor((endDate.getTime() - nowDate.getTime()) / 1000)
            console.log(intervalTime)

            // 43324:x小时x分钟x秒钟
            var hour = Math.floor(intervalTime / 3600)
            var minute = Math.floor(intervalTime / 60) % 60
            var second = intervalTime % 60

            // 设置内容
            hourEl.textContent = formatPadLeft(hour)
            minuteEl.textContent = formatPadLeft(minute)
            secondEl.textContent = formatPadLeft(second)
        }, 1000);

        // 125:x百x十x个
        // var num = 125
        // console.log(Math.floor(num/10 * 10))
        // console.log(Math.floor(num/10) % 10)
        // console.log(num % 10)
    </script>
</body>
</html>

感谢大家观看，我们下次见

版权所属: abzzp
本文链接: https://xvzhu.cn/archives/54.html
协议授权: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》
下一篇 上一篇

评论(0)

最新评论

  • abzzp

    十天看一部剧，还可以吧[[呲牙]]

  • ab

    @梦不见的梦 行，谢谢提醒,我优化一下

  • 梦不见的梦

    网站的速度有待提升，每次打开都要转半天还进不来呢

  • abzzp

    @React实战爱彼迎项目(二) - 程序员鸡皮 哪里有问题了，报错了吗？[[微笑]]

  • abzzp

    @Teacher Du 那是怕你们毕不了业，我大学那会儿给小礼品[[发呆]]

  • Teacher Du

    我们大学那会，献血还给学分~

  • 夜

    @ab 我想去学网安，比如网警，但分也贼高😕

  • ab

    @夜 加油，你一样也可以成为程序员的，需要学习资料可以V我

  • 夜

    佬发布的好多技术文章似乎我只能评论这篇，真正的程序员！！哇塞 我也想去献血，过两年就成年了可以去献血了

日历

2024年11月

日一二三四五六
     12
3456789
10111213141516
17181920212223
24252627282930

标签云

vue JavaScript React Golang 观后感 ES6 读后感

友情链接

云烟博客 白雾茫茫丶 时光日志 boys博客

文章目录

推荐关键字： vue JavaScript React Golang 观后感 ES6 读后感

站点公告
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......
点击小铃铛关闭
配色方案
高贵黑
默认配色
墨蓝色
优雅白