HTML部分 <div id="container" > <div id="drag"> 拖拽区域 </div> </div> CSS部分: #container { width: 300px; /* overflow: hidden有效阻止鼠标超出拖动范围而触发mousemove回调 */ overflow: hidden; positi
// 选择排序 // 原理:进行 n-1 趟 循环,每趟循环中遍历所有未排好序的数,第一趟循环,从第0个元素开始向后遍历,找到 最小的元素,与第1 一个元素进行交换,第二趟,从第 1 个元素开始向后遍历,找到最小值与第2个元素 进行交换,以此类推 // 从而得出规律,每次遍历元素开始位置为 i+1,并维护每轮
how to use vanilla js iterate the Symbol Object All In One bug ❌ Uncaught TypeError: UIComponents is not iterable import * as UIComponents from './index' console.log(`UIComponents =`, UIComponents); // UIComponents = Module {Symbol(Symbol.to
// 冒泡排序 // 原理就是每一轮循环,将一个最大的值放冒泡到最后 // 1.每一趟都是比较相邻两个元素,如果后一个元素大于前一个,则交换两个元素 // 2.第一趟从第一个元素开始进行交换,最后一个元素不参与交换,第二趟最后两个元素不参与交互,以此类推 function bubbleSort(arr) { if
// 1 滚动到页面顶部 window.scrollTo() 平滑滚动到页面顶部 const scrollToTop = () => { window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) } // 2 滚动到页面底部 如果知道页面的高度,也可以平滑滚动到页面底部 const scorll
js 创建二维数组的方法: 方法一: 直接设置 let arr = [ [1, 2], [3, 4], [5, 6], ]; let arr = [] ; arr[0] = [1,2,3,4,5,6]; arr[1] = [10,20,30,40,50,60] 方法二: fill + 一个 for 循环 let arr= new Array(10).fill(0) for(let i=0;i<arr.length;i++){ a
描述 JSON.stringify()的作用就是把 JavaScript 对象或数组或其他简单值转换为字符串。它还可以用于对象的深拷贝;对 JSON 字符串进行格式化(缩进);在转换之前对值进行替换操作。 特殊类型的处理 JSON.stringify()遇到函数、日期等类型的值会进行特殊处理。为了让输出结果好看一些,在函
js-cookie.js的使用 3种引入js-cookie.js的方法: 一. 直接引用cdn: <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> 二. 本地下载下来: <script src="./js/js.cookie.js"></script> 三. 模块化开发时: import Cooki
当数据量过大时,使用d3.js渲染各种图时,如果一下子加载出来,会出现加载过慢,这样使用效果就不是太好,为了解决这个问题,使用了分页加载数据并渐进渲染各种图。 一、数据格式 数据如下:这里是一个example.csv文件, x,y,value 0,1,0.2 0,2,0.70,3,0.01.......100000, 20, 1 二、读取
Object.keys()返回键 1.处理对象,返回键 let person = {name:"张三",age:25,address:"深圳",getName:function(){}} Object.keys(person) // ["name", "age", "address","getName"] 2.处理数组,返回字符串数组索引 let arr = [1,2,3,4,5,6]
1.概述 ES5的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就冲根本上防止属性名的冲突。这就是ES6
你知道多少 JavaScript 中的变量 ? 昨天,当我搞砸了变量时,我正在研究我的开尔文天气项目。该项目需要声明许多变量以将温度程度从一个更改为另一个。因此对于像我这样的 Rookie 来说,选择要使用的变量类型有点令人困惑,因为在 ES6 更新之后,总共有 3 种变量类型——var、let 和 const
作用域的概念 同级作用域 在一个作用域中声明相同名称的变量会发生变量名冲突的问题。假如在作用域 A 中声明一个变量 a,作用域 B 也声明一个变量 a,两个作用域的变量都互不影响。 // 作用域 A { let a = 0; console.log(a); } // 作用域 B { let a = 10; console.log(a);
Promise return 在对应的promise的函数中 在promise里面的then函数(catch函数中)return相当于调用resolve 。 throw new Error相当于调用reject Promise.resolve('第一个值').then((res) => { console.log(res) return '第二个值' //resolve}).then(res => { console
环境 Time 2022-05-21 Rust 1.61.0 前言 说明 参考:https://doc.rust-lang.org/std/iter/trait.IntoIterator.html 目标 前一节自定义了一个类型来实现迭代器,并且自定义了一个方法来转化成迭代器。标准库中提供了一个转化成迭代器 trait。 自定义类型 struct MyData { value1
预期 [1,2,3,4,5] => true [1,2,3,5,6] => false 代码 //判断一串数字是否是连续的 const isContinuityNum = (num: number[] | number) => { let array = []; if (num instanceof Array) { array = [...num]; } else { array = Array.from(num.toString()); //转换
接上节继续,今天来研究tauri的事件(event),假设老板提了个需求,希望能实时监控cpu、内存等性能指标,你会怎么做? 思路1: 后端Rust暴露1个command,前端js不停去轮询(参考前文:tauri学习(3)-前端调用Rust代码),即传统的pull模型。 思路2: 后端不停对外喷数据,谁需要谁拿(类似发布-订阅模型)。 理
场景: 表格内的数据太多,导致页面太卡,所以初始化先展示100条数据,然后滚动在添加数据 mounted (){ this.$nextTick(() => { let dom = this.$refs.logTable.bodyWrapper dom.addEventListener("scroll", this.scrollBottom, true) }) } scrollBottom () { let dom = ${.log_main .el-ta
文章结构 生成器函数的定义与使用 给生成器函数传参 给生成器函数异步传参 生成器函数的应用场景 解决回调地域 1 //生成器函数的定义与使用 2 function *fn(){ 3 //yield类似于断电 4 console.log(111); 5
实训四十七天 元素操作 BOM 1.学习内容 自定义属性 设置元素属性 <div haha="abc" id="xyz"></div> <script> let div = document.querySelector("div"); //获取属性值 //元素.属性名 的方式只能适用于元素原生的属性 console.log(div.getAttribute(&
目录1. JS操作1.1 JS获取用户输入1.2 JS类属性操作1.3 JS样式操作2. 事件2.1 事件理解2.2 绑定事件的两种方式2.3 事件中的关键字this2.4 window.onload2.5 校验用户输入案例2.6 省市联动案列3. jQuery类库3.1 jQuery 简介3.2 jQuery基本使用 1. JS操作 1.1 JS获取用户输入 1.普通
目录DOM文档对象模型获取标签值操作JS类属性操作JS样式操作事件jQuery类库作业 DOM文档对象模型 获取标签值操作 1.操作标签:input、select、textarea 2.语法结构:查找到的标签.value 3.实操 let iEli = document.getElementById("d1"); //查找标签(也可通过类 属性) console.log
今日学习内容 JS获取用户输入 有两种方式: 普通数据(输入、选择) 标签对象.value 文件数据(上传) 标签对象.files 标签对象.files[0] JS类属性操作 let 标签对象 = document.getElementsByClassName('类名') #获取所有样式类名 标签对象.classList #以列表的形式存
前端基础 HTML书写页面 CSS 页面美化 JS 页面运动 HTML 超文本标记语言(Hyper Text Markup Language) 基本元素 p 段落标签,独占一行   网页上显示一个空格 i 文字出现斜体效果 hr 水平线 solid实线 shadow阴影 b 文字出现加粗效果 br 换行标记 mar
概述: Object是顶层的构造,万物皆对象,所有的对象都是Object的子类。Object的方法所有的对象都能共享。 Object实例方法(原型方法) 使用实例对象调用的方法称为实例方法。所有实例都是Object的子类,所以所有的实例都能调