JS
关注
分享
扫一扫
江南时雨
这个作者很懒，什么都没留下…
展开
-
JS 支付10秒倒计时
<body> <div> <p>商品：Web前端课程</p> <p>原价：1908元</p> <p>现价：1.98元</p> <p>内容；HTML、CSS、JS</p> <p>地址：北京朝阳区</p> <p> <butto原创 2021-06-10 21:04:44 · 466 阅读 · 0 评论 -
随机生成验证码及校验
输入验证码（区分大小写）点击确认，进行校验。出错就弹框提示点击 看不清 重新随机生成验证码当验证码输入错误时进行提示<body> <div class="v_code"> <div class="code_show"> <span class="code" id="checkCode"></span> <a href="#" id="linkbt">看不清原创 2021-06-10 22:42:56 · 437 阅读 · 0 评论 -
var和let以及const的区别
var和let以及const的区别一、var是ES6之前的变量声明方式，使用var声明的变量，其作用域为该语句所在的函数内，并且存在变量提升现象。由于变量提升的关系，我们可以看到在if语句里面，我们在 a赋值前将其输出并没有报错。还有就是我们在if语句外面再次输出a，居然可以正常输出。这和我们学习的其他语言感觉出现了冲突。于是ES6之后新增了新的变量声明方式。let <script> if (true) { console.log(a);原创 2021-04-22 23:44:03 · 240 阅读 · 0 评论 -
JS函数的定义和调用几种方式
一、函数的定义：函数的定义有三种方式：1、自定义函数（命名函数）；2、函数表达式（匿名函数）；3、利用 new Function(‘参数1’,‘参数2’,‘函数体’);还有就是所有的函数都是 Function的实例（对象） <script> // 1. 自定义函数（命名函数） function fn() {}; // 2.函数表达式（匿名函数） var fun = function() {}; //原创 2021-04-05 22:10:49 · 3897 阅读 · 0 评论 -
利用insertBefore方法和appendChild方法实现一个insertAfter函数
我们知道DOM API中有inserBefore和appendChild方法，但是好像并没有insertAfter方法（将一个结点插入另一个节点的后面）。其实也insertAfter也不是很有必要，我们也可以利用inserBefore和appendChild自己写一个insertAfter函数。一、insertBefore的用法：该Node.insertBefore()方法在参考节点之前插入一个节点，作为指定父节点的子节点。let insertedNode = parentNode.insertBef原创 2021-03-23 12:11:05 · 2671 阅读 · 0 评论 -
JS按位非(~) 运算符与~~运算符的一些用法
~ 是JavaScript中的操作符，按位非，~~经常用来进行取整和类型转换。因为位运算的操作值要求是整数，其结果也是整数，所以经过位运算的都会自动变成整数。这个方法可以在一些特殊的情况使用比较方便一、~~ 将字符串转换为整型： var str = '11111111'; console.log(typeof(str)); console.log(typeof(~~str));成功将字符串转换为了数字二、使用 ~~ 去掉一个数的小数部分：这个方法与Ma.原创 2021-03-22 00:00:13 · 679 阅读 · 0 评论 -
web本地存储之localStorage、sessionStorage
一、本地存储的特性：1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不会丢失数据3、容量较大，sessionStorage约5M、localStorage约20M4、只能存储字符串，可以将对象JSON.stringify() 编码后存储二、window.localStorage 和 window.sessionStorage的区别:1.相同点：获取数据（.getItem(key, value)）、存储数据（.setItem(key)）、删除数据（.removeItem(key)原创 2021-03-15 19:45:13 · 224 阅读 · 0 评论 -
JS轮播图
JS轮播图轮播图的结构：左右按钮、中间滚动的图片用li装着、表示图片滚动的小圆点<div class="focus fl"> <!-- 左侧按钮 --> <a href="javascript:;" class="arrow_l"></a> <!-- 右侧按钮 --> <a href="javascript原创 2021-03-12 23:53:06 · 149 阅读 · 0 评论 -
一个简单的缓动动画函数
一个简单的缓动动画函数缓动动画的思路：1.让盒子每次移动的距离慢慢变小，速度就会慢慢降下来；2.核心算法：（目标值-现在的位置）/10 ， 作为每次移动的距离步长；3.停止的条件是: 让当前盒子位置等于目标位置时就停止定时器。还有一个关键就是可能每次计算的步长会出现小数的情况，导致移动的位置距离预计距离有一点差距。所以要把步长值修改为整数如果步长大于0（移动反向向正方向）就向上取整，如果小于零（移动反向向负方向）就向下取整。使用三元表达式比较简洁// 把步长值改为整数 不要出现小数的问题原创 2021-03-10 21:41:51 · 383 阅读 · 0 评论 -
商品放大镜案例
商品放大镜案例当鼠标放在旁边的小商品图片上时可以看到一个相同商品的大图一、实现效果：二、步骤：一、当鼠标经过 preview_img 就是显示和隐藏 mask遮挡层和big大盒子 （1）.分为鼠标经过（mouseover）和鼠标离开事件（mouseout）二、鼠标移动的时候，让黄色的盒子跟随鼠标移动 （1）.计算鼠标在盒子内部的坐标 &nbs原创 2021-03-08 23:51:58 · 206 阅读 · 0 评论 -
js立即执行函数
js立即执行函数一、书写形式：1、(function() {})() 2、(function() {}())二、用法：立即执行函数的第二个小括号里可以看作是调用函数，里面可以传递参数 <script> // 1.立即执行函数：不需要调用，立马能够自己执行的函数 function fn() { console.log(1); } fn(); //普通函数需要调用 // 2.写法原创 2021-03-08 21:57:18 · 284 阅读 · 0 评论 -
JS执行机制
JS执行机制 <script> console.log(1); document.onclick = function() { console.log('我点击了'); } console.log(2); setTimeout(function() { console.log(3); }, 3000) </script>我们想要原创 2021-03-06 16:53:55 · 92 阅读 · 0 评论 -
js中this指向问题
js中this指向问题this指向问题：一般情况下this的最终指向的是那个调用它的对象<body> <button>点击</button> <script> // this 指向问题 一般情况下this的最终指向的是那个调用它的对象 //1.全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window） console.log(this); //全原创 2021-03-06 14:32:00 · 100 阅读 · 0 评论 -
倒计时效果
倒计时效果这是我在b站视频上学到的一个倒计时效果1、定时器 window.setInterval(调用函数，延时时间)的使用：（1）、window可以省略（2）、每隔延时时间就会去重复调用这个函数一个要注意的地方：当我们正常完成这个功能后，当每次刷新页面时，倒计时框里会出现我们最开始在盒子里初始化的 1 2 3.解决方法是 我们在开启倒计时前 先调用一次这个函数，防止第一次刷新时页面有空白<body> <div> <span class="原创 2021-03-06 11:29:48 · 180 阅读 · 0 评论 -
JS中事件委托或事件代理
JS中事件委托或事件代理1、事件委托的原理：不是每个子结点单独设置事件监听器，而是事件监听器设置在其父结点上，然后利用冒泡原理影响设置每个子节点。2、不使用事件委托的写法，需要进行大量的dom操作，影响程序的性能。<body> <ul> <li>我是一个li</li> <li>我是一个li</li> <li>我是一个li</li> &原创 2021-03-05 11:25:42 · 295 阅读 · 0 评论 -
阻止事件冒泡以及兼容性写法
阻止事件冒泡以及兼容性写法阻止冒泡 ：1、dom 推荐 stopPropagation()阻止捕获和冒泡阶段中当前事件的进一步传播。但是，它不能防止任何默认行为的发生； 例如，对链接的点击仍会被处理。 不适用于 ie 6 7 8 .2、cancelBubble：Event.cancelBubble 属性是 Event.stopPropagation()的一个曾用名。在从事件处理程序返回之前将其值设置为true可阻止事件的传播。 适用于 ie 6 7 8<body> <di原创 2021-03-05 10:17:31 · 751 阅读 · 1 评论 -
DOM三种动态创建元素区别
DOM三种动态创建元素区别看网上视频学习了 DOM三种动态创建元素区别：1.document.write()2.element.innerHTML3.document.createElement()提前总结：1、document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则会导致页面全部重绘2、innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘3.innerHTML 创建多个元素效率更高（不要拼接字符串，采用数组形式拼接），结构稍微复杂4、docu原创 2021-03-04 21:15:39 · 225 阅读 · 3 评论 -
nextSibling和nextElementSilbing使用以及解决兼容性问题
nextSibling和nextElementSilbing使用以及解决兼容性问题1、今天学习了 获取兄弟节点 的方法 – nextSibling（获取下一个兄弟节点）、previousSibling(获取上一个兄弟节点)Node.nextSibling 是一个只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。<body> <div>啦啦啦</div> <div>我是原创 2021-03-03 23:45:23 · 1805 阅读 · 1 评论 -
自定义属性
自定义属性自定义属性的目的：为了保存并使用数据，有些数据可以保存到数据库中1、自定义属性的获取是通过 getAttribute(‘属性’) 获取；getAttribute()但是有的自定义属性很容易引起歧义，不容易判断是元素内置属性还是自定义属性；如果直接调用自定义属性会有问题 显示undefined<body> <div getTime="20"></div> <script> var div = docume原创 2021-03-02 23:52:29 · 3914 阅读 · 0 评论 -
tab栏切换的小例子
tab栏切换的小例子初学JS&API跟着视频做了一个 tab 栏切换的案例思路：1、tab切换 点击上面的选项卡底色会变成红色，其余不变（利用排他思想—核心是先干掉其他人，然后留下我自己）----这里可以使用修改类名的方式2、当点击上面的选项卡后 下面的内容会随之变化，下面要写到点击事件里3、上面的选项与下面的内容一一对应，可以给上面的每一个选项添加自定义的属性，属性值从0开始，与for循环里的 i 值相对应 更加方便~~<!DOCTYPE html><html l原创 2021-03-02 23:16:01 · 537 阅读 · 0 评论 -
一个全选和取消全选的例子
一个全选和取消全选的例子初学跟着网上视频做了一个 全选和取消全选的例子1.一个大的盒子里面放一个表格 装有一些数据 还有 复选框 checkbox2.先获取 表格标题复选框 和 表格数据部分复选框 元素3. 先完成勾选表头的复选框实现全选的功能—利用for循环 将表头复选框的状态赋给下面每个复选框， " this.checked " 可以得到当前复选框的状态 返回值为 true 或者 false4. 下一步 实现 如果勾选后 表格数据部分没有被全部选中则取消表头的全选，还是利用for 循环，原创 2021-03-02 13:37:39 · 294 阅读 · 0 评论 -
一个关闭二维码的例子
一个关闭二维码的例子初学js现在才开始学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-scal原创 2021-03-01 00:19:07 · 270 阅读 · 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, initi原创 2021-02-28 20:08:37 · 172 阅读 · 0 评论 -
简单的事件处理
简单的事件处理事件由三部分组成：事件源、事件类型、事件处理程序执行事件步骤：1.获取事件源----------------------2.绑定事件注册事件----------------------3.添加事件处理程序（采取函数赋值的形式） // 执行事件步骤 // 点击 div 控制台输出 // 1.获取事件源 var div = document.querySelector('div'); //2.绑定事件 注册事件原创 2021-02-28 10:38:49 · 374 阅读 · 0 评论