- 博客(33)
- 收藏
- 关注
RSS订阅原创 js处理浏览器前进后退等跳转事件
js处理浏览器前进后退等跳转事件页面跳转 window.location.href = "https://www.baidu.com"浏览器前进window.location.href = history.go(1)window.history.go(1)浏览器后退在这里插入代码片window.location.href = history.go(-1)window.history.go(-1)window.location.href = history.back()window.
2021-05-09 22:18:25
748
1
原创 移动端左右拖拽和临界问题
移动端左右拖拽和临界问题在移动端，我们设置功能展示的时候，可能视口宽度并不能完全将我们所需要的东西全部展示出来，因此我们使用css中的overflow-x: scroll;进行设置，但是今天我们要讲是利用js来是实现拖拽移动效果，并且下面带有一个滚动条显示当前移动的进程。例如淘宝首页的功能块。全部的代码和成品图如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta htt
2021-05-02 15:18:01
418
原创 移动端中swiper插件的使用
移动端中swiper插件的使用在移动端中，对于常见的拖拽事件，比如轮播图，我们可以用js来实现，但是移动端不同于pc端，写起来不仅复杂，还会使得代码臃肿。因此，对于移动端来说，我们优先使用已经封装好的swiper插件。swiper插件地址，点击访问。或者浏览器输入：https://www.swiper.com.cn/ 进行访问。进入官网后，我们点击开始使用，进入这样的一个页面我们根据自己的需求将HTml的内容复制到我们需要的位置，想设置css样式的也可以复制到自己的css文件里里面进行设
2021-05-02 15:09:17
627
原创 js实现移动端兼容设置
js实现移动端兼容设置例如：我们需要在移动端设置一个菜单栏，使它的宽度刚好等于视口的宽度，并且当我们切换不同的设备的时候，使它的能呈现出一样的效果，因为我们想到可以使用百分比来设置，当随之而来的问题是，里面的所有元素也必须跟着使用百分比。因此，我们使用一下的js代码来实现重置(()=>{ function winWidth(){ // 获取视口宽度 let width = window.screen.width // 获取文档元素 let dom = document.do
2021-05-02 14:43:52
440
原创 JS获取实参和形参的个数
获取形参的个数：函数名.length 或 arguments.callee.length获取实参的个数：arguments.lengthfunction fun(a,b){ console.log(fun.length,"获取形参的个数") //2 "获取形参的个数" console.log(arguments.length,"获取实参的个数") //5 "获取实参的个数" console.log(arguments.callee.length,"获取形参的个数") //2 "获取形参的个
2021-04-15 18:02:43
1009
原创 Javascript代码优化大全
在学习JavaScript代码优化之前，我们先应该知道JavaScript语言的特性：JavaScript中的内存管理自动完成执行引擎会使用不用的GC算法算法工作的目的是为了实现内存空间良性循环Performance工具检测内存变化JavaScript是单线程机制的解释性语言。正是由于JavaScript属于解释性语言，因此在性能方面天生具有一定的弱点，因此这就使得我们在编写代码的过程中更加注重一定的细节，这样让我们代码在运行过程中，不然浏览器完成太多的超负荷工作。因此我总结了以下的代码
2021-04-14 23:50:40
1087
5
原创 Javascript中的some()和every()
js中的some()和every()类似于我们逻辑中的||和&&some()方法：some(item,index,arr) item => 数组的每一项 index => 数组的每一项的下标 arr => 自身数组 数组有一项为true时，返回trueevery()方法every(item,index,arr) item => 数组的每一项 index => 数组的每一项下标 arr => 自身数组数组中有一项为false时，
2021-03-27 21:46:21
209
原创 es6中的箭头函数
es6中的箭头函数在es6中，为了更加快捷高效的编写，引入了箭头函数，用法与es5中的普通函数类似。不过有以下几点不同之处：1.箭头函数没有arguments，使用…rest(剩余参数)来代替。2.箭头函数不能new3.箭头函数自身没有this，this是声明时作用域的this我们通过以下的例子来了解以下箭头函数以及箭头函数中this的指向。普通函数：//声明一个函数function fun(){ console.log("普通无参函数");}fun();function fu
2021-03-27 17:18:21
328
原创 Js数组降维
Js数组降维的两种常用方法：1.使用函数的flat()方法；2.使用递归降维；下面分别介绍两种方法：1.flat()方法：//falt(num) num => 降几个维度，不写默认为一维 当num为Infinity，意味着将数组变成一维数组。 注意区分降的维度数和降成几维let arr = [1,2,[1,[4,6,[2,5,1],3,3],5],4,0,[2,3],7,23,7,2,8,67,23];console.log(arr.flat(Infinity)); //[1
2021-03-27 14:10:33
1531
原创 js节流与防抖
js节流与防抖什么是节流，什么是防抖，有什么作用？作用于哪里？节流：在规定时间内，只执行第一次 （常见用于点击事件，例如小米官网的轮播图切换，无论你左右快速点击多少次，它只会在规定的时间内执行第一次）；防抖：在规定事件内，只执行最后一次（主要用于键盘事件，例如我们平时打的游戏lol）节流：//封装函数写法：function s(fn,time){ let start = 0; return function(){ let data = new Date; if(dat
2021-03-23 23:33:26
70
原创 Javascript中的事件源
Javascript中的事件源疑问一：什么是事件源？解答：发生事件的对象，一般指某一具体的组件，比如点击的按钮，超链接等等疑问二：使用事件源有什么好处？为什么要使用事件源？解答：可以大量的节省性能，提升网页运行速度。例如，在一个div容器中有多个p标签，我们需要点击里面的p标签进行函数事件处理，如添加一个类名active，单击让它变为蓝色。我们之间常用的方法为let一个变量，使用querySelectorAll("p")进行获取所有的p标签，然后利用for循环对其所有的p标签绑定一个单击响应函
2021-03-11 00:06:51
949
原创 Javascript中 文本代码片段使用
Javascript中文本代码片段使用疑问一：什么是文本代码片段？解答：文本代码片段类似与一个容器，在里面可以添加多种元素疑问二：使用文本代码片段有什么好处？解答：假设已知一个div容器，需要在里面添加多个p标签。按照常规思路，我们可以利用一个for循环对其循环添加，如下://往div容器利用for遍历添加元素let div = document.querySelector("div")for(let i = 0;i<10;i++){ let p = document.cre
2021-03-10 23:33:02
159
原创 Javascript中sort()的用法
Js中的sort()的用法在js,sort()是针对数组的一种数组排序的简介方法,默认为升序,但是可以传入参数使其变为降序let ss = [1,3,5,2,4]console.log(ss) //[1,3,5,2,4]ss.sort() console.log(ss) //[1,2,3,4,5]function desc(a,b){ if(a>b){ return -1 }else{ return 1}}ss.sort(desc) console.lo
2021-03-02 15:56:33
356
原创 Javascript中首字母大写
Javscript中的首字母大写首先是一行句子中，首字母大写例如：“how are you?” 改变后为： “How are you?”解题思路：我们先将这个句子利用split("")拆分成一个一个数组，每个数组项是一个字母，然后将第一个字母利用toUpperCase(),然后使用replace()对第一个字母进行替换let ss = 'how are you?'let s = ss.split("")[0].toUpperCase()ss = ss.replace(ss[0],a)c
2021-03-02 13:44:21
626
原创 html中控制文本单行显示或者多行显示，多余的部分用省略号代替
html中控制文本单行显示或者多行显示，多余的部分用省略号来代替首先是单行显示，主要css部分代码如下：p{ width: 300px; height: 40px; border: 1px solid #000000; line-height: 40px; white-space: nowrap; //使文本单行显示 text-overflow: ellipsis; //多余的部分用省略号来代替 overflow: hidden; // 隐藏多余的部分 //单行显示并且使
2021-02-28 10:12:39
1267
原创 统计数组中元素的个数
统计数组中元素的个数假设有一个数组为：[1,2,3,4,3,2,2,6,3,1]，我们需要统计它里面每一个元素的个数解题思路：对于这种统计类型的问题，我们可以创建一个空的对象。当一个对象中没有指定的属性名时，会返回undefined。如下：let s = {}console.log(s.name) //undefinedconsole.log(Boolean(s.name)) //false因此，我们利用这个特点，可以将数组内的值赋值成对象属性名，解下来对其进行判断，如果对象内没有改
2021-02-28 00:14:43
5538
原创 数组去重
数组去重假如我们有一个数组，里面有很多重复的项，现在要对其进行去重。例如：s = [1,2,3,1,2,4] 去重之后为 [1,2,3,4]方案一：利用indexOf()查询方法，当查询的值在数组中不存在时，会返回-1，因此我们新创建一个数组，用来保存这样并不存在的值let ss = [1,2,3,4,3,2,5]let s = []for(let item of ss){ if(s.indexOf(item)<0){ s.push(item) }}console.log
2021-02-27 23:48:17
111
原创 Javascript中的高阶函数
Javascript中的高阶函数在Javascript等多种语言中，含有一些高阶函数来方便我们使用。下面总结一下js中的三种高阶函数。我们来举个栗子let ss = [1,3,5,2,7,4]//需求一：筛选出所有小于5的数// 对于这种带有过滤类型的需求时，我们可以使用filter()过滤函数进行过滤ss = ss.filter(function(n){ return n<5 //返回值为Boolean值，为true是打印，利用这点可以过滤数组中大于5的数值}) //fi
2021-02-25 22:53:46
137
2
原创 Javascript中的变量提升问题
关于js中变量提升问题由于js是弱类型语言，可以先使用，后定义。这是因为，一旦定义了，就会默认把次序提升到最高，但是赋值不会提升。具体如下所示：<script type="text/javascript"> window.onload = function(){ // console.log(a) //如果直接打印，会提示a is noe defined console.log(b) //如果在下面var一个b的话，b不会报错，打印为undefined，证明定义的变量提升了，但是
2021-01-28 09:36:24
105
原创 jQuery判断复选框是否选中的三种方法
jQuery判断复选框是否选中的三种方法。PS:下面的代码为通过循环找到在多个复选框中被选中的复选框，并对其删除//判断复选框是否选中的第一种方法： $.each(buttons,function(index,value){ if(value.checked) { $(value).parent().parent().remove(); } })//判断复选框是否选中的第二种方法： for(let i =0;i<buttons.length;i++){
2021-01-26 00:00:01
4159
原创 京东官网
下面为使用html、css和javascript写的京东官网首页京东官网创建的文件夹结构如下：一个有三个文件夹和一个index.html文件。css文件家里面存放的是css文件，img文件夹里面存放着网页所需要的图片，js文件夹里面放的是所需要的js文件。最后的index.html是官网的首页。html的代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title&
2021-01-19 15:01:24
5955
3
原创 利用js实现轮播图的自动切换
利用js实现轮播图的自动切换功能如下：当点击右上角的X后，关闭整个轮播图页面。当点击左右按钮以及上面的导航点时，进行图片的切换，并且整个过程导航点的选中效果相匹配。当光标放在导航点的时候，轮播图的自动播放结束，当移出时，自动播放恢复。全部代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播图</title> <!-- <
2021-01-16 21:16:26
1129
原创 js中删除选中项
js删除选中项效果和功能如图所示，当点击全选按钮时，会自动将全面的所有选项进行选择，当再次点击，又会将上面所有的选项进行不选择。当点击删除按钮时，会将上面所有选中的选项进行删除。当全部删除后，再次点击删除按钮后，会提示已全部完成删除。全部代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>DOM操作删除</title> <sty
2021-01-16 20:31:45
3750
原创 认识并简单的掌握使用jQuery
认识并会简单的掌握使用jQuery首先，什么是jQuery:jQuery是javascript库，是对javascript的一个封装，也就是说JQ提供了大量的API，这样的话在开发时，以最少的代码可以实现更多的功能。可以简单的理解是是一种工具，一种js的工具，有了这种工具之后，我们写代码，不仅会少很多，也有方便很多。write less，do more（写的少，做的多）jQuery的功能：控制页面的样式访问和操作DOM事件处理提供了大量的插件Ajax技术的封装提供了大量的动画处理
2021-01-15 16:56:02
112
原创 用js实现广告的自动关闭与手动关闭
用js实现广告的手动与自动关闭如下：关闭的方式有两种，第一种是手动关闭，点击右上角的立即关闭即可。第二种方式是倒计时关闭。补充：关闭的原理是使元素的display变成none关键的js代码如下：/*点击关闭*/del.onclick = function(){ center.style.display="none";};/*以下为自动关闭*/let sj = timeout.innerHTML;//获取倒计时的时间setInterval(function(){ sj--;
2021-01-13 18:20:08
1976
原创 利用js切换选项与其内容
使用js切换选项的样式与其内容先看效果，第一张图为默认状态，第二张图为点击选项二的时候的状态。在这里html和css的代码只给出不介绍，着重介绍javascript部分的代码。html的代码如下：<banner> <div class="banner_left"> <div class="banner_left_title"> 盗梦空间 </div> <ul class="menu"> &
2021-01-13 16:44:54
306
原创 利用js跳转页面与返回页面
利用js跳转页面利用 js跳转页面，其实也就是利用window对象中href属性进行跳转第一种方法，延时跳转 function me(){ window.location.href = "next.html"; } setTimeout(me,3000);第二种方法，利用iframe框架document.writeln("<iframe scrolling='no' frameborder='0' marginheight='0' marginwidth='0' w
2021-01-13 11:46:47
1316
原创 H5中的focus
表单中的关于focus的知识通过focus可以设置点击文本框后文本框的样式，比较边框的颜色等。input:focus{ border: 1px solid #00FFFF; }如果给文本框设置了圆角，为了不想点击文本框时foucs效果出现，可以设置如下的代码。input{ outline: none; /*清楚focus的所有效果*/ border-radius: 20px; }改变文本框的提示文字，由于该方法并不是通用，因此在使用时需要加上相关浏览器的内核版本
2021-01-12 17:31:00
1692
1
原创 如何在网页中弄出目录效果
如何在网页中弄出目录效果效果图如下所示 ，涉及到的知识分别是html5、css3我们先来分析一下思路：首先，使用一个ul无序列表（这里也可以换成ol有序列表）创建若干个新闻列表（li子元素），然后对于每一个li标签，设置为弹性布局（dispaly：flex），并且开始相对定位，方便自己的子元素进行相对布局。.items li{ display: flex; /* 设置为弹性布局 */ position: relative; overflow: hidden; heigh
2021-01-12 13:24:51
1443
原创 如何在网页中引入百度地图
如何在网页中引入百度地图首先，打开百度地图生成器，网址为 百度地图生成器 .接下里，第一步是创建地图，创建自己想要的位置，以及地图的尺寸大小等，第二步便是获取代码点击获取代码之后，找到代码里的这个script标签，把它复制到网页的head标签里面。解下来把百度地图容器的这一行代码复制在你网页中需要的地方，并且把里面的宽度和高度改成了你需要的像素大小。最后一步，把body下面的script标签全部复制到你的网页的body标签后面成品如下：...
2021-01-12 11:08:01
727
原创 用js定时器实现一个简单的抽奖程序
用js定时器使用简单的抽奖样式如图所示，当点击开始按钮时，开始抽奖，当点击停止按钮时，抽奖结束，并且上面显示中奖的东西。主要用到的技术是原生javascript中的定时器，当点击开始按钮的时候，触发定时器开发，当点击停止按钮的时候，关闭定时器。javascript的代码如下：<script type="text/javascript"> window.onload = function(){ let on = document.querySelector("#on"
2021-01-11 21:04:51
1304
原创 css中打开二级菜单的时候，带有指示性的箭头旋转
css中打开二级菜单的时候，带有指示性的箭头旋转效果如图所示光标未触发时当光标移入时此处省略html的代码，主要的css代码如下：.taobao:hover i{ transform: rotate(180deg); /*在transform属性中，使用rotate选装属性，使其图标旋转180度，deg是单位，和度类似，取值为0~360*/ transition: all 0.6s; /*在transition属性中，设置它变化之间的时间，第一个值是
2021-01-11 17:51:28
390
原创 小米官网
本文章为博主写的小米官网的网页，包含html5，css3和javascript文件的结构如下：一共有三个文件夹，分别命名为css、img和js。css用来存放css文件，一共有三个css文件，index.css用来存放首页的css，reset.css用来存放重置样式表，也就是清楚浏览器的默认样式。style.css是网页的公共样式，也就是每个网页的公共部分。img用来存放网页的所有的图片js用来存放Javascript文件下面是html的全部代码<!DOCTYPE html>
2021-01-11 13:53:52
1162
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人