自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(34)
  • 收藏
  • 关注

原创 ES6面向对象 观察者模式实现video视频的弹幕功能与基础组件

ES6面向对象实现 video 视频的弹幕功能与基础组件实现目标1、打开网页自动播放视频(因为谷歌不支持video标签在有声音的情况下自动播放,所以要设置muted)2、使用观察者模式,监视每一条弹幕3、将每一条弹幕元素加入Set列表中,给每一条弹幕添加定时器,使他运动,当文字尾部移出视频时,将该弹幕元素从Set列表中删除,同时删除该元素的定时器4、实现重写controls组件,暂停,上一个视频,下一个视频5、实现当前视频结束时,播放列表中下一个视频6、实现视频网页开关灯7、ES6面向对象

2020-11-21 19:59:13 1032 4

原创 ES6面向对象三级级联省、市、区菜单

ES6面向对象三级级联省、市、区菜单实现目标:nodejs加ES6面向对象实现省市县的三级级联菜单接口文档项目列表接口index.html:http://10.9.72.220:4001URL :http://10.9.72.220:4001Method :GETDataType : 请求消息: QueryString 响应消息: JSON接口名称1、?type=province ?type=city?type=district2、http://10.9.72.22

2020-11-16 08:04:54 115

原创 node.js+MySql数据库+HTML实现内部查重系统

node.js+MySql数据库+HTML实现内部查重系统实现目标:1、将每个人的项目登记,存入MySql数据库2、在填写时进行实时正则判断,判断每项输入格式是否正确,方便之后进行查重对比3、设置查询按钮,可以在填写提交自己的项目之前看到大家的提交详情4、提交时,在数据库中进行姓名对比,每人只能提交一次,不能重复提交5、提交时,项目网址与项目中文名会在MySql数据库中进行查询对比,双重保险,避免只查询一项造成漏网之鱼6、提交完成后自动跳转到查询页面7、提交填写页面与服务端使用form表单通

2020-11-14 20:53:07 139

原创 JavaScript+HTML5+CSS3完美实现ToDoList(详细注释)

JavaScript+HTML5+CSS3完美实现ToDoList实现目标:实现在todolist中添加未完成事件,事件完成后点击checkbox多选框可以将该事件移入donelist列表中,双击事件名称可更改事件名称,点击“-”实现删除该事件,点击清空可清除全部事件,利用localStorsge实现本地长期存储,关闭浏览器再次打开浏览器可直接显示上次对该页面最后操作所显示的样式。整体思路1、title中输入事件,点击回车后添加到未完成事件todolist列表中2、点击todolist列表中未完成

2020-11-03 20:06:54 171

原创 cookie实现京东五星好评组件评分数据存储

cookie实现京东五星好评组件评分数据存储实现目标:实现京东五星好评部分的组件,实现鼠标经过星星时星星变红色,星星上方出现对应星级的笑脸,同时在评价n星后显示分数为n分,使用cookie缓存使用户在刷新页面后或者重新打开该页面时自动显示上次点击的星星评分,可重新评价,清除浏览器数据缓存后才会显示初始未评价页面。html代码部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&

2020-11-01 17:45:20 2300 7

原创 JavaScript正则表达式基础详解

JavaScript正则表达式基础正则表达式基础正则表达式是一种微型语言正则对于字符串的验证,替换,修改,切换数组等功能写法:var reg=/ 正则内容 /修饰符var reg=new RegExp(“正则内容”,“修饰符”)修饰符是针对正则的一种功能增强g 全局匹配i 不区分大小写m 执行多行匹配正则表达式表示方法:var reg=/a/gi;//查找全局字符串中不分大小写所有的Aavar str=“defAbgac”;var reg=/a/g;//查找是否含有aconso

2020-10-21 08:03:50 145

原创 JavaScript事件基础、事件原理、事件区别与兼容

JavaScript事件基础、事件原理、事件区别与兼容事件基础//侦听事件(侦听的类型,事件回调函数) 侦听类型必须字符串document.addEventListener(“abc”,abcHandler);//创建事件var evt=new Event(“abc”);//把事件向document抛发document.dispatchEvent(evt);//抛发的对象必须和侦听对象是同一个对象//所有继承了EventTarget的对象都可以进行事件侦听和抛发function ab

2020-10-20 21:14:47 150

原创 Event对象、MouseEvent对象、inputEvent对象和focusEvent对象

