javascript
文章平均质量分 55
javascript基础
weixin_45070265
个人的前端学习记录
展开
-
MVVM数据双向绑定的理解和简单实现
MVVM模式的响应式数据的实现原创 2022-07-11 14:01:42 · 613 阅读 · 1 评论 -
观察者模式和发布订阅
观察者模式什么是观察者模式理解1:学生听到铃声后上课或下课 说明:学生(观察者)听到铃声(被观察者)做出相应的处理(上课/下课)理解2:房屋直租(租客与房东直接联系)老王->房东, 小明->找房人1号,小红->找房人2号老王现在的租客还有10天左右到期不想继续租他的房子,所以老王又要重新找租客,于是在小区公告栏贴上房屋出租消息(…联系人:小王15182*****)。刚毕业的小明小明和准备进城找工作的小红恰好看到了老王的房屋出租消息,于是两人分别给老王打电话告诉老王自己原创 2021-11-30 18:00:01 · 270 阅读 · 0 评论 -
js中Null判断运算符||和??的区别
||运算符:当某个属性或某个值为null、undefined、false、0、空字符串" "时,取||后面的默认值??运算符:当某个属性或某个值为null或undefined时,取??后面的默认值// 0,1分别代表关,开。默认值为1 开 let open=0 let open1 = open || 1 //1 let open2 = open ?? 1 //0 console.log(0||1) //1 console.log(.原创 2021-03-17 17:25:24 · 483 阅读 · 0 评论 -
elementUi重复点击按钮发送请求,提示框重复出现
重写message原创 2021-02-18 11:35:34 · 633 阅读 · 0 评论 -
vue项目中基础组件全局注册
使用情景在项目开发过程中,通常把需要重复使用的组件放在components文件下作为公共组件。一般使用方式是,在需要使用的组件中引入公共组件,然后再注册、使用。这种方式,在公共组件使用较多的情况下显得比较繁琐。所以,为了提高开发效率,把components文件夹下面的这些公共组件直接注册为全局组件。在使用时无需引入注册,直接使用。使用方式:1.在src目录下创建lib/globals.js;2.在main.js中引入该文件// Globally register all base compo原创 2021-02-18 10:56:27 · 253 阅读 · 0 评论 -
超好用的链判断运算符——?.
链判断运算符作用在读取对象内部属性时,需要先判断对象是否存在,这时就会用到链判断运算符。 <script> const person={ body:{ user:{ name:"张三" } }, } // 传统方式 let name=person&&pers原创 2020-11-22 10:56:14 · 761 阅读 · 0 评论 -
如何快速将数字转为金额格式
先使用toFiexed()转换为2位小数再使用toLocalString()方法原创 2020-11-20 17:53:15 · 445 阅读 · 0 评论 -
JavaScript数组遍历方法大集合
1.forfor循环是最常用,也是最简单的遍历方法基本语法:for(let i=0; i<arr.length; i++){循环体}let arr=['张三','李四','王五'] for(let i=0; i<arr.length; i++){ console.log(arr[i]) }//将数组的长度保存下来,避免每次访问数组的长度(当数组元素比较多时,效果更明显)let arr=['张三','李四','王五']for(let i=0,len=原创 2020-09-15 21:34:49 · 304 阅读 · 0 评论 -
H5本地存储与会话存储-希望清单
本地存储与会话存储介绍1.本地存储(localStorage)和会话存储(sessionStorage)是HTML5的Web存储提供的客户端存储技术.2.会话存储(sessionStorage),顾名思义"对话过程中的数据", 数据是存在会话过程,会话结束数据也就销毁. 会话存储的生命周期从一个页面打开开始,到这个页面关闭结束.会话存储中的主要方法:①添加会话:sessionStorage.setItem(key,val)②修改:sessionStorage.setItem(key,newVal)原创 2020-08-24 22:40:42 · 960 阅读 · 0 评论 -
模拟音乐播放时图片旋转效果(css3)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ .原创 2020-08-15 13:18:01 · 1417 阅读 · 3 评论 -
js原生VS jQuery实现分享到功能
HTML结构和css样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {原创 2020-08-13 13:21:29 · 237 阅读 · 0 评论 -
jq实现左右选项移动功能(穿梭框)
布局效果图功能描述1.点击——>按钮可以将左边选中的选项移动到右边2.点击<——按钮可以将右边选中的选项移动到左边3.点击===>按钮可以将左边的全部移动到右边4.点击===>按钮可以将右边的全部移动到左边5.双击选项可以将该选项移动到对面6.点击‘上’按钮可以将左边和右边选中的选项向上移动7.点击‘下’按钮可以将左边和右边选中的选项向下移动代码<!DOCTYPE html><html lang="en"><head>原创 2020-08-05 21:46:34 · 2314 阅读 · 0 评论 -
楼层滚动效果原来是这样实现的(使用jquery编写)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {原创 2020-08-05 17:01:47 · 374 阅读 · 0 评论 -
学了js你也可以写一个简单的抽奖功能试试手气
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> ul { width: 328px;原创 2020-08-05 15:39:45 · 134 阅读 · 0 评论 -
js如何实现倒计时功能?
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="b原创 2020-08-05 15:01:41 · 187 阅读 · 0 评论 -
返回顶部功能(js原生与jq)
结构样式布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #rTop{原创 2020-08-05 12:04:59 · 74 阅读 · 0 评论 -
js如何实现选项卡功能
选项卡效果图HTML结构和css样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-08-04 16:56:36 · 544 阅读 · 0 评论 -
javaScript-BOM浏览器对象模型
一.什么是BOMBOM(Browser Object Model)浏览器对象模型, BOM不是一个具体的对象,而是很多对象的集合, 通过对象中的属性和方法操作浏览器. 比如操作浏览器窗口的大小,地址栏,历史记录等.二.BOM中的对象有哪些1.window对象window对象是BOM中的顶层对象,也是脚本中的全局对象, 在调用window属性和方法时, 可以省略window前缀.window对象中的方法:① alert()弹出警告框<script> window.alert(原创 2020-07-18 22:17:00 · 114 阅读 · 0 评论 -
js-对象-判断上传的图片格式是否正确
一.笔记二.对象练习1.判断图片上传判断格式是否正确<script> /* 需求:判断图片上传格式是否是正确(JPG,png,gif) */ // 获取到的路径 let filePath = 'F:\prom\name\doc\img\01.jpg' // 获取最后一个点的位置 let index = filePath.lastIndexOf('.') console.log(index) // 截取最后一个文件后缀名 le原创 2020-07-17 16:40:50 · 620 阅读 · 0 评论 -
JavaScript数组-数组遍历与数组的内置方法
一.笔记二.练习1.定义数组的两种方式①new字符实例化数组②字面量实例化数组<script> /* 通过new字符实例化数组*/ let arr = new Array('英文','good',99) // 访问数组 console.log(arr) // 访问数组元素 console.log(arr[1]); console.log(arr[30]); //undefined,如果访问的索引值不存在,默认用undefin原创 2020-07-14 11:15:09 · 295 阅读 · 0 评论 -
JavaScript中函数的理解
一.笔记二.练习1.函数声明式和表达式的区别函数声明式可以在定义函数之前调用, 而函数表达式只能在函数定义之后调用.<script> /* 声明式 */ //函数声明式可以在定义之前调用 printSum() function printSum(){ let sum=1+2; console.log(sum) } printSum()// ==============================原创 2020-07-14 10:25:37 · 359 阅读 · 0 评论 -
JS流程控制语句-笔记整理
一.笔记二.分支结构例子<script> /* 优秀(>=90),良好(>=80), 中等(>=70),及格(>=60), 不及格(其他情况) */ // 注意:苛刻的条件放前面 let grade = prompt("请输入你的成绩",0) if(grade >= 90){ console.log("优秀") }else if(grade >= 80原创 2020-07-12 23:01:34 · 261 阅读 · 0 评论 -
js-变量声明方式var、let、const、数据类型、运算符
原创 2020-07-02 19:57:00 · 79 阅读 · 0 评论