03 2021 档案

div跟随鼠标移动
摘要：div跟随鼠标移动 <body style="width: 2000px;height: 1000px;"> <div id="box1" style="width: 100px;height: 100px;background-color: red;position: absolute;"></d 阅读全文
posted @ 2021-03-20 18:04 yuanliy 阅读(48) 评论(0) 推荐(0)
匀速运动
摘要：<button>动画</button> <div class="box" style="left:0px;position: absolute; width: 100px;height: 100px;background-color: pink;"></div> <script> var btn = 阅读全文
posted @ 2021-03-20 18:03 yuanliy 阅读(159) 评论(0) 推荐(0)
文本框高亮显示
摘要：<style> input{ display: block; } </style> <body> <ul><input type="text"><input type="text"><input type="text"><input type="text"></ul> </body> var inp 阅读全文
posted @ 2021-03-20 18:01 yuanliy 阅读(76) 评论(0) 推荐(0)
开、关窗口
摘要：<body> <a href="">点我打开一个新的页面</a> <a href="">点我关闭本页面</a> </body> var a1 = document.getElementsByTagName('a')[0] var a2 = document.getElementsByTagName( 阅读全文
posted @ 2021-03-20 18:00 yuanliy 阅读(48) 评论(0) 推荐(0)
获取鼠标距离所在盒子的位置
摘要：<style> .box { width: 300px; height: 200px; padding-top: 100px; background-color: pink; margin: 100px; text-align: center; font: 18px/30px '宋体'; curso 阅读全文
posted @ 2021-03-20 17:59 yuanliy 阅读(81) 评论(0) 推荐(0)
缓动动画的原理
摘要：<body> <button> 运动200 </button> <button>运动400</button> <div style="width: 100px;height: 100px;background-color: pink;position: absolute;"></div> </bod 阅读全文
posted @ 2021-03-20 17:57 yuanliy 阅读(48) 评论(0) 推荐(0)
高级各行高亮显示
摘要：<body> <table style="width:600px;" border="1" cellspacing="0" cellpadding="0"> <tbody id="tbody"> <tr> <td>序号1</td> <td>张三</td> <td>28</td> <td>保定</td 阅读全文
posted @ 2021-03-20 17:56 yuanliy 阅读(19) 评论(0) 推荐(0)
返回顶部的小火箭
摘要：<style> *{ margin: 0; padding: 0; } .content{ width: 100%; height: 100%; overflow-y: scroll; } #box{ width: 100%; height: 3000px; } #btn{ width: 150px 阅读全文
posted @ 2021-03-20 17:55 yuanliy 阅读(17) 评论(0) 推荐(0)
事件委托
摘要：<body> <ul id="parent-list"> <li><a href="javascript:;" class="my_link">超链接一</a></li> <li><a href="javascript:;" class="my_link">超链接二</a></li> <li><a 阅读全文
posted @ 2021-03-20 17:54 yuanliy 阅读(45) 评论(0) 推荐(0)
原型链和原型的继承
摘要：原型对象 原型的引入 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; //向对象中添加一个方法 this.sayName = function () { cons 阅读全文
posted @ 2021-03-17 19:44 yuanliy 阅读(140) 评论(0) 推荐(0)
对象的构建和构造函数
摘要：创建自定义对象的几种方法 方式一：对象字面量 对象的字面量就是一个。里面的属性和方法均是键值对： 键：相当于属性名。 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）。 使用对象字面量来创建一个对象，非常简洁，举例如下：： var obj = {}; 使用对象字面量 阅读全文
posted @ 2021-03-17 19:42 yuanliy 阅读(235) 评论(0) 推荐(0)
call、apply和bind
摘要：前言 JS 专门为我们提供了一些方法来改变函数内部的 this 指向。常见的方法有 call()、apply()、bind() 方法。 call() 方法 call() 方法的作用 call() 方法的作用：可以调用一个函数，与此同时，它还可以改变这个函数内部的 this 指向。 call() 方法 阅读全文
posted @ 2021-03-17 19:37 yuanliy 阅读(96) 评论(0) 推荐(0)
闭包
摘要：闭包的引入 我们知道，变量根据作用域的不同分为两种：全局变量和局部变量。 函数内部可以访问全局变量和局部变量。 函数外部只能访问全局变量，不能访问局部变量。 当函数执行完毕，本作用域内的局部变量会销毁。 比如下面这样的代码： function foo() { let a = 1; } foo(); 阅读全文
posted @ 2021-03-17 19:33 yuanliy 阅读(105) 评论(0) 推荐(0)
this指向
摘要：执行期上下文 当函数执行时（准确来说，是在函数发生预编译的前一刻），会创建一个执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境。 每调用一次函数，就会创建一个新的上下文对象，他们之间是相互独立且独一无二的。当函数执行完毕，它所产生的执行期上下文会被销毁。 参考链接：https:// 阅读全文
posted @ 2021-03-17 19:20 yuanliy 阅读(105) 评论(0) 推荐(0)
css笔记
摘要：2/28 1.文本标签和容器标签 文本标签：p a span b s del sub sup u i em 含义：放文本，图片 容器标签：div h1-h6 ul li ol dl dt dd header nav section article aside footer 含义：放任何东西 1.单位 阅读全文
posted @ 2021-03-16 20:09 yuanliy 阅读(89) 评论(0) 推荐(0)
数组的常见方法
摘要：数组的方法清单 数组的类型相关 方法 描述 备注 Array.isArray() 判断是否为数组 toString() 将数组转换为字符串 Array.from(arrayLike) 将伪数组转化为真数组 Array.of(value1, value2, value3) 创建数组：将一系列值转换成数 阅读全文
posted @ 2021-03-16 20:05 yuanliy 阅读(151) 评论(0) 推荐(0)
作用域与变量提升
摘要：作用域、变量提升的知识点，面试时会经常遇到。 作用域（Scope）的概念 概念：通俗来讲，作用域是一个变量或函数的作用范围。作用域在函数定义时，就已经确定了。 目的：为了提高程序的可靠性，同时减少命名冲突。 作用域的分类 在 JS 中，一共有两种作用域：（ES6 之前） 全局作用域：作用于整个 sc 阅读全文
posted @ 2021-03-16 20:02 yuanliy 阅读(132) 评论(0) 推荐(0)
圣杯局部和双飞翼布局
摘要：圣杯布局和双飞翼布局的效果都是两边定宽，中间自适应。随着页面的移动中间的大小发生改变。但是到达一定的情况下，布局不在水平布局。 下面我将详细讲解圣杯布局和双飞翼布局的思想。资源参考于https://www.jianshu.com/p/81ef7e7094e8 圣杯布局 思想：假设左边定宽180px, 阅读全文
posted @ 2021-03-11 16:44 yuanliy 阅读(69) 评论(0) 推荐(0)
解决css英文换行问题
摘要：效果图 浏览器不像是中文，一般不会识别英文自动换行问题，所以需要添加worde-break 阅读全文
posted @ 2021-03-08 14:09 yuanliy 阅读(281) 评论(0) 推荐(0)
存在即合理--字体样式大全
摘要：![](https://img2020.cnblogs.com/blog/2189220/202103/2189220-20210304155636988-1436322132.png) 阅读全文
posted @ 2021-03-04 15:58 yuanliy 阅读(116) 评论(0) 推荐(0)
存在即合理---个别软件下载
摘要：ScreenToGif https://www.screentogif.com/下载 阅读全文
posted @ 2021-03-04 15:48 yuanliy 阅读(45) 评论(0) 推荐(0)
sublime Text3常见插件汇总
摘要：插件 安装： 直接下载安装包解压缩到Packages目录（preferences >Browse Packages显示已安装的插件）。 用Package Control安装插件： 1.按Ctrl+ `(此符号为tab按键上面的按键) 调出console（注：避免热键冲突） 粘贴以下代码到命令行并回车 阅读全文
posted @ 2021-03-04 14:58 yuanliy 阅读(1256) 评论(0) 推荐(0)
省略的方法
摘要：单行省略： overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行文本省略： overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line- 阅读全文
posted @ 2021-03-03 15:54 yuanliy 阅读(78) 评论(0) 推荐(0)