我也要用
js
js学习
小小小菜鸡zzzz
这个作者很懒，什么都没留下…
-
原创 js中时间格式转化的工具库 dayjs
import dayjs from 'dayjs'import 'dayjs/locale/zh-cn' // 加载中文语言包import relativeTime from 'dayjs/plugin/relativeTime' // 加载相对时间import Vue from 'vue'dayjs.extend(relativeTime)dayjs.locale('zh-cn')// 相对现在的时间 过滤器Vue.filter('relativeTime', value => {2020-10-05 19:32:34
49
0
-
原创 js中超出number数据类型值范围的处理
使用 import jsonBig from ‘json-bigint’2020-10-04 09:26:02
90
0
-
原创 js封装一些常用功能函数
// 1.输出类型值，封装typeof方法// 2.数组去重// 3.字符串去重// 4.字符串中只出现一次并且是第一次出现的字符// 5.圣杯模式 继承模式// 6.深拷贝// 7.封装函数，返回元素e的第n层祖先元素// 8.封装child功能，解决以前部分浏览器不兼容问题,返回元素节点 noteType==1// 9.封装hasChildren()方法，不可以使用children属性// 10.封装函数，返回元素e的第n个元素节点，n为正，返回后面的兄弟节点，// 11.返回元素子2020-07-01 09:53:37
48
0
-
原创 js动画相关函数的封装
/** * 获取滚动的距离，并做兼容性处理 * @returns {{top: number, left: number}} 返回JSON数据top,left */function scroll() { if (window.pageYOffset !== null) { return { top : window.pageYOffset, left: window.pageXOffset } } else if (document.compatMo2020-07-01 09:47:12
42
0
-
原创 client offset scroll 三大家族
var box = document.getElementById("box"); // 1. width 和 height /* // border + padding + 内容的宽度和高度 console.log(box.offsetWidth, box.offsetHeight); // padding + 内容的宽度和高度 console.log(box.clientWidth, box.clie...2020-06-29 10:49:00
27
0
-
原创 瀑布流布局思路
瀑布流布局是页面在展示时形成层次不齐的感觉，在特定的情况下使用此种布局页面中的元素全是div，在这种布局中，使用浮动布局，加上定位。思路：获取所有的div元素获取盒子的宽度，宽度都是相同，高度不同在浮动布局中每一行的盒子个数不固定，是根据屏幕宽度和盒子宽度决定获取屏幕宽度求出列数，屏幕宽度 / 盒子宽度 取整瀑布流最关键的是第二行的盒子的排布方式，通过获取第一行盒子中最矮的一个的下标，绝对定位，top是最矮盒子的高度，left是最矮盒子的下标 * 盒子的宽度循环遍历所有的盒子，通过列数2020-06-28 13:08:22
88
0
-
原创 js 实现缓动动画
利用定时器来控制元素的offsetLeft的值，offsetLeft = 开始位置 + （最终位置 - 开始位置）* 缓动系数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; .2020-06-26 17:16:01
84
0
-
原创 js贪吃蛇
```javascript// 全局变量var sw = 20, sh = 20, td = 30, th = 30;var snake = null; //蛇的实例对象var game = null; //游戏的实例对象var food = null; //食物的实例对象// 方块// 方块的构造函数及原型链方法function Square(x, y, className) { this.x = x; this.y = y; t...2020-06-16 21:08:54
49
0
-
原创 js中 数组相关函数
// 重写添加push方法 var arr = [1,2,3]; Array.prototype.push = function () { for(var i = 0; i < arguments.length; i++) { this[this.length] = arguments[i]; } return this.length; }...2020-06-07 10:11:53
55
0
-
原创 js 中三目运算符
//三目运算符 只有两个判断是if else 时可以用三目运算符简化函数 // 条件判断 ？ 是 ： 否 并且返回值 // var num = 1 > 0 ? 2 + 2 : 1 + 1; //4 var num = 1 > 0 ? ("10" > "9" ? 1 : 0) : 2; //0function deepClone(origin, target) { var target ...2020-06-06 23:48:13
71
0
-
原创 js 对象的拷贝 深浅拷贝
对象的拷贝：1.浅拷贝：直接拷贝所有属性，但是会出现原对象和克隆对象的引用值的地址相同，在改一个对象的属性会将另一个对象的属性改掉。2.深拷贝：在循环遍历原对象时，判断对象的每一个属性是否是引用值。 var obj = { name: 'abc', age: 123, sex: 'female', card: ['hahaha', 'hehehe'], wife: {2020-06-06 23:20:57
44
0
-
原创 js 包装类
new String() new Boolean() new Number()只有原始值数字是原始值，原始值不能有自己的属性和方法属性和方法只有对象有，包括对象自己，数组，functionundefined null 不可以有属性原始值不可以有属性和方法，但经过了包装类（加隐式）可以调用一些属性与方法...2020-06-04 11:37:15
55
0
-
原创 js 对象
对象的创建方法：1.var obj = {} 对象字面量/对象直接量2.构造函数：1）系统自带的构造函数Objectnew Object() Array() Number() Boolean() Date()2)自定义Object。create（原型）方法构造函数内部原理前提必须加new在函数体最前面加上var this = {} 空对象执行this.xxx = xxx隐式的返回return thisreturn 可以手动返回值，但只可以返回对象系统会自2020-06-04 10:57:57
44
0
-
原创 js作用域精解
***[[scope]]????**每个JavaScript函数都是一个对象 对象中的有些属性我们可以访问，但也有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中之一，[[scope]]指的就是我们所说的作用域，其中存储了运行时期上下文集合。**作用域链：[[scope]]中所存的执行期上下文对象的集合，这个集合呈链式连接，我们把这种链式链接叫作作用域链***运行期上下文：***当函数在执行的前一刻，会创建一个成为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时2020-06-03 18:14:35
34
0
-
原创 js代码预编译过程
<!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>Do2020-06-01 19:10:55
63
0
-
原创 js 中函数参数的一些解释
2020-06-01 17:15:29
74
0
-
原创 js 显示类型转化 Number parseInt parseFloat toString String Boolean
显示类型转化 Number parseInt parseFloat toString String Boolean 1.Number: true->1 false->0 null->0 undefined->NaN "a"->NaN 2.parseInt(demo,redix): (小数部分去掉,数转化成整形,非数都是NaN) true->NaN ...2020-06-01 13:24:43
53
0
-
原创 js 小算法问题
// var scroe = parseInt(window.prompt("input")); // 1. 2的n次幂 // var n = parseInt(window.prompt("n")); // var sum = 2; // if (n == 0) { // sum = 1 // } else { // for (var i = 0; i <...2020-05-31 22:15:27
55
0
-
原创 js 逻辑运算符 && || !
2020-05-31 17:48:17
33
0
-
原创 js交换两个数的值，换一种思路
2020-05-31 16:55:36
38
0