我可以将你更新哟

BOM操作、定时器、DOM的基本操作(上)、DOM的基本操作(下)

一、BOM操作

1.浏览器可视窗口尺寸
<script>
    // 获取浏览器可视窗口的宽度
    var w = window.innerWidth

    // 获取浏览器可视窗口的高度
    var h = window.innerHeight9898

    // 输出一下
    console.log(w)
    console.log(h)
  </script>
2.浏览器的弹出层
 <script>
    // 提示框
    // window.alert( '欢迎光临' )

    // 询问框
    // var res = window.confirm( '你爱我吗 ?' )

    // // // 输出返回值
    // console.log( res )

    // // 输入框
    var res = window.prompt(' 请输入您的银行卡密码 ')

    // // 输出返回值
    console.log( res )
  </script>
3.开启和关闭标签页
 <button id="on"> 开启 </button>
  <button id="off"> 关闭 </button>

  <script>
    // 开启按钮的点击事件
    on.onclick = function () {
      // 开启标签页
      window.open( 'http://www.mobiletrain.org/' )
    }

    // 关闭按钮的点击事件
    off.onclick = function () {
      // 关闭标签页
      window.close()
    }

  </script>
4.浏览器常见事件
<!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>
    body {
      width: 3000px;
      height: 3000px;
    }
  </style>
</head>
<body>

  <img src="http://upload.mobiletrain.org/2021/0224/1614152185802.jpg" alt="">

  <script>
    // // 资源加载完毕
    // window.onload = function () {
    //   console.log( '资源已经加载完毕' )
    // }


    // 窗口尺寸改变
    // window.onresize = function () {
    //   console.log( '窗口尺寸发生变化了' )
    // }


    // 滚动条位置改变
    window.onscroll = function () {
      console.log( '滚动条位置改变了' )
    }
  </script>
</body>
</html>

5.浏览器卷去的尺寸
<!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>
    body {
      width: 3000px;
      height: 3000px;
    }
  </style>
</head>
<body>

  <script>
    // 滚动条位置变化
    // window.onscroll = function () {
    //   // 有 DOCTYPE 标签
    //   // console.log( document.documentElement.scrollTop )
    //   // // 没有有 DOCTYPE 标签
    //   // console.log( document.body.scrollTop )

    //   // 兼容
    //   var height = document.documentElement.scrollTop || document.body.scrollTop
    //   console.log( height )
    // }

    window.onscroll = function () {
      // 有 DOCTYPE 标签
      // console.log( document.documentElement.scrollLeft )
      // // 没有有 DOCTYPE 标签
      // console.log( document.body.scrollLeft )

      // 兼容
      var height = document.documentElement.scrollLeft || document.body.scrollLeft
      console.log( height )
    }
  </script>
</body>
</html>

6.浏览器滚动
<!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>
    body { width: 3000px; height: 3000px; }

    button { position: fixed; bottom: 50px; right: 50px; }
  </style>
</head>
<body>

  <button id="go"> 走你 </button>

  <script>
    // // 按钮添加点击行为
    // go.onclick = function () {
    //   // 浏览器滚动到指定位置
    //   window.scrollTo( 300, 400 )
    // }


    // 按钮添加点击行为
    go.onclick = function () {
      // 浏览器滚动到指定位置
      window.scrollTo({
        left: 300,
        top: 400,
        behavior: 'smooth'
      })
    }
  </script>
</body>
</html>

二、定时器

1.间隔定时器
 <script>
    // 书写一个定时器
    setInterval(function () {

      console.log( '执行一次' )

    }, 1000)
  </script>
2.延时定时器
<script>
    // 书写一个定时器
    setTimeout(function () {

      console.log( '执行一次' )

    }, 1000)
  </script>
3. 定时器返回值
<script>
    // 书写第一个定时器
    var timer1 = setInterval(function () {}, 1000)

    // 书写第二个定时器
    var timer2 = setTimeout(function () {}, 1000)

    // 输出返回值
    console.log( 'timer1 : ', timer1 )
    console.log( 'timer2 : ', timer2 )
  </script>