Event对象、MouseEvent对象、inputEvent对象和focusEvent对象Event事件change事件:多用于表单元素1、用于文本框时,当输入内容被修改并且失去焦点时触发2、select下拉菜单切换选项时触发,不用失去焦点,this.value就是下拉菜单的选项,仅限于下拉菜单,列表不可用3、用select.selectedOptions就是选中的所有选项组成的列表4、checked单选多选时也可以被激活var values=Array.from(select.select

2020-10-20 21:14:25 180

原创 BOM对象:Location对象、history对象、screen对象、navigator对象解析

BOM对象:Location对象、history对象、screen对象、navigator对象解析BOM浏览器对象模型BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。DOM与BOM的区别BOM是Browser Object Model的缩写,即浏览器对象模型。BOM没有相关标准。不同浏览器定义有差别,实现方式不同。BOM的最根本对象是window。DOMDOM是Document Object Model的缩写,即文档对象模型。D

2020-10-20 21:03:43 25

原创 DOM常见属性

DOM常见属性以下属性必须保证DOM已经添加在页面中,如果没有添加则无法调用client(客户) offset(偏移) scroll(滚动条)宽 clientWidth offsetWidth scrollWidth高 clientHeight offsetHeight scrollHeight client(客户) offset(偏移 scroll(滚动条)位 clientLeft offsetLeft scrollLeft置 clien

2020-10-20 21:01:27 35

原创 DOM的属性与DOM的样式

标题DOM的属性与DOM的样式DOM的属性相同的标签属性:id style className src title checked type placeholder disable value action method完全没有相同的标签属性:rowspan colspan对于部分属性名,标签属性和对象属性是共通的style 可以设置两种值,一种是字符串,一种是对象div.class=“abc”//不能使用classdiv.className="abc"等同于在标签中添加了class属性

2020-10-20 20:58:37 41

原创 DOM节点,DOM属性与DOM对象的样式

DOM节点,DOM属性与DOM对象的样式Document Object Model 文档对象模型DOM是针对HTML和XML文档的一个APIDOM描绘了一个层次化的节点树定义了访问和操作HTML文档的标准方法回流当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建过程叫做回流(reflow)。重绘当render tree中的一些元素发生变化,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。

2020-10-20 20:55:26 19

原创 JavaScript时间日期转中文显示与测试代码运行效率案例

JavaScript时间日期转中文显示与测试代码运行效率案例案例:计算i从0到1000000再到6000000的时间 var time = new Date().getTime(); var timeList = []; timeStart(); function timeStart() { timeList.length = 0; timeList[0] = new Date().getTime(); } var sum = 0; for (var i =

2020-10-20 20:49:44 34

原创 JavaScript日期时间详解

JavaScript日期时间详解日期与时间获取时间对象var date=new Date()时间的获取方法date.toString()date.toLocaleString()date.toLocaleDateString()date.toLocaleTimeString()date.toUTCString()Date() 返回当日的日期和时间。getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。getDay() 从 Date 对象返回一周中的某一天 (0

2020-10-20 20:46:36 25

原创 JavaScript内建对象Math数学方法

JavaScript内建对象Math数学方法Math数学运算方法Math的属性:E 返回算术常量 e,即自然对数的底数(约等于2.718)。LN2 返回 2 的自然对数(约等于0.693)。LN10 返回 10 的自然对数(约等于2.302)。LOG2E 返回以 2 为底的 e 的对数(约等于 1.414)。LOG10E 返回以 10 为底的 e 的对数(约等于0.434)。PI 返回圆周率(约等于3.14159)。SQRT1_2 返回返回 2 的平方根的倒数(约等于 0.707)。SQ

2020-10-20 20:43:40 30

原创 JavaScript内建对象Number,String

JavaScript内建对象Number,String一、Numbervar a=3//是栈中的3,number类型var b=new Number (3)// 内建对象Number,是堆中的3,通过对象创建数值型对象,可以对它进行扩展方法,Number类型b既能接受堆中的数据类型也能接受栈中的a只能接受栈中的这两个不相同 console.log(a===b)//falseNumber的属性:1、MAX_VALUE 可表示的最大的数。2、MIN_VALUE 可表示的最小的数。3、NaN

2020-10-20 20:40:31 22

原创 JavaScript循环结构控制语句(while,for,do...while)的解析

JavaScript循环结构控制语句(while,for,do…while)的解析循环语句判断条件,只要满足条件,就会不断的从头到尾重复执行,直到不满足条件时,跳出循环while (表达式){当表达式 为true 时,执行语句,为false 不执行}循环次数由初始值,条件和变化量来决定死循环出现的两种情况,1、条件不对,2、没有向条件外运行的过程while循环有3个重要的部分,1、起始值,2、条件,3、向条件外允许的过程条件 隐式转换为布尔值,进入循环必须依靠条件,跳出循环时,不一定依

2020-10-12 22:36:36 25

原创 选择结构控制语句(if,switch)的解析

选择结构控制语句(if,switch)的解析if使用三目运算符不能判断一次,解决多个问题,但是 if 语句可以实现if(条件){满足条件后执行的内容;}else{不满足条件时执行的内容}条件会自动隐式转换成布尔值当一个条件不能包含所有需求时,可以用 || 增加条件范围当一个条件包含内容超出需求时,可以用 && 缩减条件范围如果条件后执行的语句块仅有一句,可以省略{}if(a>5){b=6;}可以写成if(a>5) b=6;因为执行语句块不只一句,

2020-10-12 22:33:02 31

原创 利用JavaScript数组方法reduce实现every,some,concat,filter效果

利用reduce实现 concatvar arr=[6,9,7,4,5]; var str=arr.reduce(function(value,item,index,arr){ return value+"$"+item; }); console.log(str);利用reduce实现 everyvar arr=[6,9,7,4,5];var bool=arr.reduce(function(value,item){

2020-10-12 22:18:42 34

原创 JavaScript中数组的冒泡排序,快排,选择排序示例与sort方法的排序与乱序

JavaScript中数组的冒泡排序,快排,选择排序示例与sort方法的排序与乱序排序排序算法中最基础的算法类型数据驱动显示:根据数据重构页面冒泡排序 var arr=[3,38,5,44,15,36,26,27,47,2,46,4,19,50,48]; for(var i=0;i<arr.length-1;i++){ for(var j=i+1;j<arr.length;j++){ if(arr[i]>arr[j

2020-10-12 22:16:12 35

原创 新增的ES6数组方法 every,some,filter,reduce,flapMap,reverse解析与重构

新增的ES6数组方法 every,some,filter,reduce,flapMap,reverse解析与重构everyevery判断数组中所有元素是否都满足条件,返回一个布尔值(有一个不是就false) var arr=[2,4,6,8,10]; var bool=arr.every(function(item,index,arr){ return item>3; }); console.log(bool);重构every var arr=[

2020-10-12 22:11:30 33

原创 JavaScript数组join,forEach,map方法解析与重构

JavaScript数组join,forEach,map方法解析与重构joinvar str=arr.join();将数组转换为字符串,并且返回字符串join括号中是连接符,默认是逗号。(“-”),数字,true都会隐式转换为字符串,undefined不会显示,null转换为字符串空字符串,会将数组元素直接首尾相连,没有连接符("")重构joinvar arr=[1,2,3,4,5];function join(arr,separator){ if(separator=

2020-10-12 22:04:51 25

原创 JavaScript中数组去重的多种方法

JavaScript数组去重方法改变原数组去重:var arr=[1,4,2,3,1,4,2,1,2,3,4,1,1,2,3,2,1]; function removeDuplication(arr){ for(var i=0 ;i<arr.length;i++){ for(var j=i+1 ;j<arr.length;j++){ if (arr[i]===arr[j]

2020-10-12 22:02:00 33

原创 JavaScript数组isArray,from,slice,concat,indexOf,lastIndexOf 的解析及重构

JavaScript数组isArray,from,slice,concat,indexOf,lastIndexOf 的解析及重构数组的静态方法根据数组的类型创建了一个新的数组对象(数组的实例化对象)var arr=new Array(1,2,3);用数组的实例对象调用的方法,就叫做实例化对象方法arr.push();Array.from();这种方法没有使用实例化数组对象调用,而是直接使用数组类型调用方法,这种方法叫静态方法,类属判断,不是单独个体判断Array.isArray();判断

2020-10-12 21:59:40 23

原创 JavaScript数组中splice方法解析与重构

JavaScript数组中splice方法解析与重构splicesplice包括 开始,删除数量,添加的元素们,会返回被删除元素所组成的新数组arr.splice();不填时,创建一个空数组返回arr1=arr.splice(3);代表从下标是三开始删除到数组尾部,并将删除的元素放在新数组中返回arr1=arr.splice(-1);可以有负整数,从后往前,从倒数第一位删除到尾部arr1=arr.splice(3,1);从下标3开始删除一个元素,并且返回这个被删除的元素组成的新数组arr1=a

2020-10-11 20:05:12 21

原创 JavaScript数组与数组方法push,shift,unshift,pop重构

JavaScript数组与数组方法push,shift,unshift,pop重构对象类型的衍生体,是个对象,如果内容数据类型种类多会造成效率低只有值,没有key,可以出现重复值;按位置排列的,从零开始的数据顺序,相当于object中的key数组中的key默认隐式转换为数值类型作为下标,而对象为字符类型var arr1=[1,2,3,5,6];//123undefined56var arr2=[1,2,3,null,5,6];//123null56var arr3=[1,2,3,undefine

2020-10-11 20:01:30 25

原创 JavaScript自动轮播图

JavaScript自动轮播图1、布局2、定义当前第几张图片和应该向什么方向运动3、将需要放置的图片根据方向放在前面或者后面4、将整个容器向左或者向右移动,5、完成后将上一次的图片删除 // imgCon 放置所有图片的容器 // dotList 放置小圆点列表 // bnList 放置左右按钮的数组 // imgList 放置所有图片的数组 // pos是确定当前是第几个图片 // direction 图片

2020-10-06 20:42:19 76

原创 JavaScript函数基础详解

JavaScript函数基础详解将代码变成语句块的形式,通过调用函数名,可以完成该语句块所有语句函数名 命名规则和变量命名规则一样,都是驼峰式命名,见名思意,函数名表达函数执行的作用当执行到当前script标签时,预先将当前script标签中所有的命名函数先存储在堆中,并且在栈中给他定义函数名引用该函数地址script标签中的函数一旦创建成功,后面的所有script标签中都可以使用该函数,但是再当前script标签前的script标签不能使用,所以最好把装有函数的script写在最前面三种函数的

2020-10-06 20:03:18 69

原创 JavaScript对象与其复制清除方法简析

标题JavaScript对象详解var obj{属性1:属性值1, // 属性名=>key 不能重复属性2:属性值2, // 属性值=>value 是该属性的唯一值 (键值对数据 键=>key 值=>value 有键必有值)}var obj{a:1,b:2,c:3,}console.log(obj.a); //打印对象obj下属性a的value值obj.d=obj.a + obj.b; // 创建并给obj的d属性赋值,不需要vardocument.writ

2020-10-06 19:43:55 75

原创 利用原生JS写简单计算器

利用原生JS写简单计算器利用原生JS来写一个简单的计算器,其中主要是对利用JS新建标签和鼠标事件的应用<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document

2020-10-05 21:04:00 1901 2

原创 JavaScript运算符类型及用法

标题JavaScript运算符算数运算符 + - * / %1、 数值的+ , - ,* , / , %(取模)和数学运算完全相同2、 小数点运算时会产生误差3、 - * / % 都是隐式转换成数值,不论有没有字符+ 运算1、 如果是字符和非字符相加,则会自动将非字符隐式转换成字符 String() 此时+为拼接符首尾相连2、 数值 + NaN = NaN3、 true + false = 14、 如果一侧是布尔值,重要是另一侧值,会根据另一侧转换5、 如果两测都没有字符或者数值,就会

2020-09-29 10:20:57 1603 2

原创 简单的理解冒泡排序

冒泡排序冒泡排序,是一种较简单的排序算法。冒泡排序就是把小的元素往前调或者把大的元素往后调。比较是相邻的两个元素比较,交换也发生在这两个元素之间。所以,如果两个元素相等,是不会再交换的;如果两个相等的元素没有相邻,那么即使通过前面的两两交换把两个相邻起来,这时候也不会交换,所以相同元素的前后顺序并没有改变。它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果顺序(如从大到小、首字母从Z到A)错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换,也就是说该元素列已经排序完成。

2020-09-29 09:49:17 140

原创 关于CSS3中动画属性的基本知识

关于CSS3中动画属性的基本知识animation顾名思义为动画的意思。Animation应用在页面DOM上 使其产生动画的效果。在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Key s",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生。 animation vs transition 相同点:都是随着时间改变元素的属性值。 不同点:transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css

2020-09-29 09:47:21 430

原创 JavaScript 数据类型及类型转换

JavaScript 数据类型及类型转换JS是弱类型,如果没有给变量定义类型,那么这个变量可以随便改变值的类型,所以要考虑变量类型,才能操作1)字符型 string被双引号,单引号,`所引起来的都是字符型,字符再console内显示为黑色字体2)数值型 number整型 / 正整型 / 浮点型数值再console内显示为蓝色字体0开头数字 为八进制 eg:0620x开头数字为 十六进制 eg: 0x3avar a1 = 4e + 2 // 科学计数法 =>400var a1 = 0

2020-09-29 09:35:04 273

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除