javaScript
每一天,每一步
相信自己,你可以的
展开
-
js数组对象的去重
【代码】js数组对象的去重。原创 2024-06-03 10:57:05 · 430 阅读 · 0 评论 -
ES6 Map数据类型的嵌套使用new Map()
需求:学校一个年级有很多个班级,每个班级有很多位学生,原始数据是一个数组对象列表,每个对象中包含年级、班级、学生三个属性,想要获取一组:年级=》班级=》学生这样的组合。为了解决JavaScript的对象使用Number或者其他数据类型作为键这个问题,最新的ES6规范引入了新的数据类型。原创 2023-05-29 16:51:49 · 537 阅读 · 0 评论 -
替换URL中{}大括号包含的占位符参数
【代码】替换URL中{}大括号包含的占位符参数。原创 2023-05-16 10:19:52 · 513 阅读 · 0 评论 -
原生js获取当前日期前7天日期集合
【代码】原生js获取当前日期前7天日期集合。原创 2022-11-25 13:35:20 · 499 阅读 · 0 评论 -
ES6 Map 数据结构的使用-数据分类汇总
ES6 提供了 Map 数据结构,即“值—值”的对应,是一种更完善的 Hash 结构实现。原创 2022-10-12 15:17:43 · 413 阅读 · 0 评论 -
js日期字符串格式转换为年月日时分秒格式
【代码】js日期字符串格式转换为年月日时分秒格式。原创 2022-10-12 14:45:25 · 665 阅读 · 0 评论 -
js已知对象的value求value对应的对象中的key
【代码】js已知对象的value求value对应的对象中的key。原创 2022-10-12 14:19:12 · 867 阅读 · 0 评论 -
原生js调用后端接口form表单导出Excel
【代码】原生js调用后端接口form表单导出Excel。原创 2022-10-12 13:28:51 · 1040 阅读 · 1 评论 -
js三层数组循环遍历(笛卡尔积)运算,并生成顺序
js实现三层数组循环遍历(笛卡尔积)运算,并生成顺序。原创 2022-08-25 14:28:22 · 1585 阅读 · 0 评论 -
原生JavaScript的面向过程和面向对象
JavaScript的面向对象是对面向过程的封装,在JavaScript中创建对象的模板是构造函数;ES6中新增了类(Class)。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> // 打印学生成绩 // 1.原创 2021-12-04 16:14:20 · 156 阅读 · 0 评论 -
原生js实现模块化及复用
a.js:;var moduleA = (function () { var obj = {}; var name = '小明'; var age = 18; var flag = true; if (flag) { console.log(sum(1, 2)); } function sum(num1, num2) { return num1 + num2; } obj.name = name; obj.age = age; obj.fl原创 2021-11-17 21:30:00 · 970 阅读 · 0 评论 -
原生js实现像素鸟小游戏
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } #game { width: 800px; .原创 2021-09-19 14:11:16 · 261 阅读 · 0 评论 -
原生js实现waterFull瀑布流
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .itemBox { width: 1050px;.原创 2021-09-19 14:08:15 · 215 阅读 · 0 评论 -
原生js模拟微信聊天记录
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>微信聊天窗口</title> <style> * { margin: 0; padding: 0; list-style: none; font-family: '微软雅黑' } #container { width: 450px;.原创 2021-09-19 14:03:33 · 1079 阅读 · 0 评论 -
原生js实现tab选项卡
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; text-decoration: none; color: #000; font-size: 12p.原创 2021-09-19 14:00:12 · 152 阅读 · 0 评论 -
原生js轮播图js代码规范
index.html:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; border: 0; } .all { width:.原创 2021-09-19 13:55:48 · 120 阅读 · 0 评论 -
原生js实现轮播图带无缝滚动及自动播放
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; border: 0; } .all { width: 500px; hei.原创 2021-09-19 13:51:28 · 560 阅读 · 0 评论 -
原生js实现轮播图,不带无缝滚动
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; border: 0; } .all { width: 500px; hei.原创 2021-09-19 13:41:38 · 279 阅读 · 0 评论 -
原生js模拟滚动条
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } #box { width: 300px; height: 400px; margin: 50px auto; border:.原创 2021-09-19 13:27:20 · 928 阅读 · 0 评论 -
原生js父元素的鼠标事件:onmouseover会触发子元素的该事件冒泡,onmouseenter不会触发子元素的该事件冒泡
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #father1 { width: 200px; height: 200px; background-color: pink; } #son1 { width: 100px; height.原创 2021-09-19 13:25:04 · 1345 阅读 · 0 评论 -
原生js实现图片的放大镜效果
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1px.原创 2021-09-19 13:13:54 · 168 阅读 · 0 评论 -
原生js实现遮罩层及可拖拽的弹出窗口
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body, h4 { margin: 0; padding: 0; } a { width: 300px; font-size: 30px; color: #000; text-de.原创 2021-09-15 22:05:13 · 576 阅读 · 0 评论 -
原生js鼠标事件onmousedown、onmousemove、onmouseup实现窗口的拖拽
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #nav { height: 30px; line-height: 30px; background-color: darkblue; paddin.原创 2021-08-29 16:40:07 · 1696 阅读 · 0 评论 -
DOM中的scroll属性
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { width: 100px; height: 100px; margin: 50px; background-color: red; .原创 2021-08-29 16:26:24 · 643 阅读 · 0 评论 -
DOM中的client属性
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { width: 100px; height: 100px; margin: 50px; background-color: red; .原创 2021-08-25 21:23:39 · 153 阅读 · 0 评论 -
DOM中的offset属性
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { width: 300px; height: 300px; margin: 50px; background-color: red; .原创 2021-08-25 21:22:05 · 326 阅读 · 0 评论 -
浏览器信息Navigator对象
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> console.log(navigator); // 用于区分设备和浏览器 // userAgent返回由客户机发送服务器的 user-agent 头.原创 2021-08-23 21:53:12 · 163 阅读 · 0 评论 -
URL的组成
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> console.log(location); // hash: 锚点 // host: 主机 // search: 用户名、密码等查询信息 </.原创 2021-08-23 21:44:45 · 70 阅读 · 0 评论 -
原生js盒子慢慢向右移动后从800到400的动画封装setInterval定时器的使用和停止
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 100px; height: 100px; background-color: pink; position: relative; /*右移位置改变脱离文档流*/ } .原创 2021-08-19 18:36:36 · 304 阅读 · 0 评论 -
原生js setInterval定时器执行时间段内动画相互影响问题的解决:给每个element增加一个属性timerId,保证定时器标志互不干扰
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 100px; height: 100px; background-color: pink; position: relative; /*右移位置改变脱离文档流*/ } .原创 2021-08-18 15:49:30 · 482 阅读 · 0 评论 -
原生js setInterval连续多次点击按钮动画变快问题的解决:全局变量timerId,保证页面中只有一个定时器在执行
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 100px; height: 100px; background-color: pink; position: relative; /*右移位置改变脱离文档流*/ } .原创 2021-08-18 15:46:18 · 820 阅读 · 0 评论 -
原生js点击按钮改变盒子的left值使盒子移动
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 100px; height: 100px; background-color: pink; position: relative; /*右移位置改变脱离文档流*/ } .原创 2021-08-16 18:30:46 · 3598 阅读 · 0 评论 -
原生js setInterval函数使盒子左右移动动画及封装
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { width: 100px; height: 100px; background-color: pink; position: rela.原创 2021-08-13 18:02:51 · 758 阅读 · 0 评论 -
原生js的location对象
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="跳转" id="btn"> <script> // 控制台可以直接输入location 查看location的属性.原创 2021-08-13 17:58:38 · 184 阅读 · 0 评论 -
原生js实现倒计时
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 300px; height: 200px; margin: 200px auto; text-align: center; } p { color: orang.原创 2021-08-07 14:16:40 · 93 阅读 · 0 评论 -
原生js重复执行定时器—setInterval
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="开始" id="btn1"> <input type="button" value="取消" id="btn2"> &.原创 2021-08-05 22:44:56 · 734 阅读 · 0 评论 -
原生js删除提示文本框(操作已有DOM元素)隔一段时间后自动消失-setTimeout
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 150px; height: 50px; line-height: 50px; background-color: pink; margin: 200px auto;.原创 2021-08-05 22:41:22 · 226 阅读 · 0 评论 -
原生js删除提示文本框(创建元素)隔一段时间后自动消失-setTimeout
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="删除" id="btn"></body><script> var btn = document.getEl.原创 2021-08-04 21:41:31 · 299 阅读 · 0 评论 -
原生js的setTimeout定时和clearTimeout清除定时器
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="开始" id="btn1"> <input type="button" value="取消" id="btn2"> &.原创 2021-08-04 21:38:12 · 1108 阅读 · 0 评论 -
原生js的onload和onunload
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> // var box = document.getElementById('box'); // console.dir(box); // null 代码由上向下执行,此时box元素还未被创建 // BOM onlo.原创 2021-07-28 22:11:53 · 862 阅读 · 0 评论