4.关闭定时器
<!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>
</head>
<body>

  <button id="off">关闭定时器</button>

  <script>
    // 定时器返回值

    // 开启定时器
    // 书写第一个定时器
    var timer1 = setInterval(function () {
      console.log('间隔定时器')
    }, 1000)

    // 书写第二个定时器
    var timer2 = setTimeout(function () {
      console.log('延时定时器')
    }, 3000)

    // // 给按钮绑定点击事件
    off.onclick = function () {
      // 关闭定时器
      clearInterval(timer1)
      clearInterval(timer2)
    }
  </script>
</body>
</html>

三、DOM的基本操作(上)

1.获取元素的方式
<!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>
</head>
<body>
  <div>一号</div>
  <div class="box">二号</div>
  <div class="box content">三号</div>
  <div class="box" id="container">四号</div>

  <script>
    // 获取元素的方式

    // 根据 id 获取页面元素
    // var ele = document.getElementById( 'abc' )
    // 输出返回值
    // console.log(ele)

    // 根据类名获取页面元素
    // var eles = document.getElementsByClassName( 'box' )
    // 输出返回值
    // console.log( eles )

    // 根据标签名获取页面元素
    // var eles = document.getElementsByTagName( 'div' )
    // 输出返回值
    // console.log( eles )

    // 根据选择器获取一个
    // var ele = document.querySelector( '.box' )
    // 输出返回值
    // console.log( ele )

    // 根据选择器获取一组
    var eles = document.querySelectorAll( '.abc' )
    // 输出返回值
    console.log( eles )
  </script>
</body>
</html>

2.操作元素文本内容
<button>操作内容</button>

  <div>
    <p>文本内容</p>
  </div>


  <script>
    // 操作元素文本内容

    // 获取元素
    // var ele = document.querySelector( 'div' )
    // var btn = document.querySelector( 'button' )

    // // 获取元素的文本内容
    // console.log( ele.innerText )

    // // 给 按钮 绑定点击事件
    // btn.onclick = function () {

    //   // 设置 div 内的文本内容
    //   ele.innerText = '新内容'

    // }


    // 获取元素
    var ele = document.querySelector( 'div' )
    var btn = document.querySelector( 'button' )

    // 获取元素的文本内容
    console.log( ele.innerHTML )

    // 给 按钮 绑定点击事件
    btn.onclick = function () {

      // 设置 div 内的文本内容
      ele.innerHTML = '新内容'

    }
  </script>
  
3.操作元素属性
<button>操作属性</button>
  <div id="box" hello="world">div 标签</div>

  <script>
    // 操作元素属性

    // 原生属性
    // 获取元素
    var box = document.querySelector( 'div' )
    var inp = document.querySelector( 'input' )
    var btn = document.querySelector( 'button' )

    // // 获取元素属性
    // console.log( box.id )
    // console.log( inp.type )

    // // 给按钮绑定点击事件
    // btn.onclick = function () {
    //   // 修改元素属性
    //   box.id = 'content'
    //   inp.type = 'checkbox'
    // }


    // 获取自定义属性
    var res = box.getAttribute( 'hello' )
    console.log( res )

    // 给按钮绑定点击事件
    btn.onclick = function () {
      // 修改自定义属性
      box.removeAttribute( 'hello', '新来的' )
    }
  </script>
4.操作元素类名
<button>操作类名</button>
  <div class="content">文本内容</div>

  <script>
    // 操作元素类名

    // 获取元素
    var box = document.querySelector( 'div' )
    var btn = document.querySelector( 'button' )

    // 获取类名
    console.log( box.className )

    // 给 按钮 绑定点击事件
    btn.onclick = function () {

      // 设置 div 内的类名
      box.className = '新内容'

    }
  </script>
5.操作元素样式
<!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>
    div {
      font-size: 20px;
    }
  </style>
