搜索到
117
篇与
的结果
-
-
js如何引用js脚本 如何在 JavaScript 中引用 JS 脚本在 JavaScript 中引用外部 JS 脚本有两种主要方法：使用 <script> 标签 </script> 这是最简单的方法，通过在 HTML 页面中插入 <script> 标签来引用 JS 脚本： </script><script src="script.js"></script>其中 src 属性指定要引用的脚本文件的路径。使用 document.createElement()可以使用 JavaScript 动态创建并插入 <script> 元素： </script>const script = document.createElement("script"); script.src = "script.js"; document.head.appendChild(script);注意事项确保脚本文件在服务器上可用。 <script> 标签或动态创建的 <script> 元素应放置在 <head> 或 <body> 元素内。 </script> 避免在同一页面中多次引用相同的脚本。使用异步或延迟加载来防止脚本阻塞页面加载。
-
前端JS发起的请求能暂停吗？ 在讨论前端JS发起的请求是否能暂停时，需要明确两个概念：什么状态可以被认为是“暂停”？以及什么是JS发起的请求？如何定义暂停？暂停指的是临时停止一个已经开始但尚未完成的过程。这意味着这个过程可以在某个时间点被中断，并在另一个时间点恢复。什么是请求？首先，让我们介绍一下TCP/IP网络模型。网络模型从上到下分为应用层、传输层、网络层和网络接口层。上图表示，每次网络传输，应用数据都需要通过网络模型逐层打包，然后发送到目的地，就像寄包裹一样。要寄送的物品首先被包装并登记其大小，然后放入箱子并登记目的地，最后装上运输工具送到目的地。请求的概念可以理解为客户端通过多次数据网络传输将完整数据发送到服务器，而服务器为特定请求返回的数据可以称为响应。理论上，应用层协议可以通过标记数据包序列号来实现暂停机制。然而，TCP协议不支持这一点。TCP协议的数据传输是面向流的，数据被视为连续的字节流。客户端发送的数据将被分成多个独立传输的TCP段。无法直接控制每个TCP段的传输，因此无法实现暂停请求或响应的功能。如果请求指的是网络模型中的传输，那么自然是不可能暂停的。考虑到使用场景——由JS发起的请求。因此，可以认为这里的问题指的是在JS运行时发起的XMLHttpRequest或fetch请求。由于请求已经发出，问题自然变成响应是否可以暂停。我们都知道，上传大文件分片和下载大文件本质上是定义分片顺序，按顺序请求，可以通过中断和记录中断点来实现暂停和恢复。然而，单个请求并没有这样的环境。使用JS实现“假暂停”机制虽然我们无法真正实现暂停请求，但我们可以模拟一个假暂停功能。在前端业务场景中，数据在接收到后不会立即显示在客户端。前端开发人员需要先处理这些数据，然后再渲染到界面上。如果我们在发起请求前添加一个控制器，并且在请求返回时该控制器处于暂停状态，则不处理数据。相反，等待控制器恢复后再处理数据。这样我们是否就达到了目标呢？让我们尝试实现它。如果我们使用 fetch 发起请求，可以设计一个控制器 Promise ，并结合请求使用 Promise.all 封装。当 fetch 完成时，检查控制器是否处于暂停状态；如果没有暂停，直接 resolve 控制器并同时 resolve 和抛出 Promise.all 。function _request () { return new Promise<number>((res) => setTimeout(() => { res(123) }, 3000)) } // 原本想用 "class extends Promise" 实现。 // 问题在于https://github.com/nodejs/node/issues/13678。 function createPauseControllerPromise () { const result = { isPause: false, resolveWhenResume: false, resolve (value?: any) {}, pause () { this.isPause = true }, resume () { if (!this.isPause) return this.isPause = false if (this.resolveWhenResume) { this.resolve() } }, promise: Promise.resolve() } const promise = new Promise<void>((res) => { result.resolve = res }) result.promise = promise return result } function requestWithPauseControl <T extends () => Promise<any>>(request: T) { const controller = createPauseControllerPromise() const controlRequest = request().then((data) => { if (!controller.isPause) controller.resolve() controller.resolveWhenResume = controller.isPause return data }) const result = Promise.all([controlRequest, controller.promise]) .then(data => data[0]) result.finally(() => controller.resolve()) (result as any).pause = controller.pause.bind(controller); (result as any).resume = controller.resume.bind(controller); return result as ReturnType<T> & { pause: () => void, resume: () => void } }使用方法我们可以将调用 _request 替换为调用 requestWithPauseControl(_request) ，并通过返回的pause和 resume 方法控制暂停和恢复。const result = requestWithPauseControl(_request).then((data) => { console.log(data) }) if (Math.random() > 0.5) { result.pause() } setTimeout(() => { result.resume() }, 4000)执行原理在流程设计上，步骤如下：设计一个控制器，发起请求，在接收到响应后，检查控制器的状态。如果控制器不处于“暂停”状态，则正常返回数据；如果控制器处于“暂停”状态，则将控制器设置为一旦调用resume方法就返回数据的状态。在代码中，使用 Promise.all 将控制器 Promise 绑定。如果控制器处于暂停状态， Promise.all 不会被释放。然后对应地暴露 pause 方法和 resume 方法供外部使用。
-
有趣的css - 圆形金属质感按钮 🔑思路： 创建一个圆形，利用渐变函数模拟金属质感，再通过选择器根据多选框是否被选中，点亮圆点标记。可以扩展多个按钮，配上文字说明，来模拟机器上的各种按钮，例如启动或者停止按钮等。html 页面<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>圆形金属质感按钮</title> </head> <body> <div class="app"> <label class="btn76"> <input type="checkbox" class="inp76" /> </label> </div> </body> </html>css 样式.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .btn76{ width: 64px; height: 64px; background: conic-gradient(from 180deg at 50% 50%, rgba(0, 0, 0, 0.4) 0deg, #FFFFFF 90deg, rgba(0, 0, 0, 0.4) 181deg, #FFFFFF 270deg, rgba(0, 0, 0, 0.4) 360deg); border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); box-shadow: 1px 1px 0 rgba(255,255,255,0.4) inset,-1px -1px 0 rgba(255,255,255,0.2) inset; outline: 1px dashed rgba(0,0,0,0.2); outline-offset: -6px; cursor: pointer; position: relative; box-sizing: border-box; } .inp76{ width: 6px; height: 6px; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; position: absolute; left: 24px; top: 5px; appearance: none; z-index: 10; } .btn76:active{ transform: scale(0.98); } .inp76:checked{ background: #0DFF00; box-shadow: 0px 0px 4px 2px rgba(78, 229, 70, 0.4); }代码思路1、定义 label 标签基本样式，利用 conic-gradient 圆锥渐变函数给按钮添加渐变背景，模拟出金属质感；添加 outline 属性，给圆形按钮添加轮廓边，通过 outline-offset 对轮廓边进行内偏移。2、定义多选框 input 标签样式，通过 appearance: none; 属性自定义多选框样式，将多选框样式定义为圆形标识，通过 position 定位属性，将标识定位到圆形按钮的上方区域。3、利用 :checked 选择器，多选框选中时，改变圆形标识样式，给圆形标识添加亮绿色背景，以及扩散阴影，模拟圆形标识发光效果；多选框未选中时，默认圆形标识样式。4、利用 :active 选择器，给圆形金属质感图标整体添加一个缩放效果，当圆形金属质感图标被按下时，会有一个缩小效果，来模拟按钮被按下的视觉效果。
-
HTML+CSS TAB导航栏 这段代码实现了一个名为"Tab导航栏"的效果，它是一个基于CSS的导航栏，包含五个选项卡，每个选项卡都有一个带有渐变背景色的滑块，当用户点击选项卡时，滑块会滑动到相应的位置。同时，选中的选项卡会变为白色，未选中的选项卡会变为灰色。Codehtml<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TAB导航栏</title> <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="./04-TAB导航栏.css"> </head> <body> <div class="wrapper"> <nav> <input type="radio" name="tab" id="home" checked> <input type="radio" name="tab" id="comment"> <input type="radio" name="tab" id="envelope"> <input type="radio" name="tab" id="heart"> <input type="radio" name="tab" id="user"> <label for="home" class="home" onclick="location.href='#';"> <a><i class="fa fa-home" aria-hidden="true"></i>Home</a> </label> <label for="comment" class="comment" onclick="location.href='#';"> <a><i class="fa fa-comment" aria-hidden="true"></i>Comment</a> </label> <label for="envelope" class="envelope" onclick="location.href='#';"> <a><i class="fa fa-envelope" aria-hidden="true"></i>Envelope</a> </label> <label for="heart" class="heart" onclick="location.href='#';"> <a><i class="fa fa-heart" aria-hidden="true"></i>Heart</a> </label> <label for="user" class="user" onclick="location.href='#';"> <a><i class="fa fa-user" aria-hidden="true"></i>User</a> </label> <div class="tab"></div> </nav> </div> </body> </html>css* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; background: linear-gradient(200deg, #e8e8e8, #a8edea, #d1fffc, #e8e8e8); } .wrapper { width: 60vw; height: 60px; line-height: 60px; background-color: #fff; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25); border-radius: 50px; } .wrapper nav { display: flex; position: relative; } .wrapper nav label { flex: 1; width: 100%; position: relative; z-index: 1; cursor: pointer; } .wrapper nav label a { position: relative; z-index: -1; color: #333; font-size: 20px; font-weight: bold; text-decoration: none; } .wrapper nav label a i { font-size: 25px; margin: 0px 7px; } .wrapper nav input { display: none; } .wrapper nav .tab { position: absolute; height: 100%; width: 20%; left: 0px; bottom: 0px; background: linear-gradient(to right, #ff5858, #ff5858); border-radius: 50px; transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .wrapper nav #home:checked~label.home a, .wrapper nav #comment:checked~label.comment a, .wrapper nav #envelope:checked~label.envelope a, .wrapper nav #heart:checked~label.heart a, .wrapper nav #user:checked~label.user a { color: #fff; transition: 0.6s; } .wrapper nav #comment:checked~.tab { left: 20%; } .wrapper nav #envelope:checked~.tab { left: 40%; } .wrapper nav #heart:checked~.tab { left: 60%; } .wrapper nav #user:checked~.tab { left: 80%; }实现思路拆分* { margin: 0; padding: 0; box-sizing: border-box; }这段代码是设置所有元素的外边距和内边距为0，并且使用 border-box 盒模型。body { height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; background: linear-gradient(200deg, #e8e8e8, #a8edea, #d1fffc, #e8e8e8); }这段代码是设置body元素的高度为100vh，使其占据整个视口的高度。同时，使用 flex 布局使其子元素水平和垂直居中。最后，设置背景为一个线性渐变。.wrapper { width: 60vw; height: 60px; line-height: 60px; background-color: #fff; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25); border-radius: 50px; }这段代码是设置一个名为"wrapper"的元素的宽度、高度、行高、背景颜色、阴影和圆角。.wrapper nav { display: flex; position: relative; }这段代码是设置一个名为"nav"的元素的布局为flex，并且设置其相对定位。.wrapper nav label { flex: 1; width: 100%; position: relative; z-index: 1; cursor: pointer; }这段代码是设置一个名为 "label" 的元素的布局为flex，并且设置其相对定位和 z-index 属性。同时，设置光标为指针。.wrapper nav label a { position: relative; z-index: -1; color: #333; font-size: 20px; font-weight: bold; text-decoration: none; }这段代码是设置一个名为"a"的元素的相对定位和 z-index 属性。同时，设置字体颜色、字体大小、字体加粗和文本装饰为无。.wrapper nav label a i { font-size: 25px; margin: 0px 7px; }这段代码是设置一个名为"i"的元素的字体大小和外边距。.wrapper nav input { display: none; }这段代码是设置一个名为 "input" 的元素的显示属性为 none ，即隐藏该元素。.wrapper nav .tab { position: absolute; height: 100%; width: 20%; left: 0px; bottom: 0px; background: linear-gradient(to right, #ff5858, #ff5858); border-radius: 50px; transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }这段代码是设置一个名为 "tab" 的元素的绝对定位、高度、宽度、左侧和底部位置、背景颜色和圆角。同时，设置过渡效果。.wrapper nav #home:checked~label.home a, .wrapper nav #comment:checked~label.comment a, .wrapper nav #envelope:checked~label.envelope a, .wrapper nav #heart:checked~label.heart a, .wrapper nav #user:checked~label.user a { color: #fff; transition: 0.6s; }这段代码是设置选中的选项卡的字体颜色为白色，并且设置过渡效果。.wrapper nav #comment:checked~.tab { left: 20%; } .wrapper nav #envelope:checked~.tab { left: 40%; } .wrapper nav #heart:checked~.tab { left: 60%; } .wrapper nav #user:checked~.tab { left: 80%; }这段代码是设置选中的选项卡的滑块的位置。当选中 "comment" 选项卡时，滑块会向右移动20%的距离，以此类推。
CC BY-NC-ND