- 博客(214)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 ES6--字符串新增的方法
ES6--字符串新增的方法一、子串的识别（1）includes()：返回布尔值，判断是否找到参数字符串。（2）startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。（3）endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。二、字符串重复--repeat()三、字符串补全（1）padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。（1）padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。四、String.fromCodePo.
2021-12-07 19:14:09
1063
3
原创 ES6--Map数据结构
ES6--Map数据结构一、Map的基本用法创建map结构二、Maps 和 Objects 的区别三、实例的属性和操作方法1. size 属性2. Map.prototype.set(key, value)3. Map.prototype.get(key)4. Map.prototype.has(key)5. Map.prototype.delete(key)6. Map.prototype.clear()四、 map集合的遍历方法1. Map.prototype.keys()：返回键名的遍历器。2. M.
2021-12-06 21:30:39
1984
4
原创 jquery实现表单数据的增删查改
一、效果图二、核心代码前端 searBtn.on("click",function(){ if(!searIpt.val()){ bgs.fadeIn(200); return; } getUser('http://127.0.0.1:8080/syssearch',searIpt.val()); }); .
2021-12-02 17:22:44
602
2
原创 jquery实现Ajax上传（带进度条）
一、效果图二、核心代码前端创建元素的方法 //创建元素的方法 function createPage(files) { for (var i = 0; i < files.length; i++) { var fileList = $("<div class='filelist_info'></div>"); var id = $("&l.
2021-12-02 17:22:24
1492
2
原创 jQuery中的Ajax事件
jQuery里面的事件一、$.get()方法1. 不需要传递数据2. 需要传递数据二、$.post()方法三、$.ajax()方法四、$.getJSON()五、$.getScript()一、$.get()方法jQuery.get(url, [data], [callback], [type])通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。jQuery 1.12 .
2021-12-02 17:22:05
472
2
原创 jQuery实现树形结构菜单
一、效果图二、核心代码树形结构菜单.html<script src="js/treemenu.js"></script> <script> //插件中的方法使用和配置 //使用Ajax后端返回菜单的数据 //下面用户可能设置相关配置 $("#menu").Init({ backGround: "#4667d8", color: '#fff', data: menu .
2021-12-02 17:21:39
1615
3
原创 jQuery实现碎片轮播
一、效果图二、核心代码碎片轮播.html<script src="js/suiBanner.js"></script> <script> //实例化整个对象 var suiBanner=$('.box').initBanner({ imgs: ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg'], //图片集合.
2021-12-02 17:18:27
203
2
原创 jQuery数据缓存
jQuery数据缓存参数说明参数说明key存储的数据名value将要存储的任意数据obj一个用于设置数据的键/值对[name]存储的数据名[list]移除数组或以空格分开的字符串方法概述data([key],[value])在元素上存放或读取数据,返回jQuery对象。当参数只有一个key的时候，为读取该jQuery对象对应DOM中存储的key对应的值，当参数为两个时，为像该jQuery对象对应的DOM中存储ke.
2021-12-02 17:18:00
1104
1
原创 jQuery对象访问
jQuery对象访问参数说明参数说明callback对于每个匹配的元素所要执行的函数selector一个选择器，代表一个jQuery对象，将会从这个对象中查找元素element获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器[index]取得第 index 个位置上的元素方法概述each(callback)以每一个匹配的元素作为上下文来执行一个函数lengthjQuery 对象中元素的个.
2021-12-02 17:17:41
283
原创 jQuery实现飞机大战小游戏
jQuery实现飞机大战小游戏一、效果图二、核心代码1.创建地图2.用户选择飞机界面3.设置背景循环4.创建飞机5.创建敌机6.敌机移动7.设置敌机爆炸8.创建子弹9.检测子弹的移动（是否打到敌机）10.设置敌机被消灭的情况一、效果图二、核心代码1.创建地图 this.createMap = function () { var that = this; that._bg = $("<div.
2021-12-02 17:17:21
1104
2
原创 jQuery对象合并
extend()jQuery.extend([deep], target, object1, [objectN])用一个或多个其他对象来扩展一个对象，返回被扩展的对象。如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。 未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。target,[object1],.
2021-11-12 16:22:15
1613
原创 jQuery里面的动画队列
jQuery里面的动画队列参数说明参数说明element检查附加列队的DOM元素queueName字符串值，包含序列的名称。默认是 fx, 标准的效果序列newQueue替换当前函数列队内容的数组callback()要添加进队列的函数方法概述queue(element,[queueName])显示或操作在匹配元素上执行的函数队列dequeue([queueName])从队列最前端移除一个队列函数，并执行他 .
2021-11-12 16:04:14
882
原创 jQuery实现树形员工信息表
jQuery实现树形员工信息表一、效果图二、核心代码一、效果图二、核心代码 var list = [ { name: "技术部", child: [ { name: "用户一" }, { name: "用户二" .
2021-11-12 14:10:05
653
1
原创 jQuery实现抖音钟表转盘动画
jQuery实现抖音钟表转盘动画一、效果图二、注意点三、核心代码一、效果图二、注意点1.jQuery动画暂不支持css3属性2.时间看的是水平线上方，所以时分秒的时间要-13.当秒和分的值转到60时，即0时，timearr[3]-1以及timearr[2]-1为负数，所以要设置当秒或分为0时，设置他为60；当时的值转到24时，即0时，timearr[1]-1为负数，所以要设置当时为0时，设置他为244.秒和分可以转到60，转到60的时候她有反着转转到了1，因为60已经转到了360度.
2021-11-11 20:43:30
1261
1
原创 jQuery动画案例1---循环变大变小
$(function(){ var speed=1000; var way=true; var width=200; $("#start").click(function(){ animate(); }); function animate(){ $("ul>li").each(function(index){ var ...
2021-11-11 16:31:26
795
1
原创 jQuery里面的动画
jQuery里面的事件参数说明参数说明speed三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)easing(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"fn在动画完成时执行的函数，每个元素执行一次。easing用来指定切换效果，默认是"swing"，可用参数"linear"fn在动画完成时执行的函数，每个元素执行一次out当.
2021-11-10 18:06:06
145
原创 jQuery对象与原生js的相互转化
1.jquery对象如何转换成原生js对象 console.log($("#btninfo")[0]);2.原生js如何转化为jquery对象 var id=document.querySelector("#btninfo"); console.log(id); console.log($(id));
2021-11-10 16:31:30
1088
原创 监听模式模拟事件监听
function Handle(){ this.events={}; this.addEventListener=function(type,fn){ //添加订阅 if(!this.events[type]){ this.events[type]=[]; } this.events[type].push(fn); }; ...
2021-11-10 16:31:17
138
3
原创 策略模式实现表单验证
//定义一个策略 var msg={ default:"输入格式不正确！", maxLength:"输入长度太长！", minLength:"输入长度不够！", isEmpty:"输入的值不能为空！", isNumber:"输入的值必须是纯数字！", success:"正确！" } //写验证规则 var ruleList={ isNumber:funct...
2021-11-10 16:31:01
222
3
原创 原型对象、原型链超详细讲解（附图解）
原型对象、原型链超详细讲解（附图解）一、函数的原型对象二、prototype（函数的原型)三、__ proto__(原型链)四、constructor（构造函数）五、prototype继承六、结论1.实例对象的原型链指向当前类的原型对象。2.原型对象的原型链指向Object函数的原型对象3.Object函数的原型对象的原型链指向null，Object的原型链是不存在的。4.所有对象最后都会指向Object函数的原型对象。七、图解过程一、函数的原型对象原型对象中有原型链—指向最高函数的原型对.
2021-10-30 17:19:19
4738
3
原创 js---封装Ajax
//封装Ajax //原生js处理异步编程的解决方案是匿名函数回调 function Ajax(method,url,data,callback){ var http; if(window.XMLHttpRequest){ http=new XMLHttpRequest(); } else{ http=new ActiveXObject("Microsoft.XMLHTT...
2021-10-24 11:48:28
131
3
原创 Ajax实现百度搜索
Ajax实现百度搜索一、效果图二、核心代码一、效果图二、核心代码 //搜索接口：http://www.baidu.com/s?wd=? //关键字联想搜索：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=callback var script,list,info; window.onload=function(){ list=documen.
2021-10-24 11:48:08
616
1
原创 js---Ajax访问远程api访问失败的处理方法
Ajax访问远程的api，存在访问失败的问题（跨域问题）一、如何产生跨域1. 协议不同https、httphttp://www.maomao.com:80https://www.maomao.com:802. 端口号不同63342、80|8080http://www.maomao.com:63342http://www.maomao.com:803. 域名不同http://www.xiaohei.com:80http://www.maodou.com:80二、产生跨域
2021-10-24 11:47:59
732
3
原创 js---使用Ajax访问本地服务器
//ajax只能请求服务器 //请求本地服务器 //ajax在请求本地服务器的时候不需要跨域 var http=new XMLHttpRequest(); http.open('get','http://localhost:63342/js/Ajax/json/data.json'); http.send(); http.onreadystatechange=function(){ if(http.readyState==1){ ...
2021-10-24 11:47:52
1478
3
原创 js---Ajax
js---Ajax一、Ajax简介1. 什么是 AJAX ？2. AJAX 工作原理3. 使用场景4. 优点二、AJAX---创建 XMLHttpRequest 对象1. XMLHttpRequest 对象2. 创建XMLHttpRequest对象三、AJAX---向服务器发送请求(五步法)1. 创建请求对象2. 建立服务器连接（1）什么是同步、异步？（2）使用GET 还是 POST？3. 发送请求4. 监听请求5. 数据渲染四、请求网页到渲染完成的过程一、Ajax简介AJAX 是一种在无需重新.
2021-10-24 11:47:42
155
3
原创 js正则实现用户登录注册
js正则实现用户登录注册一、效果图二、实现思路三、核心代码一、效果图二、实现思路第一步：分别对帐号、密码、验证码进行验证，先判断账号、密码、验证码的值是否存在，不存在则引出对应error信息。第二步：如果值存在，使用正则判断值是否符合要求，正确输出信息，不正确输出error的信息。第三步：设置表单失焦出现对应的error信息，获焦移除当前的error。第四步：表单提交的时候，按钮进行获焦，如果没有错误信息就进行提交，并且清除所有信息。三、核心代码 <.
2021-10-11 17:25:10
3593
原创 js---正则表达式
一、正则表达式简介正则表达式是做数据验证格式的。二、正则表达式的验证方式用match进行匹配匹配成功返回匹配集合，不成功返回null使用regexp对象验证test验证成功返回true，失败返回false var str="abc123abc"; var reg=/[0-9]+/; console.log(str.match(reg));//["123", index: 3, input: "abc123abc", groups: undefined] consol
2021-10-11 17:24:57
152
3
原创 js实现九宫格抽奖
js实现九宫格抽奖一、效果图二、实现思路三、核心代码一、效果图二、实现思路第一步：先建立所有奖品的集合，设置随机奖品的索引第二步：设置转圈的圈数第三步：给选到的奖品变换颜色第四步：设置转圈的速度，由慢到快，再由快到慢三、核心代码 //点击开始抽奖 var item9=document.querySelector(".item-9"); var item=document.querySelectorAll(".item"); var i.
2021-10-09 19:00:44
4443
3
原创 js实现转盘抽奖
js实现转盘抽奖一、效果图二、设计思路三、核心代码一、效果图二、设计思路第一步：先建立所有奖品的集合，设置默认转的圈数第二步：设置转动的随机角度第三步：转动到哪里就是最后的奖品，使用浏览器弹框弹出第四步：设置每一个奖品转到的概率三、核心代码 //先建立所有奖品的集合 var list=['免单4999元', '免单50元', '免单10元', '免单5元', '免分期服务费', '提高白条额度', '未中奖']; //抽奖的状态 var .
2021-10-09 19:00:31
5815
2
原创 js内置对象---产生随机颜色
//产生随机色 var arr=['A','B','C','D','E','F',0,1,2,3,4,5,6,7,8,9]; function randomColor(){ var str="#"; for(var i=0;i<6;i++) { var index =Math.floor(Math.random()*arr.length); str+=arr[index]; ...
2021-10-09 18:59:55
134
原创 js内置对象---数学内置对象
js内置对象---数学内置对象一、圆周率二、向上和向下取整的方法1. 向下取整2. 向上取整三、最大值最小值方法1. 最大值2. 最小值四、取绝对值五、开平方六、幂指数方法七、随机数方法八、正弦函数、余弦函数、正切函数1. 正弦函数2. 余弦函数3. 正切函数一、圆周率console.log(Math.PI);//3.141592653589793二、向上和向下取整的方法1. 向下取整console.log(Math.floor(3.9));//32. 向上取整console.
2021-10-09 18:59:43
372
3
原创 js实现生日倒计时
js实现生日倒计时一、效果图二、核心代码一、效果图二、核心代码 window.onload=function(){ //倒计时的时间 var dtime=new Date("2021/11/29 00:00:00"); time=setInterval(function(){ //获取当前的时间 var ntime=new Date(); var c=dtime.g.
2021-10-02 14:32:31
2521
2
原创 js数组案例---五子棋
js数组案例---五子棋一、效果图二、设计思路三、核心代码一、效果图二、设计思路第一步：创建棋盘，生成棋盘所对应的数组坐标。第二步：鼠标点击当前位置返回当前点的坐标。第三步：生成对应的棋子。第四步：添加悔棋、重新开始事件。第五步：设置棋子输赢，若某个棋子五个连成一条线，则该棋子赢。三、核心代码 //1.创建棋盘 var item = document.querySelector(".item-map"); var itemchild = docum.
2021-10-02 14:27:12
451
1
原创 js数组的相关算法题
js数组的相关算法题一、输出1-100之间所有的素数之和二、阶乘算法三、字符串去重方法1：es6写法方法2：数组方法进行去重方法3：使用数组+对象的方法去重四、字符串原位翻转五、查找字符串中元素个数最多的元素，并且输出个数六、数字转化为money的格式七、数组降维八、在一个数组中查找值，返回值对应索引的集合九、寻找两个数组中相同的元素中最小的元素数组其他题型一、输出1-100之间所有的素数之和 var sum=0; for(var i=2;i<=100;i++){ .
2021-10-02 14:24:46
906
3
原创 js中的call和apply
call和apply是替换前面函数内部的this指针以及传递参数。区别是call传递的参数是序列1，2，3，4apply传递的参数是集合型[1，2，3，4]
2021-10-02 14:17:37
8043
2
原创 reduce实现原理
Array.prototype.myReduce=function(callback){ var arr=this; var all=arr[0]; for(var i=1;i<arr.length;i++){ all=callback(all,arr[i]); } return all; } var arr=[1,2,3,4,5]; var result=arr.myRe.
2021-09-30 20:09:18
368
3
原创 js自己实现map映射的原理
Array.prototype.mymap=function(callback){ //this指向的是当前对象st var arr=this; var list=[]; for(var i=0;i<arr.length;i++){ list[i]=callback(arr[i],i,arr); } return list; } var st=[1,2,3,...
2021-09-30 20:09:09
850
3
原创 js计时器案例--实现拖拽滚动
js计时器实现拖拽滚动一、效果图二、实现思路三、核心代码一、效果图二、实现思路第一步：使用循环计时器和一次性计时器实现图片轮播的动画效果。第二步：设置鼠标进入，动画停止，鼠标离开，动画继续。第三步：设置鼠标按下进行拖拽，然后检测用户鼠标移动的差值 ，大于图片一半宽， 直接下一张，小于一半直接返回当前的图片。第四步：遍历图片底下的小按钮，鼠标进入到那个权，当前圈变红并且出现对应的图片。三、核心代码 var timer,Item,Box,sx,ex,cha,List.
2021-09-26 19:37:25
370
1
原创 js计时器案例--实现上下滑动轮播
js实现上下滑动轮播一、效果图二、设计思路三、核心代码一、效果图二、设计思路第一步：遍历所有的元素使得鼠标点击右侧小图时，图片变亮并且根据偏移值加上红框。点击右边的小图左边出现对用的图片。第二步：利用循环计时器，克隆ul里面的第一个元素使得连续循环滑动。第三步：鼠标进入时循环滑动停止，离开时继续。第四步：设置上下按钮，当第一张图片的offsetTop值为0时，下面按钮出现，当到达底部最后一个元素时，上面按钮出现，底部按钮消失，当在整个元素中间时，上下按钮都出现，每点击一次按钮移动一.
2021-09-26 19:37:16
689
1
原创 js计时器案例--带滚动条的无缝滚动
带滚动条的无缝滚动一、效果图二、设计思路三、核心代码一、效果图二、设计思路第一步：克隆两个ul，使用循环计时器进行无缝滚动第二步：设置滚动的速度和时间第三步：设置鼠标进去box停止滚动，离开继续滚动。第四步：设置按钮拖动的函数，滚动条拖动，上面动画跟着移动，鼠标抬起，按照原先的速度进行滚动。三、核心代码<script> //接收计时器 var time; //速度变量 var speed=2; var timer=10.
2021-09-26 19:37:06
496
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人