JS相关
JS相关
是欢欢啊
如果词不达意,那就把爱意藏在心底
展开
-
什么时候不能使用箭头函数?
this及箭头函数原创 2022-07-23 11:27:00 · 318 阅读 · 1 评论 -
body高度小于屏幕高度时,使footer固定在底部
// 当body小于屏幕高度时 使footer固定在底部 $(document).ready(function() { if ($(document.body).height() < $(window).height()) { $('.footerAll').addClass('footerLess'); } }) $(window).resize(function() { if ($(document..原创 2021-09-27 18:05:33 · 173 阅读 · 0 评论 -
获取元素指定类名的下标
$(".wdTypeMenu a").hover(function(){ var _index = $(this).index();//获取下标(索引值) $(this).addClass("wdTypeMenuColor").siblings().removeClass("wdTypeMenuColor"); $(".typeMenuListAll .typeMenuList").eq(_index).addClass("show").siblin...原创 2021-09-27 17:55:48 · 364 阅读 · 0 评论 -
关于图片损坏检测处理/图片路径错误显示默认图片
最近工作的时候框架用的TP5+jquery;页面的整个数据都是从后端一次传过来的,不能直接在img标签上面去添加onerror事件;也试过获取页面需要检测的所有图片,循环判断添加onerror事件,发现添加成功后页面刷新会进入死循环,这里给大家推荐一种方法$(document).ready(function(){ $('.mainContent img').each(function(){ //获取需要判断的所有图片并且循环判断 var error = f原创 2021-08-24 15:34:27 · 339 阅读 · 0 评论 -
js获取浏览器可视区域的宽度
在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取:document.body.offsetWidthdocument.body.offsetHeight在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小:document.documentElement.clientWidthdocument.documentElement.clientHeight网页可见区域宽: document.body.clientWidth;网页可见区域高: document.b转载 2021-08-09 14:20:45 · 2984 阅读 · 0 评论 -
移动端高度兼容iPhoneX
varheight=window.screen.height;console.log(height);varfooter=document.querySelector("footer");if(height>670){footer.style.marginTop=`5.2rem`;//此处改为自己需要的间距(此处使用的是模板字符串)}移动端rem可以参考我的另一篇文章:rem使用的方法...原创 2021-08-04 11:06:01 · 152 阅读 · 0 评论 -
JS中的浅拷贝与深拷贝案例
浅拷贝浅拷贝:仅复制了引用,彼此之间的操作会互相影响let obj1 = { name:"李四", age:"18", sex:"女", score:"89", car:["奔驰","宝马","奥迪"] } let obj2 = {}; function simpleClone(a,b){ for(var k in a){ b[k] = a[k..原创 2021-07-19 17:18:29 · 138 阅读 · 0 评论 -
JS中的继承
1什么是继承继承是一种类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承,继承是为了实现数据共享,js中的继承当然也是为了实现数据共享。 继承是子类继承父类的特征或者行为,使子类也具有父类的属性和方法; 或者子类从父类继承方法,使得子类具有父类相同的行为 继承可以使得子类具有父类的各种属性和方法,而不需要再次编写相同的代码。2 通过原型实现继承2.1案例一function Person1(name,age,sex)...转载 2021-07-19 15:26:05 · 1507 阅读 · 1 评论 -
js实现身份证号查询相关信息
HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t.原创 2021-07-19 14:11:22 · 689 阅读 · 5 评论 -
搞懂JavaScript全局变量与局部变量,看这篇文章就够了
目录1.什么是全局变量和局部变量2.全局变量和局部变量的声明2.1全局变量的声明2.2 局部变量的声明3.全局变量和局部变量一些常见问题3.1全局变量跟局部变量重名3.2零散变量的问题3.3. 变量释放问题总结:1.什么是全局变量和局部变量全局变量:常常定义在函数外部,拥有全局作用域,即在 JavaScript 代码的任何地方都可以访问。局部变量:定义在函数内部,只能在函数中使用的变量,作用范围是从函数开始到结尾,即在{}里。在函数内声明的变量只...原创 2021-07-09 10:57:10 · 2735 阅读 · 2 评论 -
数组排序方法
第一种var arr= [2,3,14,5,32,5,2,1,5,6,8,23,9]; arr.sort(function(a,b){ return a - b; }) console.log(arr);第二种:使用高阶函数 作为参数排序//作为参数排序案例 var arr1 = [1,100,20,200,50,40,45,60,10]; arr1.sort(function(obj1,obj2){ if.原创 2021-07-08 18:02:38 · 73 阅读 · 0 评论 -
一道被前端忽略的基础题,不信看你会几题
前言为了追求更高的境界,看我们忽略了多少的基础知识!!!下面我们就来看一看,瞧一瞧。 function Foo () { getName = function () { alert(1) } return this } Foo.getName = function () { alert(2) } Foo.prototype.getName = function () { alert(3) } var getName = function () { alert转载 2021-07-08 14:20:01 · 70 阅读 · 0 评论 -
JavaScript 进阶教程(1)--面向对象编程
目录1 学习目标2面向对象介绍2.1什么是对象(1) 对象是单个事物的抽象。(2) 对象是一个容器,封装了属性(property)和方法(method)。2.2 什么是面向对象2.3 JavaScript 中面向对象的基本体现3 JavaScript 如何创建对象3.1 字面量方式3.2 简单方式的改进:工厂函数3.3 更优雅的工厂函数:构造函数3.4 构造函数代码执行过程3.5构造函数和实例对象的关系3.6构造函数的问题4原型...转载 2021-07-06 16:41:38 · 92 阅读 · 0 评论 -
99乘法口诀表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>99.原创 2021-07-05 10:01:08 · 225 阅读 · 0 评论 -
字符串中出现次数最多的字符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.原创 2021-07-02 15:27:06 · 103 阅读 · 0 评论 -
js判断 有些数字的立方的末尾正好是该数字本身
有些数字的立方的末尾正好是该数字本身。比如:1,4,5,6,9,24,25,…请你计算一下,在10000以内的数字中(指该数字,并非它立方后的数值),符合这个特征的正整数一共有多少个。function num(n){ var count = 0; for(var i=0;i<n;i++){ var result = Math.pow(i,3); var res = result.toString(); .原创 2021-07-02 11:23:26 · 311 阅读 · 0 评论 -
vue踩坑总结 & 优化点
最近连着做了好几个vue项目,从0到版本迭代,vue教程算是好理解,把vue官方文档看一遍下来,基本上不会有什么大问题(嗯如果你看的够仔细够透彻的话),此篇是记录vue踩过的坑以及可以优化的地方。1.踩坑1.1.深拷贝/浅拷贝这实际上算不上vue的问题,算是js基础没打好的坑吧。先来看一个简单的例子:let obj = {name:'fiona-SUN'};let copyObj = obj;copyObj.name = 'fiona';console.log(cop.转载 2021-06-30 17:47:55 · 2085 阅读 · 1 评论 -
外部的jQuery链接
外部的jQuery链接,引入即可使用百度:<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>google:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>cdn加速:<script src="https://cdn.bo原创 2021-06-22 10:09:08 · 1546 阅读 · 0 评论 -
点击小图切换大图
<div class="contents"> <h1 class="tt">{$data.title}</h1> <div class="topImg"> <img src="" /> </div> <div class="bottomImg"> <foreach name="$data['image_lis原创 2021-06-15 13:48:31 · 363 阅读 · 0 评论 -
底部位置固定
主体内容部分高度不够,我们需要对主体部分的内容进行一下判断,让底部部分固定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi原创 2021-06-02 11:41:45 · 197 阅读 · 0 评论 -
js获取浏览器可视区域的宽度
在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取:document.body.offsetWidthdocument.body.offsetHeight在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小:document.documentElement.clientWidthdocument.documentElement.clientHeight网页可见区域宽: document.body.clientWidth; 网页可转载 2021-06-02 10:54:58 · 1033 阅读 · 0 评论 -
原生JS操作视频
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>&原创 2021-03-16 11:36:02 · 331 阅读 · 0 评论 -
获取时间并自动更新
var time = document.querySelector(".time"); function getTime(){ var date = new Date(); var year = date.getFullYear(); var month = date.getMonth()+1; var day = date.getDate(); var hour = date.getHours(); .原创 2021-05-19 10:55:32 · 184 阅读 · 0 评论 -
出现弹窗后,禁止页面滑动
/**禁用滚动条**/function unableScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',function (e) { $(document).scrollTop(top); })} /**启用滚动条**/function enableScroll() { $(document).unbind("scroll.unable");}需要禁止或启用时,调用对应的函数即可.原创 2021-05-18 15:03:35 · 506 阅读 · 0 评论 -
手机浏览器唤起微信实现分享
<button data-mshare="0">点击弹出原生分享面板</button><button data-mshare="1">点击触发朋友圈分享</button><button data-mshare="2">点击触发发送给微信朋友</button>js部分:<script src="mshare.js"></script>//引进mshare.jsjs部分:```javascript转载 2021-05-17 16:50:30 · 888 阅读 · 0 评论 -
移动端使用定位后位置空出来的问题及解决方法
HTML部分<div class="gameDownload"> <div class="publicTitle flex"> <p>游戏下载</p> <p><a href="#">更多</a></p> </div> <div class="gameDownloadType"> <p class="gameDownloadTypeColor原创 2021-05-17 14:33:59 · 489 阅读 · 0 评论 -
DOM综合查询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM原创 2021-05-12 13:44:16 · 75 阅读 · 0 评论 -
DOM方法封装及回调函数的使用
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="css1.css" /> <script type=原创 2021-05-11 16:55:44 · 259 阅读 · 0 评论 -
原生JS实现DOM的增删改查
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>dom原创 2021-05-11 16:54:04 · 225 阅读 · 0 评论 -
原生Ajax
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生A原创 2021-05-07 11:07:26 · 46 阅读 · 0 评论 -
js求时间差
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js求原创 2021-05-04 11:26:54 · 51 阅读 · 0 评论 -
一行代码解决移动端适配问题
相信很多朋友都有过被移动端适配支配的恐惧吧,这里给大家介绍一下只用一行代码就解决移动端适配的问题。话不多说上代码//只用在css文件中加上:root { font-size:13.33333vw;//加上这一行代码后1rem = 100px;}为什么一行代码就能够实现移动端的适配呢?首先要先说明:移动端的设计稿一般是width:750px,height:auto(这里指的是不确定),100vw = 100%,这个也没有问题吧;那么,设计稿拿过来,我们可以得出:750px = 100vw,这个原创 2021-04-20 14:46:58 · 340 阅读 · 0 评论 -
rem使用的方法
移动端中关于rem的适配具体代码如下:const setHtmlFontSize=()=>{const htmlDom = document.getElementByTagName(‘html’)[0];let htmlWidth = document.documentElement.clientWidth||document.body.clientWidth;if(htmlWidth >=750){htmlWidth = 750;}if(htmlWidth <=320){原创 2020-07-01 01:19:22 · 280 阅读 · 0 评论 -
获取鼠标位置及手写一个拖拽效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取鼠原创 2021-04-10 16:50:16 · 72 阅读 · 0 评论 -
数据的持久化之本地存储
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>本地.原创 2021-04-09 10:36:46 · 246 阅读 · 0 评论 -
字符串的相关属性及相关操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字符串原创 2021-04-08 14:07:55 · 64 阅读 · 0 评论 -
字符串实战练习题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字符串原创 2021-04-08 14:04:54 · 110 阅读 · 0 评论 -
类数组对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>类数组原创 2021-04-08 14:49:26 · 61 阅读 · 0 评论 -
数组相关实战练习题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-04-08 11:36:39 · 78 阅读 · 0 评论 -
数组相关的方法(API)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组.原创 2021-04-07 15:52:25 · 57 阅读 · 0 评论