![](https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
js基础
js基础
V。on
这个作者很懒,什么都没留下…
展开
-
通过webkitAnimationEnd实现轮播动画
我们也常常通过它来实现大部分轮播动画,但有时候项目比较简单,以及一些版本的问题,我们可以尝试一些其他简单的手段来实现轮播。那我们在实现轮播逻辑时,可以利用CSS3的动画属性结合其监听来实现。事情,打印出“执行完一次animation”的字样。在WebKit引擎的浏览器中,当CSS3的。事件,监听重复运动事件,每执行完一次。'执行完一次animation'相对应,一个是开始,一个是结束。说到轮播动画,大家应该都知道。在以下示例中,当执行完一次。动画执行结束时,会触发。动画,控制台就会触发。......原创 2022-08-09 14:45:29 · 592 阅读 · 0 评论 -
js基础之正则验证密码强度
js基础之正则验证密码强度原创 2022-07-21 11:28:23 · 418 阅读 · 0 评论 -
js基础之拖拽
/鼠标距离屏幕边缘-鼠标距离div边缘。//鼠标抬起,解绑move事件。//获取鼠标距离div边缘。//判断不能超出屏幕边界。原创 2022-07-21 10:08:42 · 137 阅读 · 0 评论 -
TS 定时器的使用
使用window对象,返回的是number类型原创 2022-07-06 11:57:46 · 2808 阅读 · 0 评论 -
判断数据类型
判断数据类型constructor判断和构造函数本身是否有关系。function Person(){ this.name = "张三";}// Person.prototype.constructorlet zhangsan = new Person();// 本身没有constructor属性,父类原型中存在,于是找到去判断实例化对象的指向。console.log(zhangsan.constructor === Person); // trueconsole.log([1原创 2022-05-07 17:33:33 · 59 阅读 · 0 评论 -
正则表达式
返回查到符合条件的值,忽略全局匹配。如果需要全局匹配则执行多次,它可以根据上一次查找的结果继续匹配。下面通过一个简单的需求讲述一下正则的强大。比如字符串里找到对应的数字,并放进一个数组中。返回查到符合条件的值,全局匹配和非全局匹配存在一定的差距。在字符串中查找匹配的子串,并替换与正则表达式匹配的子串。匹配符合条件的索引值的位置,如果找不到就返回-1。正则中有特殊含义的非字母字符。返回是否含有符合条件的值。把字符串分割为字符串数组。...原创 2022-04-26 18:01:17 · 140 阅读 · 0 评论 -
js基础之继承
继承我们现在呢,有一个拖拽的功能需要实现:假设有一个div,我们需要对它实现拖拽的功能,那么按照我们平常的方式,实现的方法如下:// 面向过程const mydiv = document.querySelector(".mydiv");mydiv.onmousedown = e => { let ev = e || window.event; let x = ev.clientX - mydiv.offsetLeft; let y = ev.clientY - mydi原创 2022-03-02 16:51:08 · 59 阅读 · 0 评论 -
js基础之数组API
js基础之数组API以下表格中添加*的方法不会改变原数组。属性描述*concat()连接两个或更多的数组,并返回结果*join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔pop()删除并返回数组的最后一个元素push()向数组的末尾添加一个或更多元素,并返回新的长度shift()删除并返回数组的第一个元素unshift()向数组的开头添加一个或更多元素,并返回新的长度reverse()颠倒数组中元素的顺序so原创 2022-02-15 17:18:43 · 80 阅读 · 0 评论 -
js原生之元素跟随鼠标运动
js原生之元素跟随鼠标运动div { height: 20px; width: 20px; background-color: red; position: absolute;}var aDiv = []// 文档碎片var cache = document.createDocumentFragment()for (var i = 1; i <= 20; i++) { var div = document.createElement("div")原创 2021-08-12 17:47:03 · 96 阅读 · 0 评论 -
js原生实现tab切换
js原生实现tab切换<div id="tab" class="tab"> <ul> <li class="current">item1</li> <li>item2</li> <li>item3</li> </ul> <div id="content"> <div class="content原创 2021-08-12 15:53:13 · 66 阅读 · 0 评论 -
js原生实现全选反选
js原生实现全选反选<span>全选:</span><input type="checkbox" id="checkAll"><div id="content"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"></div>原创 2021-08-12 15:31:21 · 146 阅读 · 0 评论 -
js基础之DOM尺寸及位置
js基础之DOM尺寸及位置一、DOM尺寸以下表格属性中,前三种属性都是只读属性属性描述box.style.width,box.style.height只能获取到内联style属性的CSS样式中的宽和高,如果有,获取。如果没有,则返回空getStyle(box, “width”),getStyle(box, “width”)通过计算获取元素的大小,无关你是否是行内、内联或者链接,它经过计算后得到的结果返回出来。如果本身设置大小,它会返回元素的大小,如果本身没有设置,非IE浏原创 2021-08-11 14:36:25 · 727 阅读 · 0 评论 -
js基础之节点
js基础之节点一、node节点根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点。元素是节点的别称,节点包含元素,当然节点还有好多细化的种类。根节点:root >>>> HTML没有父节点 。以下表格中,带*获取的节点都包含空白文本节点。属性描述*childNodes获取当前元素的所有子节点*previousSibling获取当前节点的前一个同级节点*nextSibling获取当前节点的后一个同级节点原创 2021-08-10 15:52:46 · 99 阅读 · 0 评论 -
js原生实现回到顶部
js原生实现回到顶部以下为简易版的回到顶部功能,可以自己加图标修改样式等。<body style="height: 10000px;"> <div id="goTop"></div></body>#goTop { width: 30px; height: 30px; background: red; position: fixed; right: 50px; bottom: 50px;}var原创 2021-08-10 15:19:49 · 191 阅读 · 0 评论 -
js基础之DOM
js基础之DOM一、获取DOM节点属性描述getElementById()通过id来选中元素getElementsByTagName()通过标签名来选中元素,获取到不止一个元素getElementsByClassName()通过类名来获取元素querySelector与querySelectorAll()分别表示满足条件的第一个元素或者所有元素。括号内的写法与CSS选择器的写法一样getElementsByName()通过name属性来获取表单元素。原创 2021-08-10 11:06:35 · 53 阅读 · 0 评论 -
js基础之String API
js基础之String API属性描述charAt()返回在指定位置的字符indexOf()返回某个指定的字符串值在字符串中首次出现的位置includes()查找字符串中是否包含指定的子字符串split()把字符串分割为字符串数组trim()去除字符串两边的空白toString()返回一个字符串slice()提取字符串的片断,并在新的字符串中返回被提取的部分一、charAtvar str = "HELLO WORLD"// c原创 2021-08-05 18:05:02 · 159 阅读 · 0 评论 -
js基础之Math内置对象
js基础之Math内置对象一、Math 对象属性属性描述Math.PI返回圆周率(约等于3.14159)Math.LN2返回 2 的自然对数(约等于0.693)Math.LOG2E返回以 2 为底的 e 的对数(约等于 1.414)二、Math 对象方法方法描述abs(x)返回数的绝对值sin(x)返回数的正弦cos(x)返回数的余弦tan(x)返回角的正切ceil(x)对数进行上舍入floor(x原创 2021-07-28 10:48:49 · 81 阅读 · 0 评论 -
js之日历
js之日历本文通过基础js来实现日历,如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } #calendar { width: 210px; margin: 100px auto;原创 2021-07-27 17:40:02 · 2771 阅读 · 1 评论 -
js基础之应用
js基础之应用本篇文章呢,就应用js基础写一些小案例来体验一下js的乐趣~一、抽奖程序随机抽取str中的某个名字:<body> <p>中午谁请吃饭?</p> <h1></h1> <button>抽奖</button> <script> var h1 = document.getElementsByTagName("h1")[0] var btn = document.getElements原创 2021-07-27 17:38:48 · 224 阅读 · 0 评论 -
js基础之循环
js基础之循环咱们先来讲个故事:如果一个水龙头坏了,我们需要更换这个水龙头,我们需要做什么?首先,我们需要把坏掉的水龙头拧下来,需要拧多少下呢?要水龙头没掉下来就一下一下的拧,直达拧下来为止。然后,再把新的水龙头换上去,这个时候也需要拧紧它,需要拧多少下呢?只要水龙头没拧紧就一下一下的拧,直到拧紧了为止。在这个过程中,一下一下拧水龙头就是重复的操作,重复的操作就是循环。一、while循环 // while(判断条件){条件成立时反复执行的代码} // 没有退出条件的循环叫死循环 while原创 2021-07-27 15:36:42 · 599 阅读 · 0 评论 -
js基础之运算符(++a a++)
js基础之运算符(++a a++)var a = 1// 先把a的值赋值给b,a在自+1(先用后加)var b = a++// a先自+1,再赋值给b(先加后用)var b = ++a下面再具体举几个例子:var a = 10console.log(a++) // 10console.log(a) // 11 console.log(++a) // 12var k=0 // k++先用后加,此时依然是加零,但此时k=1 // ++k先加后用,就是1原创 2021-07-27 14:57:15 · 345 阅读 · 0 评论 -
原型及原型链
原型及原型链一、prototype在JavaScript中,绝⼤部分的函数(少数内建函数除外)都有一个prototype属性,这个属性指向函数的原型对象。prototype 属性使你有能力向对象添加属性和方法。function Person(age) { this.age = age }Person.prototype.name = '唐三'var person1 = new Person()var person2 = new Person()console.log(pe原创 2021-04-24 18:31:36 · 93 阅读 · 0 评论 -
赋值、浅拷贝及深拷贝
浅拷贝:创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址 ,所以如果其中一个对象改变了这个地址,就会影响到另一个对象。**只复制引用(指针),而未复制真正的值。**比如:等于符号(=) 、Object.assign(target, …sources)深拷贝:将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。**对目标的完全拷贝,不像浅拷贝那样只是复制了一层引用,原创 2021-03-01 17:40:04 · 403 阅读 · 0 评论 -
call、apply以及bind的区别
首先call、apply、bind的作用都是改变函数运行时this的指向。其次,在 ES6 的箭头函数下, call 和 apply、bind 将失效。一、参数区别1、call 方法第一个参数是要绑定给this的值,后面传入的是一个参数列表,当第一个参数为null、undefined的时候,默认指向window。比如:Fun.call(obj,'arg1', 'arg2')2、apply接受两个参数,第一个参数是要绑定给this的值,第二个参数是一个参数数组。当第一个参数为null、undefin原创 2021-03-01 17:31:26 · 2238 阅读 · 0 评论