小云　　　　-CSDN博客

原创 JS遍历对象方法

遍历对象对比方式基本属性原型链不可枚举Symbolfor in是是否否Object.keys()是否否否Object.getOwnPropertyNames()是否是否Object.getOwnPropertySymbols()否否是是Reflect.ownKeys()是否是是for infor in 循环是最基础的遍历对象的方式，它还会得到对象原型链上的属性// 创建一个对象并指定其原型，bar 为原型

2021-08-10 22:31:23 201

原创 JS实现数组扁平化方法

实现数组扁平化数组扁平化概念数组扁平化是指将一个多维数组变为一维数组[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]实现1. reduce遍历数组每一项，若值为数组则递归遍历，否则concat。function flatten(arr) { return arr.reduce((result, item)=> { return result.concat(Array.isArray(item) ? flat

2021-08-10 22:29:37 213

原创 Ajax请求

数据处理方式归类:常见改变原数组的:splice() 添加/删除sort() 数组排序pop()删除数组中的最后一个元素,返回这个元素push() 向数组的末尾添加一个元素,返回数组长度unshift() 向数组的开头添加一个或更多元素，并返回新的长度。reverse() 颠倒数组中元素的顺序fill() 填充数组split()把一个字符串分割成字符串数组常见不改变原数组的:slice() 截取数组join() 数组转字符串toString() 数组转字符串cancat

2021-08-10 22:24:37 168

原创 CSS Flex布局(多图易懂易掌握)

先放总结用于父元素的属性display:flex;(设置为弹性盒布局)flex-direction;(修改主轴方向(主轴方向修改,则交叉轴方向也修改))flex-wrap;(让元素换行)justify-content;(修改子元素在主轴上的分布方式)align-items;(修改子元素在交叉轴上的分布方式)用于子元素的属性flex-grow(默认不占用剩余空间,flex-grow:1则占用剩余空间)flex-shrink(如果父元素不停缩小,默认子元素可压缩,flex-shr

2021-04-27 17:59:17 426

原创 JavaScript简易验证码生成以及验证

JavaScript简易验证码生成以及验证随机数生成验证码,和输入框数据匹配,根据结果提示用户.完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #checkCode { background: #9e9e9e;

2021-04-26 22:10:29 157

原创 JavaScript作用域与执行上下文的区别与联系

1,区别1全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了,而不是在函数调用时.全局执行上下文环境是在全局作用域确定之后,JS代码马上执行之前创建.函数执行上下文是在调用函数时,函数体代码执行之前创建.2,区别2作用域是静态的,只要函数定义好了就一直存在,且不会再变化.执行上下文环境是动态的,调用函数时创建,函数调用结束时就会自动释放.3,联系上下文环境(对象)是从属所在的作用域.全局上下文环境==>全局作用域.函数上下文环境==>对应的函数适

2021-04-23 20:43:46 136

原创 jQuery实现下拉菜单

jQuery实现下拉菜单需要加载jQuery类库<script src="WEB-INF/js/jquery-1.12.4.js"></script>鼠标移入一级菜单则显示二级菜单完整代码<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <title>Title</title> <styl

2021-04-21 20:19:19 2025

原创 JavaScript数据类型以及判断类型方式

基本(值)类型String:任意字符串Number:任意数字boolean:true/falseundefined:undefinednull:null对象(引用)类型object:任意对象function:一种特别的对象(可以执行)Array:一种特别的对象(数值下标,内部数据是有序的)判断类型的几种方式1. typeof( 返回数值类型的字符串表达式)可以判断undefined/数值/字符串/布尔值/function不能判断null与Object ,不能判断object与ar

2021-04-21 00:03:20 72

原创数据、内存、变量分别是什么,以及三者之间的关系

1,什么是数据存储在内存中,代表特定信息的'东东',本质上是01010101. 数据的特点:可传递,可运输一切皆数据内存中所有操作的目标:数据算术运算逻辑运算赋值运行函数2.什么是内存内存条通电以后产生的可存储数据的空间(临时的) 内存产生和死亡:内存条(电路板)==>通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失一块小

2021-04-20 23:37:29 659

原创 HTML+jQuery折叠菜单

点击一级菜单则展开二级菜单展开收起动画效果完整代码,需要引入jQuery.JS文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; } .nav { list

2021-04-20 18:12:21 528

原创 HTML+JavaScript飞机大战小游戏简易版

点击开始游戏后拖动鼠标在蓝色区域内即可操作飞机移动打中敌方得分,被敌方碰撞则减分掉血运用延时调用函数实现连续发射子弹运用随机函数使敌方飞机在蓝图随机刷新运用坐标判断子弹和敌方飞机距离,碰撞则消失,加得分己方飞机图:50px*50px (plane.png)敌方飞机图:32px*32px (zdj.png)子弹图:32px*32px, (zidan.png)在HTML同层创建img文件夹,将图放入,配合代码则可运行,图片可更换,但是名字大小得一样完整代码<!DOC

2021-04-19 21:01:08 1587

原创 HTML+JavaScript拖拽进度条和点击进度条(显示进度条百分比)

实现进度条拖拽功能和点击功能,并显示占比实现图:附加改变区域位置,不影响进度条完整代码<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0;

2021-04-18 15:21:50 1725

原创 HTML+JavaScript获取鼠标位置

当鼠标移入框内,获取鼠标的坐标,并显示在下方 clientX可以获取鼠标指针的水平坐标 clientY可以获取鼠标指针的垂直坐标完整代码<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <title>Title</title> <style> #areaDiv {

2021-04-17 21:12:16 711

原创 HTML+JavaScript添加删除员工记录简易版

<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <title>Title</title> <style> table { border: 1px solid black; margin: 0 auto; } .table.

2021-04-17 09:11:52 298

原创 HTML+JavaScript的DOM增删改,父节点操作子节点

<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul li { float: l.

2021-04-16 11:10:11 214

原创 HTML+JavaScript制作的复选框的demo,全选,全不选,反选

HTML+JavaScript制作的复选框的demo,全选,全不选,反选<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { var i;

2021-04-15 23:08:14 224

lq24244的博客