</head>
<body>

  <button>操作样式</button>
  <div style="width: 100px; height: 100px; background-color: pink;">文本内容</div>

  <script>
    // 操作元素样式

    // 获取元素
    var box = document.querySelector( 'div' )
    var btn = document.querySelector( 'button' )

    // 获取样式
    console.log( box.style.width )
    console.log( box.style.height )
    console.log( box.style.backgroundColor )

    // 给 按钮 绑定点击事件
    btn.onclick = function () {

      // 设置 div 的样式
      box.style.width = '200px'
      box.style.height = '300px'
      box.style.backgroundColor = 'skyblue'

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

6.操作元素非行内样式
<!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>
    div {
      font-size: 20px;
    }
  </style>
</head>
<body>

  <button>操作类名</button>
  <div style="width: 100px; height: 100px; background-color: pink;">文本内容</div>

  <script>
    // 操作元素类名

    // 获取元素
    var box = document.querySelector( 'div' )
    var btn = document.querySelector( 'button' )

    // 获取样式
    console.log( window.getComputedStyle(box).width )
    console.log( window.getComputedStyle(box).height )
    console.log( window.getComputedStyle(box).fontSize )

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

四、案例

1.回到顶部
<!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>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      height: 3000px;
    }

    .header {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      color: #fff;
      background-color: skyblue;

      transition: top .5s linear;

      position: fixed;
      top: -80px;
      left: 0;
    }

    .goTop {
      width: 50px;
      height: 50px;
      background-color: pink;
      font-size: 20px;
      text-align: center;
      line-height: 25px;
      color: #fff;

      position: fixed;
      bottom: 50px;
      right: 50px;

      display: none;
    }
  </style>
