![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
路人葵
这个作者很懒,什么都没留下…
展开
-
原生js实现canvas粒子特效
要实现的效果 当鼠标移入容器时,让鼠标作为中心点半径为80到圆内的粒子散开 当粒子不在圆的范围后,粒子返回原来的位置 主要代码 创建初始位置 // NUM_PARTICLES是粒子总个数 for ( i = 0; i < NUM_COUNT; i++ ) { p = { vx: 0, vy: 0, x: 0, y: 0, ox: 0, oy: 0 }; // 点的当前...原创 2020-11-17 11:34:10 · 1643 阅读 · 1 评论 -
vue 02品牌管理案例涉及知识点
1.数组添加- posh(item1,item2,) 在最后添加一项或多项,并返回数组的长度- unshift(item1,item2,) 在最前面添加一项或多项,并返回数组的长度2.数组删除- pop()删除最后一项并返回删除元素的值- shift()删除最前一项并返回删除元素的值3.修改数组- splice(start,deleteCount,item1,item2,)4.数组...原创 2020-02-20 18:56:58 · 154 阅读 · 0 评论 -
vue03过滤器涉及知识点
1.字符串替换- replace(参数1,参数2);– 第一个参数是需查找的字符串,可为字符串或正则表达式– 第二参数是替换字符串2. 过滤器- 过滤器可以用在两个地方 mustache插值和v-bind表达式- 过滤器调用时的格式 {{ data | 过滤器名称1(参数1,参数2,,,) } | 过滤器名称2(参数1,参数2,,,)}- 过滤器的定义语法 Vue.filter...原创 2020-02-20 18:53:46 · 163 阅读 · 0 评论 -
vue 走马灯效果涉及知识点
1.vue使用用法- 导入vue.js- 创建vm实例2. 定时器的用法- 创建定时器 var 变量名 = setInterval(()={},time);- 关闭定时器 clearInterval(变量名);变量名为空;3.截取字符串方法- substring(num1,num2);两个参数中较小一个作为起始位置,较大的参数作为结束位置,参数为负数时,直接转换为0- subst...原创 2020-02-20 18:51:13 · 387 阅读 · 0 评论 -
广告弹出框自动关闭
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>广告弹出窗(自动关闭)</title> <style> * { margin: 0; ...原创 2019-05-10 20:09:34 · 1041 阅读 · 0 评论 -
进度条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>进度条</title> <style> * { margin: 0; padding:...原创 2019-05-10 20:08:01 · 74 阅读 · 0 评论 -
搜索框获取焦点失去焦点
搜索框获取焦点 onfocus()搜索框失去焦点 onblur()搜索框值默认为羽绒服,当首次点击搜索框时搜索框值变为空,当搜索框失去焦点时,如果搜索框的值为空,则搜索框值置为‘羽绒服’,再次点击搜索框时,如果搜索框的值未改变还是羽绒服,则搜索框值置为空,否则搜索框值不改变<!DOCTYPE html><html lang="en">&l...原创 2019-05-15 15:26:11 · 1678 阅读 · 0 评论 -
ES5新添函数和数组方法
ES5新增函数方法bind方法:改变了函数内部上下文的this指向。返回值是函数。 var food = '辣条'; var shop = { food: '火腿肠' }; function eat() { console.log(this.food); } ...原创 2019-05-06 21:16:27 · 128 阅读 · 0 评论 -
获取浏览器窗口宽高和浏览器滚动条宽高
1、浏览器宽高document.documentElement.clientWidth;document.documentElement.clientHeihgt;2、获取浏览器滚动条宽度/高度 显示的数值是页面上方滚上去的隐藏的内容的数值 var iScrollTop = document.documentElement.scrollTop...原创 2019-05-10 20:31:07 · 296 阅读 · 0 评论 -
如何通过classname获取DOM节点列表
function byClassName(className) { //高级浏览器 if(document.getElementsByClassName){ return document.getElementsByClassName(className); ...原创 2019-05-10 21:10:24 · 3219 阅读 · 0 评论 -
访问节点样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>访问节点样式</title> <style> #parent { border: 1px solid red;...原创 2019-05-10 21:57:24 · 107 阅读 · 0 评论 -
选项卡
这是仿照京东写的选项卡,在很多网站也可以看见类似的界面,算是低配版的选项卡html部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title> <link rel="style...原创 2019-05-16 22:15:22 · 180 阅读 · 0 评论 -
模拟键盘
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模拟键盘</title> <style> * { margin: 1px; paddi...原创 2019-05-27 21:55:04 · 139 阅读 · 0 评论 -
原生js实现拖拽效果代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽效果</title> <style> * { margin: 0; padding...原创 2019-06-03 16:01:32 · 127 阅读 · 0 评论 -
九宫格拖拽交换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>九宫格拖拽交换</title> <style> * { margin: 0; padd...原创 2019-06-10 16:04:27 · 297 阅读 · 0 评论 -
ajax连接后端代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax</title> <script> window.onload = function () { var...转载 2019-07-05 15:29:24 · 522 阅读 · 0 评论 -
文本隐藏显示省略号
1、单行隐藏(本文省略HTML中的代码,因为HTML中只有p标签和文字内容) <style> p { white-space: nowrap;/*强制一行显示*/ overflow: hidden;/*超出元素默认宽度内容隐藏*/ text-overflow: ellipsis;/*使用...原创 2019-04-18 21:27:23 · 488 阅读 · 0 评论 -
小黄人案例
小黄人案例:用代码在网页显示一个小黄人,可用于加强自己对定位和动画的印象,整个代码三百多行,最终实现效果如下:(头发和眼睛具有动画效果)代码相关视频:链接:https://pan.baidu.com/s/1G3fS6uAXsg-5ibUpsBjakg提取码:3qc4复制这段内容后打开百度网盘手机App,操作更方便哦<!DOCTYPE html><h...原创 2019-04-18 20:40:33 · 1368 阅读 · 0 评论 -
date对象的应用和常用方法
一、date对象的基本应用1、空构造函数获取当前时间var d = new Date();console.log(d);结果如下:2、构造函数中传入毫秒值 获取对应时间var a = new Date(1502088177988);console.log(a);3.可以传入日期形式的字符串var b = Date('1998-8-8 8:8:...原创 2019-04-27 22:18:38 · 840 阅读 · 0 评论 -
预解析
1.变量提升,把变量的声明提升到当前作用域的最上面,不包括变量的赋值2.函数提升,把函数的声明提升到当前作用域的最上面,不包括函数的调用//在函数和变量都发生预解析时,函数优先eg:var a = 25;function abc(){ alert(a); var a = 10;}abc();结果:undafinedeg:console.log(...原创 2019-04-22 19:58:36 · 79 阅读 · 0 评论 -
函数相关知识
1、arguments 我们可以在不确定实参个数时用arguments获取函数调用的时候的实参 argument不是数组 /!*求任意个数的最大值*!/ function getMax(){ var max=arguments[0]; for (var i = 1; i < arguments.le...原创 2019-04-21 21:56:24 · 125 阅读 · 0 评论 -
数组常用方法
Array.isArray(arrayname);判断是否是数组 HTML5 toString(); valueOf(); push(); pop(); shift(); unshift(); reverse(); sort(); concat(); slice(); splice(); indexof(); lastindexof(); every(); filte...原创 2019-04-26 20:54:09 · 101 阅读 · 0 评论 -
数组的相关知识
清空数组arr.length = null; arr = []; arr.splice(0,arr.length());二维数组的创建:1var arr = new Array(); for(var i = 0;i<3;i++){ arr[i] = new Array(); }2、var arr = [[...原创 2019-04-25 22:03:33 · 70 阅读 · 0 评论 -
九九乘法表如何对齐
九九乘法表对齐方法就是在第二层循环中加'\t',此方法本人只在javascript上证实过,其他语言并不清楚var str = '';for (var i = 0;i<5;i++){ for (var j = 0; j <= i; j++) { str = str + i + "*" + j + "=" + (j*i) +...原创 2019-04-25 20:37:09 · 1992 阅读 · 0 评论 -
盒子垂直居中的三种办法
1、先让盒子的上下边缘和父盒子的垂直中心线重叠,然后再让子盒子往移动自身的一半距离这其实有两种方法:第一运用定位 .father { width: 300px; height: 300px; border: 1px solid red; position: relativ...原创 2019-04-18 21:54:22 · 5604 阅读 · 0 评论 -
盒子水平居中的方法
1、使用margin:0 auto;2、使用margin左右边距3、先让盒子左移父盒子的一半,再用变形或者定位把子盒子右移子盒子的一半4、把盒子换成行内块元素,然后用text-align属性使盒子水平居中...原创 2019-04-18 22:00:11 · 648 阅读 · 0 评论 -
javascript类型转换
一、转换成字符串使用toString方法:此方法不适合用于null和undefined,它们没有toString方法 var num = 18; var isRight = true; var a = null; console.log(num.toString()); console.log(isRi...原创 2019-04-19 22:04:40 · 459 阅读 · 0 评论 -
聊天对话框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>聊天对话框</title> <style> * { margin: 0; paddin...原创 2019-05-18 21:48:28 · 388 阅读 · 0 评论 -
日历
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>日历</title> <style> * { padding: 0; margin: ...原创 2019-05-13 21:49:54 · 130 阅读 · 0 评论 -
回到顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>回到顶部</title> <style> * { margin: 0; padding...原创 2019-05-13 20:05:38 · 126 阅读 · 0 评论 -
统计字符串中的每个字符的个数
代码如下:一共两种方法,一个用数组一个用对象,思路一样但代码长度还是有点差距的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>统计字符串中每个字符的个数</title> <script> ...原创 2019-05-08 20:47:08 · 1950 阅读 · 1 评论 -
javascript常见字符串函数
一属性:str.length长度 str.constructor字符串的创建函数二函数str.charAt(num);返回字符串在num位置的字符 str.charCodeAt(char);返回char对应的ASCII码 String.fromCharCode(num);返回ASCII码对应的字符 str.indexof(char);返回char第一次出现的对应位置 str.l...原创 2019-05-08 20:42:05 · 121 阅读 · 0 评论 -
遍历对象和删除属性
1、遍历对象属性访问时是obj['name'] 而使用for in方法时则是obj[key]一个带单引号一个不带单引号 另外此方法还可以输出方法名和方法内容,比如这里就输出f(){console.log(this.name + ':hello');} var obj = { name:'zs', age: 18, ...原创 2019-04-24 21:57:05 · 1499 阅读 · 0 评论 -
对象的四种创建方法
1、对象自变量方法 较为简便var hero = { name:'黄忠', weapon: '弓箭', equiment: ['弓箭','靴子','盔甲'], attack: function () { console.log(this.name + ':射...原创 2019-04-24 21:18:42 · 345 阅读 · 0 评论 -
定义对象
1.定义对象var student = {name:"张飞",age:18,sex:'男',sayHi:function(){ //方法console.log('hello'); }}2、对象:属性和方法函数和对象的区别:函数可以封装一段代码,对象封装一组属性和方法函数和方法的区别:函数独立存在着,调用时用函数名调用,方法属于对象,调用时用对象名...原创 2019-04-24 20:37:00 · 640 阅读 · 0 评论 -
console常用方法
console常用方法console.log:输出普通信息console.warn:输出警示信息。console.info:输出提示性信息。console.error:输出错误信息。console.debug:输出调试信息。console.group:开始一组输出信息。console.groupEnd:结束一组输出信息。console.time:必须传入一个字段标识...原创 2019-04-21 16:18:20 · 3373 阅读 · 0 评论