![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
H5
冒泡的大鱼
这个作者很懒,什么都没留下…
展开
-
Vue实现简单学生管理的功能
说明,页面上的html与css可以直接复制粘贴使用css样式1:#home1{ width: 1000px; height: 100%; margin: 50px auto; /* background-color: #ccc; */}.home_h1,.home1_h2{ /* margin: auto; */ text-align: center; background-color: #333; color: #fff; .原创 2020-09-01 22:25:12 · 2879 阅读 · 1 评论 -
CSS样式盒模型一些Tips
盒模型tips,直接上例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- <link rel="sty原创 2020-09-01 22:16:21 · 135 阅读 · 0 评论 -
Vue中常用绑定class的三种方法
绑定class的三种方法:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet"原创 2020-08-31 22:09:42 · 894 阅读 · 0 评论 -
Vue中v-cloak/v-pre的作用
v-clock的作用:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-cloak]{ d原创 2020-08-31 22:07:47 · 719 阅读 · 0 评论 -
Javascript中的正则表达式使用
正则表达式说明:1、 正则表达式,又称规则表达式。 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式通常用来检索、替换那些符合某个规则的文本。2、定义正则表达式有两种形式: 构造函数方式: new RegExp(pattern, attributes); 例:var reg=new RegExp(“abc","g"); 构造函数中的正则可以是常量字原创 2020-08-27 22:33:21 · 171 阅读 · 0 评论 -
Javascript中同步和异步的任务解析
微任务与宏任务:因为浏览器的任务队列不止一个,还有 microtasks 和macrotasks microtasks(微任务): process.nextTick、 promise、 Object.observe、MutationObserver macrotasks(宏任务):setTimeout、setInterval、setImmediate、I/O、UI渲染 据whatwg规范介绍: 一个事件循环(event loop)会有一个或多个任务队列(task queue) 每一个 ev原创 2020-08-27 22:30:11 · 141 阅读 · 0 评论 -
JavaScript中常用操作滚动条API
滚动条API:获取页面的滚动条:var pageScroll = document.body.scrollTop; //谷歌var pageScroll = document.documentElement.scrollTop;scrollLeft: 设置或获取当前左滚的距离,即左卷的距离scrollTop:设置或获取上滚的距离,即上卷的距离scrollHeight:获取对象可滚动的总高度scrollWidth:获取对象可滚动的总高度onscroll事件:元素滚动条在滚动时触发。应用:原创 2020-08-27 22:27:44 · 537 阅读 · 0 评论 -
JavaScript的事件委托解析
事件委托: 什么是事件:通俗讲onclick,onmouseover,onmouseout等就是事件。 什么是委托:就是这个事件本来是加在某些元素上的,而你却加到其他元素上来完成这个事件。 原理:利用事件传播的特征 具体来说:事件委托就是事件目标自身不处理事件,而是把处理事件委托给其父元素,甚至是document来完成 优点: 1、提高性能和效率 2、减少事件注册,节省内存占用 3、未来元素无须再次注册事件...原创 2020-08-27 22:25:23 · 115 阅读 · 0 评论 -
Javascript的事件对象
事件流概念:1、 事件流:事件的流向,事件的执行顺序。 当子元素和父元素都定义了相同的事件,比如都定义了onclick事件, 点击子元素时,父元素的onclick事件也会被触发。 JS里称这种事件连续发生的机制为事件冒泡或者事件捕获。 IE:事件从里向外发生,事件从最精确对象(target)开始触发,然后到最不精确的对象(document)触发,即事件冒泡 网景:事件从外向里发生,事件从最不精确的对象(document)开始触发,然后到最精确对象(target)触发原创 2020-08-27 22:23:36 · 138 阅读 · 0 评论 -
JavaScript的计时器的基本用法
计时器的基本用法: setInterval ( 函数 , 毫秒数 ) 表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数 , 毫秒数 ) 表示经过一定的毫秒后,只执行一次相应的函数(不重复) 清除计时器: clearInterval( timerId ); clearTimeout( timerId );...原创 2020-08-26 22:35:06 · 221 阅读 · 0 评论 -
JavaScript的Math对象基本用法
Math对象的基本用法:1、Math 对象用于执行数学任务。Math是一个内置对象,不需要创建,可以直接使用。2、Math对象常用API: Math.PI --------------返回圆周率3.1415926... Math.ceil(x) ----------对数值x进行向上取整 Math.floor(x) --------对数值x进行向下取整 Math.round(x) -------对数值x进行四舍五入 Math.abs(x) ----------返回原创 2020-08-26 22:33:52 · 364 阅读 · 0 评论 -
Javascript的基本包装类型解析
基本包装类型的解析:1、基本类型:Undefined,Null,Boolean,Number,String2、 var str = 'hello'; //string 基本类型 var s2 = str.charAt(0); //为什么它能召唤出一个 charAt() 的方法? //在执行到这一句的时候 后台会自动完成以下动作 : ( var _str = new String('hello'); // 1 找到对应的包装对象类型,然后通过包装对象创建出一个和基本类型值原创 2020-08-26 22:32:11 · 102 阅读 · 0 评论 -
Javascript的字符串的基本操作
字符串JavaScript的字符串就是用' '或" "括起来的字符。字符串之间使用 + 号进行拼接。1、创建字符串: var str1 = 'abc'; var str2 = new String('abc');2、字符串方法: length:属性返回字符串的长度(字符的个数) str1.length; // 3 可以通过索引访问字符串中的某个字符:str1[0]、str1[1]3.字符串常用API API(Application Progr原创 2020-08-26 22:30:01 · 215 阅读 · 0 评论 -
DOM的基本操作和用法
DOM的概念: Document Object Model -- DOM 文档 对象 模型 DOM是针对HTML和XML文档的一个API。 DOM描绘了一个层次化的节点树,即HTML文档中的所有内容都是节点(node)。 DOM树中的所有节点均可通过JS进行访问,允许开发人员添加、移除、修改和查询页面的某一部分。节点类型:1、 整个文档是一个文档节点 每个HTML元素是元素节点 HTML元素内的文本是文本节点(回车也是文本节原创 2020-08-26 22:28:00 · 792 阅读 · 0 评论 -
BOM的基本操作和用法
BOM的概念和作用BOM的概念与作用: Browser Object Model -- BOM 浏览器 对象 模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象,核心对象是window。 JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM缺乏标准 BOM最初是Netscape浏览器标准的一部分。直到HTML5发布,W3C将 BOM 主要内容纳入了 HTML5 规范之中。 BOM是为了操作浏览器对象出现的API,w原创 2020-08-26 22:20:39 · 1602 阅读 · 0 评论 -
JavaScript中日期对象中常用的方法
Date对象:1、创建Date对象: var d = new Date(); console.log(d); Fri Aug 21 2020 11:32:42 GMT+0800 (中国标准时间)2、时间获取: getFullYear()------从 Date 对象以四位数字返回年份。 getMonth()---------从 Date 对象返回月份 (0 ~ 11)。 getDate()----------从 Date 对象返回一个月中的某一天 (1 ~原创 2020-08-25 22:38:46 · 216 阅读 · 0 评论 -
Javascript中面向对象与面向过程的区别
面向对象与面向过程之间的区别: 面向过程是一种直接的的编程方法,它是按照编程的思路考虑问题,通过顺序执行一组语句来实现一个功能。 面向过程可以说是从细节方面考虑问题 面向对象可以说是从宏观方面考虑问题 面向过程 ==> ‘自己造电脑' 面向对象 ==> ‘自己组装电脑’ 小结: 面向对象 目标 => 对一个对象进行编程 构造函数 作用 => 提供一个对象供你编程 通过构造函数实现面向原创 2020-08-25 22:34:46 · 421 阅读 · 0 评论 -
JavaScript的混合模式用法
混合模式的用法: 1、混合使用构造函数模式和原型模式,是目前JS中使用最广泛、认同度最高的一种创建对象的方法 2、构造函数模式用于定义实例属性,原型模式用于定义共享的属性和方法,即可以共享方法,又可以向构造函数传递参数,集两种模式之长! 例如: // 混合模式: function Cat(name,sex,age){ this.name = name; this.sex = sex; this.age = ag原创 2020-08-25 22:32:45 · 523 阅读 · 0 评论 -
JavaScript的原型模式的用法
原型模式的用法:每个函数都有一个prototype(原型)属性,这个属性指向一个对象,即原型对象. --prototype的作用是:所有添加到prototype中的属性和方法都将被所有对象实例共享。(继承) 例子: //原型模式: function Cat(){ Cat.prototype.name = '折耳猫'; Cat.prototype.age = 3; Cat.prototype.sayHi = f原创 2020-08-25 22:30:23 · 78 阅读 · 0 评论 -
JavaScript的构造函数的用法
构造函数的用法: --当任意一个普通函数用于创建一类对象,并且通过new操作符来调用时,它就可以作为构造函数。 --作用:构造新对象,设置对象的属性和方法 ECMAScript提供了多个内置构造函数,如 Object、Array、String、Boolean、Number、Date…等等。 var obj = new Object(); var arr = new Array(); ECMAScript允许自定义构造函数 按照惯例,构造函数通常以一个大写字母开头!原创 2020-08-25 22:27:48 · 336 阅读 · 0 评论 -
JavaScript的面向对象编程的工厂模式
面向对象:1、面向对象是一种软件开发方法,它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的灵活性、重用性和扩展性。2、面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物,是一种高级的编程思想。3、面向对象的特征:封装、继承、多态、抽象工厂模式:1、工厂模式是软件工程领域一种常见的设计模式,这种模式抽象了创建对象的具体过程。原料 => 加工 => 出厂用函数来封装创建对象的具体过程: function createCat(na原创 2020-08-24 22:33:37 · 178 阅读 · 0 评论 -
Javascript的回调函数其他函数解释
this对象的说明:1、this是js的一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。this的指向在函数运行时才进行绑定。声明提升机制: 1、在 JavaScrip 中变量声明和函数声明,声明会被提升到当前作用域的顶部。 2、js解析器: 浏览器中有一套专门解析JS代码的程序,这个程序称为js的解析器。 浏览器运行整个页面文档时,遇到<script>标签时JS解析器开始解析JS代码。 3、js解析器的工作步骤: 1.预解析代原创 2020-08-24 22:30:40 · 211 阅读 · 0 评论 -
CSS的动画animation与Transition的用法
Transition用法: 1、属性名称:property 2、过渡时间:duration 3、延迟时间:delay 4、时间函数:timing-function 例子:transfrom:rotate(45deg); transtion:transform 2s linear 2s; 属性名称 过渡时间 时间函数 延迟时间 实用小贴士: 1、display不能和transition一起使用 2、transition后面尽量不要跟all 3、常见的闪动 我们原创 2020-08-24 22:25:46 · 251 阅读 · 0 评论 -
JavaScript的Tab选项切换面向对象的封装
Tab切换面向对象的封装(4)注:本文图片自己进行替换,创建一个文件夹,然后可以使用我的 01.png 02.png 03.png 04.png进行命名,或者自己自定义命名进行替换即可。 CSS样式与Js都不需要改变。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w原创 2020-07-23 22:09:27 · 153 阅读 · 0 评论 -
JavaScipt的拷贝继承事例
第四种:拷贝继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <原创 2020-07-23 21:03:51 · 75 阅读 · 0 评论 -
JavaScipt组合继承方法
第三种 组合继承方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> &l原创 2020-07-23 21:01:25 · 78 阅读 · 0 评论 -
JavaScript常见继承方法
第二种方法 原型链继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> &原创 2020-07-23 20:59:26 · 106 阅读 · 0 评论 -
JavaScript的常见继承方法
第一种方法 构造函数继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>原创 2020-07-23 20:56:07 · 77 阅读 · 0 评论 -
JavaScript实现倒计时的效果
Js实现倒计时效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>原创 2020-07-13 22:07:21 · 248 阅读 · 0 评论 -
JavaScript实现圆周运动
Js实现圆周运动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {原创 2020-07-13 22:04:10 · 667 阅读 · 0 评论 -
封装一个函数,将传入的时间戳转换为某些日期格式,如 time(15665568763,格式1) -」 YYYY-MM-DD hh:mm:ss
封装一个函数,将传入的时间戳转换为某些日期格式: function tranFormat(num, mat) { var date = new Date(num); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var hour = date.原创 2020-07-13 21:56:31 · 1023 阅读 · 0 评论 -
Javascript实现桶排序
Js实现桶排序: //桶排序 //1、创建桶 //2、遍历数据,向对应编号的桶灌水 //3、把所有有水的桶的编号取出 var arr = [3, 1, 9, 45, 2, 5]; document.write("原数组:"+ arr +'<br/>'); // console.log(arr); function bucketSort(arr) { var b原创 2020-07-09 22:32:21 · 420 阅读 · 3 评论 -
Javascript封装冒泡排序
Js冒泡排序://冒泡排序: //相邻元素进行互相交换 var arr1 = [56, 3, 89, 34, 9, 2]; console.log(arr1); function bubbleSort(arr,flag) { for (var i = 0; i < arr.length - 1; i++) { //冒泡排序的循环的次数 for (var j = 0; j原创 2020-07-09 22:14:08 · 377 阅读 · 0 评论 -
Javascript实现选择排序
Js实现选择排序: var arr = [2, 56, 7, 9, 34, 67]; console.log(arr); //选择排序 //1、假设最小值及最小值的下标 //2、依次比较找最小值及下标 //3、假设的最小值与实际的最小值换位 function selectSort(arr, flag) { for (var i = 0; i < arr.length - 1; i原创 2020-07-09 21:26:37 · 182 阅读 · 0 评论 -
JavaScript封装快速排序
Js实现快速排序: //快速排序 var arr = [78, 3, 5, 89, 5, 2]; function quickSort(arr, flag) { if (arr.length <= 1) { //快排的出口条件 return arr; } var midIndex = parseInt(arr.length / 2); //找到数组的中间下原创 2020-07-09 21:15:50 · 134 阅读 · 0 评论 -
Js面试知识点
数组:1、使用new运算符创建时数组 参数:是我们要在数组中存储的数组 参数:如果当前的参数,只有一个,并且这个参数是数字的话。数组长度为10的数组。 var arr = new Array(1,true,"哈哈"); var arr = new Array(10);2、省略new运算符创建数组 var arr = Array(1,true,"喜喜");3、通过常量来创建数组: 【注】 1、在数组中存储的数据,一般情况下叫数组中的元素。 2、数组元素的访问是:通过下标完成,下标,原创 2020-07-06 20:16:08 · 99 阅读 · 0 评论 -
H5基础知识点
1、标题HbuildX常用的快捷键:1. ctrl+/ 注释代码2. ctrl+y 恢复撤销3. ctrl+x 剪切4. ctrl+p 在当前项目查找文件5. ctrl+f 在当前文件查找字符串6. ctrl+alt+f 在当前目录查找字符串7. ctrl+k 格式化代码8. ctrl+g 跳转到某行代码9. ctrl+o 打开文件10. 鼠标左键+ctrl选中多行(可进行多行修改操作)11...原创 2020-06-24 08:41:12 · 3002 阅读 · 0 评论