</head>
<body>
  <div class="header">顶部通栏</div>
  <div class="goTop">回到顶部</div>

  <script>
    // 1. 获取元素
    var header = document.querySelector('.header')
    var goTop = document.querySelector('.goTop')

    // 2. 绑定滚动事件
    window.onscroll = function () {
      // 2-1. 获取浏览器卷去的高度
      var height = document.documentElement.scrollTop || document.body.scrollTop

      // 2-2. 判断卷去的高度
      if (height >= 300) {
        // 显示
        header.style.top = '0px'
        goTop.style.display = 'block'
      } else {
        // 隐藏
        header.style.top = '-80px'
        goTop.style.display = 'none'
      }
    }

    // 3. 绑定点击事件
    goTop.onclick = function () {
      // 3-1. 让页面滚动回到顶部
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  </script>
</body>
</html>

2.全选
<!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>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 100px;
      padding: 20px;
      border: 1px solid pink;
      margin: 30px auto;
      border-radius: 5px;
    }

    hr {
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <div class="box">
    全选 : <input type="checkbox"> <br>
    <hr>
    <input type="checkbox"> 选项一 <br>
    <input type="checkbox"> 选项二 <br>
    <input type="checkbox"> 选项三 <br>
    <input type="checkbox"> 选项四 <br>
  </div>

  <script>
    // 1. 获取元素
    var allBtn = document.querySelector('input')
    var items = document.querySelectorAll('input:nth-child(n + 2)')

    // 2. 给全选按钮绑定事件
    allBtn.onclick = function () {
      // 2-1. 拿到自己的选中状态
      var type = allBtn.checked

      // 2-2. 把自己的选中状态设置给每一个选项按钮
      for (var i = 0; i < items.length; i++) {
        items[i].checked = type
      }
    }

    // 3. 循环给每一个选项按钮绑定点击事件
    for (var i = 0; i < items.length; i++) {
      // 3-1. 给每一个选项按钮绑定点击事件
      items[i].onclick = function () {
        // 3-2. 首先定义假设变量, 假设所有按钮都是选中的
        var flag = true

        // 3-3. 通过循环来验证我们的假设
        for (var j = 0; j < items.length; j++) {
          if (items[j].checked === false) {
            flag = false
            break
          }
        }

        // 3-4. 把我们得到的结果设置给全选按钮
        allBtn.checked = flag
      }
    }
  </script>
</body>
</html>

3.选项卡
<!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>
    * {
      margin: 0;
      padding: 0;
    }

    ul, ol, li {
      list-style: none;
    }

    .box {
      width: 600px;
      height: 400px;
      border: 3px solid pink;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
    }

    .box > ul {
      height: 60px;
      display: flex;
    }

    .box > ul > li {
      flex: 1;
      color: #fff;
      background-color: skyblue;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .box > ul > li.active {
      background-color: orange;
    }

    .box > ol {
      flex: 1;
      position: relative;
    }

    .box > ol > li {
      width: 100%;
      height: 100%;
      background-color: purple;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 100px;

      position: absolute;
      left: 0;
      top: 0;

      display: none;
    }

    .box > ol > li.active {
      display: flex;
    }
  </style>
</head>
<body>
  <div class="box">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  </div>

  <script>
    // 1. 获取元素
    var btns = document.querySelectorAll('ul > li')
    var tabs = document.querySelectorAll('ol > li')

    // 2. 给 btns 里面所有按钮添加点击事件
    btns.forEach(function (item, index) {

      item.onclick = function () {

        // 2-2. 给 btns 和 tabs 里面的所有内容取消 active 类名
        btns.forEach(function (t, i) {
          t.className = ''
          tabs[i].className = ''
        })

        // 2-3. 当前点击的按钮和索引对应的盒子添加 active 类名
        item.className = 'active'
        tabs[index].className = 'active'

      }

    })

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

五、DOM的基本操作(下)

1.创建节点
  <script>
    // 创建一个 div 标签
    var div = document.createElement('div')

    // 控制台输出
    console.log(div)

  </script>
2.插入节点
<div>
    <p>我是 div 内本身的 p 标签</p>
  </div>

  <script>
    // // 创建一个 span 标签
    // var span = document.createElement('span')
    // // 向 span 内添加一些文本内容
    // span.innerText = '我是创建出来的 span 标签'
    // // 输出一下
    // console.log(span)

    // // 获取到页面上的 div 元素
    // var div = document.querySelector('div')
    // // 把创建的 span 标签插入到 div 内部
    // div.appendChild(span)



    // 创建一个 span 标签
    var span = document.createElement('span')
    // 向 span 内添加一些文本内容
    span.innerText = '我是创建出来的 span 标签'
    // 输出一下
    console.log(span)

    // 获取到页面上的 div 元素
    var div = document.querySelector('div')
    // 获取到 div 内部本身的 p 标签
    var p = document.querySelector('p')
    // 把创建的 span 标签插入到 div 内部, 并且放在 p 标签的前面
    div.insertBefore(span, p)
  </script>
3.删除节点
<div>
    <p>我是 div 内部本身的 p 标签</p>
    <span>我是 div 内部本身的 span 标签</span>
  </div>

  <script>
    // // 获取到 div 元素
    // var div = document.querySelector('div')
    // // 获取到 p 元素
    // var p = document.querySelector('p')

    // // 从 div 内删除 p 元素
    // div.removeChild(p)


    // 获取到 div 元素
    var div = document.querySelector('div')

    // 把 div 删除
    div.remove()
  </script>
4.替换节点
<div>
    <p>我是 div 内的 p 标签</p>
    <span>我是 div 内的 span 标签</span>
    <p>我是 div 内的 p 标签</p>
  </div>

  <script>
    // 创建一个 i 标签
    var i = document.createElement('i')
    // 向 i 标签内添加一些文本
    i.innerText = '我是创建出来的 i 标签'

    // 获取到 div 元素
    var div = document.querySelector('div')
    // 获取到 span 元素
    var span = document.querySelector('span')
    // 使用创建的 i 标签去替换 div 内本身的 span 标签
    div.replaceChild(i, span)
  </script>
5.克隆节点
 <div>
    <p>我是 div 内的 p 标签</p>
  </div>

  <script>
    // 获取 div 元素
    var div = document.querySelector('div')

    // 克隆一个 div 元素, 不克隆后代元素
    var clone1 = div.cloneNode(false)
    // 克隆一个 div 元素, 克隆后代元素
    var clone2 = div.cloneNode(true)

    // 输出
    console.log('不克隆后代节点 : ', clone1)
    console.log('克隆后代节点 : ', clone2)
  </script>

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
JavaScript `Map` 和 `WeakMap`详细解释跳房子的前端 JavaScript 原生方法 javascript 前端开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
切换淘宝最新npm镜像源是 hai40587 npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
高性能javascript--算法和流程控制海淀萌狗
-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
JavaScript中秋快乐！ Q_w7742 javascript 开发语言 ecmascript
我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
华雁智科前端面试题因为奋斗超太帅啦前端笔试面试问题整理 javascript 开发语言 ecmascript
1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
分布式锁和spring事务管理暴躁的鱼锁及事务分布式 spring java
最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
前端CSS面试常见题剑亦未配妥前端面试前端 css 面试
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
【JS】前端文件读取FileReader操作总结程序员-张师傅前端前端 javascript 开发语言
前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
C/C++Win32编程基础详解视频下载择善Zach 编程 C++Win32
课题视频：C/C++Win32编程基础详解视频知识：win32窗口的创建 windows事件机制主讲：择善Uncle老师学习交流群：386620625 验证码：625 --
Guava Cache使用笔记 bylijinnan java guava cache
1.Guava Cache的get/getIfPresent方法当参数为null时会抛空指针异常我刚开始使用时还以为Guava Cache跟HashMap一样，get(null)返回null。实际上Guava整体设计思想就是拒绝null的，很多地方都会执行com.google.common.base.Preconditions.checkNotNull的检查。 2.Guava
解决ora-01652无法通过128（在temp表空间中） 0624chenhong oracle
解决ora-01652无法通过128（在temp表空间中）扩展temp段的过程一个sql语句后，大约花了10分钟，好不容易有一个结果，但是报了一个ora-01652错误，查阅了oracle的错误代码说明：意思是指temp表空间无法自动扩展temp段。这种问题一般有两种原因：一是临时表空间空间太小，二是不能自动扩展。分析过程：既然是temp表空间有问题，那当
Struct在jsp标签不懂事的小屁孩 struct
非UI标签介绍：控制类标签： 1：程序流程控制标签 if elseif else <s:if test="isUsed"> <span class="label label-success">True</span> </
按对象属性排序换个号韩国红果果 JavaScript 对象排序
利用JavaScript进行对象排序，根据用户的年龄排序展示 <script> var bob={ name;bob, age:30 } var peter={ name;peter, age:30 } var amy={ name;amy, age:24 } var mike={ name;mike, age:29 } var john={
大数据分析让个性化的客户体验不再遥远蓝儿唯美数据分析
顾客通过多种渠道制造大量数据，企业则热衷于利用这些信息来实现更为个性化的体验。分析公司Gartner表示，高级分析会成为客户服务的关键，但是大数据分析的采用目前仅局限于不到一成的企业。挑战在于企业还在努力适应结构化数据，疲于根据自身的客户关系管理（CRM）系统部署有效的分析框架，以及集成不同的内外部信息源。然而，面对顾客通过数字技术参与而产生的快速变化的信息，企业需要及时作出反应。要想实
java笔记4 a-john java
操作符 1，使用java操作符操作符接受一个或多个参数，并生成一个新值。参数的形式与普通的方法调用不用，但是效果是相同的。加号和一元的正号（+）、减号和一元的负号（-）、乘号（*）、除号（/）以及赋值号（=）的用法与其他编程语言类似。操作符作用于操作数，生成一个新值。另外，有些操作符可能会改变操作数自身的
从裸机编程到嵌入式Linux编程思想的转变------分而治之：驱动和应用程序 aijuans 嵌入式学习
笔者学习嵌入式Linux也有一段时间了，很奇怪的是很多书讲驱动编程方面的知识，也有很多书将ARM9方面的知识，但是从以前51形式的（对寄存器直接操作，初始化芯片的功能模块）编程方法，和思维模式，变换为基于Linux操作系统编程，讲这个思想转变的书几乎没有，让初学者走了很多弯路，撞了很多难墙。笔者因此写上自己的学习心得，希望能给和我一样转变
在springmvc中解决FastJson循环引用的问题 asialee 循环引用 fastjson
我们先来看一个例子： package com.elong.bms; import java.io.OutputStream; import java.util.HashMap; import java.util.Map; import co
ArrayAdapter和SimpleAdapter技术总结百合不是茶 android SimpleAdapter ArrayAdapter 高级组件基础
ArrayAdapter比较简单，但它只能用于显示文字。而SimpleAdapter则有很强的扩展性，可以自定义出各种效果 ArrayAdapter;的数据可以是数组或者是队列 // 获得下拉框对象 AutoCompleteTextView textview = (AutoCompleteTextView) this
九封信 bijian1013 人生励志
有时候，莫名的心情不好，不想和任何人说话，只想一个人静静的发呆。有时候，想一个人躲起来脆弱，不愿别人看到自己的伤口。有时候，走过熟悉的街角，看到熟悉的背影，突然想起一个人的脸。有时候，发现自己一夜之间就长大了。 2014，写给人
Linux下安装MySQL Web 管理工具phpMyAdmin sunjing PHP Install phpMyAdmin
PHP http://php.net/ phpMyAdmin http://www.phpmyadmin.net Error compiling PHP on CentOS x64 一、安装Apache 请参阅http://billben.iteye.com/admin/blogs/1985244 二、安装依赖包 sudo yum install gd
分布式系统理论 bit1129 分布式
FLP One famous theory in distributed computing, known as FLP after the authors Fischer, Lynch, and Patterson, proved that in a distributed system with asynchronous communication and process crashes,
ssh2整合(spring+struts2+hibernate)-附源码白糖_ eclipse spring Hibernate mysql 项目管理
最近抽空又整理了一套ssh2框架，主要使用的技术如下： spring做容器，管理了三层(dao,service,actioin)的对象 struts2实现与页面交互(MVC)，自己做了一个异常拦截器，能拦截Action层抛出的异常 hibernate与数据库交互 BoneCp数据库连接池，据说比其它数据库连接池快20倍，仅仅是据说 MySql数据库项目用eclipse
treetable bug记录 braveCS table
// 插入子节点删除再插入时不能正常显示。修改： //不知改后有没有错，先做个备忘 Tree.prototype.removeNode = function(node) { // Recursively remove all descendants of +node+ this.unloadBranch(node); // Remove
编程之美-电话号码对应英语单词 bylijinnan java 算法编程之美
import java.util.Arrays; public class NumberToWord { /** * 编程之美电话号码对应英语单词 * 题目： * 手机上的拨号盘，每个数字都对应一些字母，比如2对应ABC，3对应DEF.........，8对应TUV，9对应WXYZ， * 要求对一段数字，输出其代表的所有可能的字母组合
jquery ajax读书笔记 chengxuyuancsdn jQuery ajax
1、jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()
JWFD工作流拓扑结构解析伪码描述算法 comsci 数据结构算法工作活动 J#
对工作流拓扑结构解析感兴趣的朋友可以下载附件，或者下载JWFD的全部代码进行分析 /* 流程图拓扑结构解析伪码描述算法 public java.util.ArrayList DFS(String graphid, String stepid, int j)
oracle I/O 从属进程 daizj oracle
I/O 从属进程　　I/O从属进程用于为不支持异步I/O的系统或设备模拟异步I/O.例如，磁带设备(相当慢)就不支持异步I/O.通过使用I/O 从属进程，可以让磁带机模仿通常只为磁盘驱动器提供的功能。就好像支持真正的异步I/O 一样，写设备的进程(调用者)会收集大量数据，并交由写入器写出。数据成功地写出时，写入器(此时写入器是I/O 从属进程，而不是操作系统)会通知原来的调用者，调用者则会
高级排序:希尔排序 dieslrae 希尔排序
public void shellSort(int[] array){ int limit = 1; int temp; int index; while(limit <= array.length/3){ limit = limit * 3 + 1;
初二下学期难记忆单词 dcj3sjt126com english word
kitchen 厨房 cupboard 厨柜 salt 盐 sugar 糖 oil 油 fork 叉；餐叉 spoon 匙；调羹 chopsticks 筷子 cabbage 卷心菜；洋白菜 soup 汤 Italian 意大利的 Indian 印度的 workplace 工作场所 even 甚至；更 Italy 意大利 laugh 笑 m
Go语言使用MySQL数据库进行增删改查 dcj3sjt126com mysql
目前Internet上流行的网站构架方式是LAMP，其中的M即MySQL, 作为数据库，MySQL以免费、开源、使用方便为优势成为了很多Web开发的后端数据库存储引擎。MySQL驱动Go中支持MySQL的驱动目前比较多，有如下几种，有些是支持database/sql标准，而有些是采用了自己的实现接口,常用的有如下几种: http://code.google.c...o-mysql-dri
git命令 shuizhaosi888 git
---------------设置全局用户名： git config --global user.name "HanShuliang" //设置用户名 git config --global user.email "[email protected]" //设置邮箱 ---------------查看环境配置 git config --li
qemu-kvm 网络 nat模式 (四) haoningabc kvm qemu
qemu-ifup-NAT #!/bin/bash BRIDGE=virbr0 NETWORK=192.168.122.0 GATEWAY=192.168.122.1 NETMASK=255.255.255.0 DHCPRANGE=192.168.122.2,192.168.122.254 TFTPROOT= BOOTP= function check_bridge()
不要让未来的你，讨厌现在的自己 jingjing0907 生活奋斗工作梦想
故事one 　23岁，他大学毕业，放弃了父母安排的稳定工作，独闯京城，在家小公司混个小职位，工作还算顺手，月薪三千，混了混，混走了一年的光阴。　　　　24岁，有了女朋友，从二环12人的集体宿舍搬到香山民居，一间平房，二人世界，爱爱爱。偶然约三朋四友，打扑克搓麻将，日子快乐似神仙；　　　　25岁，出了几次差，调了两次岗，薪水涨了不过百，生猛狂飙的物价让现实血淋淋，无力为心爱银儿购件大牌
枚举类型详解一路欢笑一路走 enum 枚举详解 enumset enumMap
枚举类型详解一.Enum详解 1.1枚举类型的介绍 JDK1.5加入了一个全新的类型的”类”—枚举类型，为此JDK1.5引入了一个新的关键字enum,我们可以这样定义一个枚举类型。 Demo:一个最简单的枚举类 public enum ColorType { RED
第11章动画效果（上） onestopweb 动画
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
Eclipse中jsp、js文件编辑时，卡死现象解决汇总 ljf_home eclipse jsp卡死 js卡死
使用Eclipse编辑jsp、js文件时，经常出现卡死现象，在网上百度了N次，经过N次优化调整后，卡死现象逐步好转，具体那个方法起到作用，不太好讲。将所有用过的方法罗列如下： 1、取消验证 windows–>perferences–>validation 把除了manual 下面的全部点掉，build下只留 classpath dependency Valida
MySQL编程中的6个重要的实用技巧 tomcat_oracle mysql
每一行命令都是用分号(;)作为结束对于MySQL，第一件你必须牢记的是它的每一行命令都是用分号(;)作为结束的，但当一行MySQL被插入在PHP代码中时，最好把后面的分号省略掉，例如： mysql_query("INSERT INTO tablename(first_name,last_name)VALUES('$first_name',$last_name')");
zoj 3820 Building Fire Stations(二分+bfs) 阿尔萨斯 Build
题目链接：zoj 3820 Building Fire Stations 题目大意：给定一棵树，选取两个建立加油站，问说所有点距离加油站距离的最大值的最小值是多少，并且任意输出一种建立加油站的方式。解题思路：二分距离判断，判断函数的复杂度是o(n)，这样的复杂度应该是o(nlogn)，即使常数系数偏大，但是居然跑了4.5s，也是醉了。判断函数里面做了3次bfs，但是每次bfs节点最多

BOM操作、定时器、DOM的基本操作(上)、DOM的基本操作(下)

一、BOM操作

二、定时器

三、DOM的基本操作(上)

四、案例

五、DOM的基本操作(下)

你可能感兴趣的:(JavaScript,前端,javascript,前端,开发语言)