- 博客(30)
- 收藏
- 关注
RSS订阅原创 基于snabbdom的diff算法的学习笔记-03更新节点patchVnode
【代码】基于snabbdom的diff算法的学习笔记-03更新节点patchVnode。
2024-07-30 09:15:08
269
原创 基于snabbdom的diff算法的学习笔记-02patch函数和一些基本概念
常见的patch函数的调用: 调用结果是初始化在视图上，vnode生成的DOM树替换container；用户点击按钮，vnode1生成的DOM替换vnode生成的DOM</</</</</</</
2024-07-30 09:12:34
182
原创 基于snabbdom的diff算法的学习笔记-01h函数和虚拟节点
vnode是js对象中的一个普通对象，这个对象描述了网页中的真实DOM。本次笔记只涵盖最基本的vnode对象，对象包含sel(DOM标签)，data(DOM的某些属性，如key,href等)，text(DOM的内部文本)， children(?Array),elm(vnode指向的真实节点)。
2024-07-30 09:07:16
176
原创 基于vue封装的返回顶部插件
返回顶部是我们常用的插件，和大家分享一下之前封装的一个。export default{ install(Vue){ Vue.prototype.$scrollTo = function(end=0,time=100,cb){ var start = document.documentElement.scrollTop || document.body.scrollTop; var speed = (start-end)/100*16.
2020-05-22 18:08:20
165
原创 上拉加载更多组件
封装了一个上拉刷新的插件和大家分享一下。const toReachBottom = { isBottom: false, scroll: function (callback) { let timer = null; callback && window.addEventListener("scroll", scroll.bind(this)); function scroll() { if (time
2020-05-22 18:02:27
212
原创 一些常见的字符串和数组方法封装和日期格式化
一些常见的字符串和数组方法封装和日期格式化一、字符串方法1.字符串去空格/** * * @param {*} str 需要处理的字符串 * @param {*} type 去除空格的 * 0-去除首尾空格 1-去除所有空格 2-去除首部空格 3-去除尾部空格 */function trim(str,type=0){ switch(typ...
2020-05-06 15:52:46
181
原创 node 后端代理服务器
node的http请求最常见的用法是用它来创建服务，除了创建服务之外，http还可以访问服务器，并且比起直接访问还可避免跨域拦截，下面我就来介绍一下如何利用http来访问服务器。http.get()var http=require("http");http.get("http://py.amazingtm.com/index.php?keyword=veblen&keytype=0...
2020-02-04 20:01:52
134
原创 JS模拟todos
今日接触了dom函数，模拟写了一个todos. <div class="box"> <h1>Todos</h1> <input type="text" placeholder="What needs to done?"> <ul></ul> </div>...
2019-12-14 16:54:42
494
原创 js打字小游戏
今日闲来无事，想试一试模拟打字游戏，下面是效果图，会记录判断打字，如果在外围添加setInterval函数，可以实现测试打字速度的功能。html <div class="wrapper"> <div id="text">A</div> <input type="text" id="ipt"> <...
2019-12-14 16:51:25
288
原创 JS轮播图
今天遇到了轮播图问题，在这里和大家分享一下几个简单的JS轮播图的写法。HTML语句 <div class="wrapper"> <img src="../assetes/pic/29.jpg" alt="" class="active"> <img src="../assetes/pic/23.jpg" alt="">...
2019-12-14 16:42:28
68
原创 js数组，对象深拷贝
基本思路：deepCopy(data)data 可能是数组也可能是对象1.判断data是数组 对象或者其他数据类型2.声明空数组 或者 空对象 res3.分别处理如果数组元素或对象属性值不是数组或对象，空数组或对象之间接收元素res.push(data[i])res[x] = data[x]如果数组元素或对象属性值是数组或对象，则可以再一次调用deepCopyres.push(...
2019-12-07 17:57:14
83
原创 JS中判断数据类型的几种方法
在JS中，我们常常遇到的问题时，对于不同的数据类型我们需要采用不同数据处理方式。那么如何判断数据类型呢？笔者给大家介绍几种简单实用的方法。一、typeof(数据)typeof是我们最常用的判断数据类型的方法，它的返回值有string，number,boolean,object,undefined,function这六种，唯一的缺点是null，array，object返回值均为object。 ...
2019-12-07 10:19:29
141
原创 JS中this指向问题
与其它语言相比，JS的this关键字的指向稍微有点差别。一、全局环境首选我们要明确一点，在全局环境中（在任意函数体外部），无论是严格模式还是非严格模式，this都指向window。下面，我们来通过几个例子理解一下。 //示例1 console.log(this)//这里的this在全局域下，指向window //示例二 var ...
2019-12-07 09:56:02
138
1
原创 JS执行顺序
JS是一门解释型语言，解释一句执行一句。但是细心的小伙伴会发现如果出现以下程序时，返回结果是undefined 而非 a is not defined。这是为什么呢？下面我们来一起聊一聊JS程序的执行过程。 <script> console.log(a); var a = 0; </script>JS执行过程分为三步：第...
2019-11-29 23:30:14
94
原创 JS删除数组中的重复元素
今天学习了数组方法，简单和大家分享一下删除数组中重复元素的方法：方法一： for(var i = 0;i < arr.length;i++){ for(var j = i + 1;j < arr.length ; j++){ if( arr[i] == arr[j]){ // de...
2019-11-28 23:12:57
292
原创 JS数组的内置函数
数组中内置api用途：处理复杂的数据结构（对象，数组，字符串组合）难点：数组打乱重组1.对数据的基本操作：数组、对象、字符串（拼接，替换，删除，切割，截取）的基本操作2.数组基本操作1.查 获取数组中的数据 arr[index] for获取第一个 arr[0]获取最后一个 arr[arr.length-1]获取倒数第二个 arr[arr.length-2]2.增从尾部增加 ...
2019-11-28 09:55:25
477
1
原创 JS基本介绍
一、关于js ：1.含义：JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言。使用这种语言的目的是：与Web客户交互作用，美化页面等。2.特点（1）解释型语言边翻译边运行：程序不需要编译，程序在运行时才翻译成机器语言，每执 行一次都要翻译一次。因此效率比较低。在运行程序的时候才翻译，专门有一个解释器去进行翻译，每个语句都是执行的...
2019-11-22 18:01:27
200
原创 JS显式数据类型转换
元素NumberparseIntparseFloatBoolean‘’0NaNNaNfalse‘- 123.3’-123 .3-123-123.3true‘123.4abc’NaN123123.4true‘0xF’1500true1.11.111.1true0000false0xF15...
2019-11-22 17:47:28
75
原创 CSS3中的线性渐变和径向渐变
前些天写了一篇关于背景的渐变色，今天来详细记录以下关于渐变:RGBA渐变渐变： 线性渐变 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 /角度 background-image: linear-gradient(direction, color-stop1, color-stop2, ...); ...
2019-11-18 11:32:15
508
原创 CSS的太阳系
效果图：程序：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
2019-11-16 17:35:23
296
1
原创 CSS3边框，背景，字体渐变色
1.背景色渐变 background-image: radial-gradient(circle, rgb(170, 178, 226) 50%, rgb(98, 106, 151));2.边框渐变 border: 5px solid transparent; border-image: linear-gradient(to right, #465779, r...
2019-11-13 20:09:15
125
原创 知识点小结 02 表格
首先，表格的基本标签如下：基本表格样式： <table frame="above"> <caption>我是个有理想的表格标题</caption> <tr> <td><img src="../assetes/pic/5.jpg" alt="" class="old-...
2019-11-11 20:41:07
86
原创 知识点小结 01（HTML）
刚刚学习前端，记录一下自己的感想（省个笔记本的钱钱），比较浅薄。基本认知：HTML不是编程语言，而是标记语言，用来描述网页，通俗的说，HTML语言展示的是视觉效果，而它用来描述的工具就是标签。一.基本结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
2019-11-11 20:12:54
70
原创 CSS组件库的理解
一个样式可以看成由两部分组成：基础样式和个性样式，个性样式可以由排列和颜色，大小等多个部分组成，所以说组件库可以看成是一般样式的拆分，他的优点也显而易见，复用性强，易修改，方便维护。...
2019-11-11 19:09:42
308
原创 switch 按钮
/* 必须为类型为[checkbox]的[input]添加 switch 类名才能实现以下效果 */ input[type=checkbox].switch{ outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: rela...
2019-11-09 17:27:31
180
原创 checkbox
.circle-check,.square-check { display: inline-block;}.circle-check>input[type="checkbox"] { width: 1.64rem; height: 1.64rem; display: inline-block; text-align: center; v...
2019-11-09 17:25:52
115
原创 关于按钮组件
第一步：清空默认样式 /* 清空默认 */ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }body { margin: 0; width: 100%; } /* 布局 */ .cx-con...
2019-11-06 20:16:16
109
原创 表格样式
清空表格样式：/* 清空表格默认样式 */table{ background-color: transparent; /* 表格塌陷 */ border-collapse: collapse; border:0px;}th{ font-weight: bold; color: #909399;}基础样式：.cx-table{ ...
2019-11-06 20:13:57
91
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人