javascript_笔记专栏
javascript_笔记专栏
轻盈的风
欢迎大家一起讨论技术,共同进步!
展开
-
超详细购物车案例js实现购物车上【2021.10.10】
一、前言 本文所用的代码是之前看一个大大所写的,忘记大大名字了,侵权立删。实现购物车的方法有很多,我们不应该把重心放在代码上,而是应该放在功能上和逻辑上,这样再复杂的项目,也能从众多功能中一步一步下手。不会代码我们可以去查,直到实现功能为止。二、功能1.全选按钮点击后反选按钮的状态改为未选中状态 判断点击后是否为选中状态,是则选中所有单选按钮并通过改变classname从而改变背景颜色,否则取消所有单选按钮2.反选按钮点击后通过逻辑运算符!改变单选按钮的选中状态 判断...原创 2021-10-10 16:55:35 · 1011 阅读 · 0 评论 -
js中操作符的易错点【2021.10.21】
一、先了解什么是短路运算1.逻辑与(&)与短路与(&&)的区别& 左边无论真假,右边都进行运算&& 如果左边为真,右边参与运算,如果左边为假,那么右边不参与运算如:第一个为true。第二个未事先声明,这是会报错的那第一个为false,第二个未事先声明,这就不会报错了2.逻辑或(|)与短路或(||)的区别| 左边无论真假,右边都进行运算|| 当左边未真,右边不参与运算二、操作符中的易错题例1:letostring=..原创 2021-10-21 15:30:21 · 109 阅读 · 0 评论 -
js实现简单轮播图上【2021.10.17】
一、想要实现的功能1.每隔1.8s切换一次图片2.点击两边的按钮可以切换图片3.轮播图底部有进度条二、代码展示原创 2021-10-17 19:35:33 · 246 阅读 · 0 评论 -
js传统事件注册方式和方法监听注册方式【2021.10.15】
一、传统注册方式以on开头的事件,如:onclick具有唯一性,最后注册的处理函数会覆盖前面的处理函数常用事件:onblur:失去焦点 onfocus:获得焦点 onload:页面或图加载完成 onmousedown:鼠标按钮被按下 onmouseup:松开鼠标按钮 onmouseover:移动鼠标 onmouseout:鼠标从某元素上离开 onkeydown:某个键盘按键被按下 onkeyup:某个键盘按键被松开 onkeypress:某个键盘按键被按下并松开 onch原创 2021-10-15 14:34:37 · 780 阅读 · 0 评论 -
js实现文字依次出现和展示当前时间【2021.10.9】
一、陌生方法的介绍1.toLocaleTimeString() 方法可根据本地时间把 Date 对象的时间部分转换为字符串,并返回结果。2.substring()方法提取字符串中介于两个指定下标之间的字符。返回的字符串包括开始处的字符,但不包括结束处的字符。二、成品展示三、源码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me.原创 2021-10-09 09:32:18 · 234 阅读 · 0 评论 -
js预解析和执行阶段浅谈【2021.10.13】
一、为什么js执行时会阻塞后续页面的内容(包括页面的渲染、其它资源的下载) 通常来说,js在载入后会马上执行(没有动用window.onload\docmuemtrrady等事件),而浏览器需要一个稳定的DOM树结构,为了防止js修改DOM树,浏览器就会在js执行时阻塞后续页面的内容。 JS运行在浏览器中是单线程的,在某个特定的时刻,只有特定的代码能够执行,并且阻塞其他代码的执行。而浏览器是事件驱动的,浏览器中很多行为是异步的,会创建事件放在执行队列中。Javascript引擎...原创 2021-10-13 09:15:11 · 118 阅读 · 0 评论 -
js实现点击按钮改变文字大小【2021.10.8】
一、思路通过onclick将点击事件和对应的方法绑定 通过id获取元素,设置一个基础值i 描述对应的方法:点击一次按钮,i做自加或自减,然后通过style.fontSize=i + "px"改变文本的样式,用if判定步入字体大于18px和小于14px,要超出时提醒并让其对应按钮消失 增加一个计时器,每隔300毫秒检测字体的大小,并对按钮的出现做调整二、成品展示三、代码<!DOCTYPE html><html lang="en"><head>.原创 2021-10-08 15:37:58 · 5845 阅读 · 5 评论 -
超详细购物车案例js实现购物车下【2021.10.11】
一、前言 本文所用的代码是之前看一个大大所写的,忘记大大名字了,侵权立删。实现购物车的方法有很多,我们不应该把重心放在代码上,而是应该放在功能上和逻辑上,这样再复杂的项目,也能从众多功能中一步一步下手。不会代码我们可以去查,直到实现功能为止。二、功能1.全选按钮点击后反选按钮的状态改为未选中状态 判断点击后是否为选中状态,是则选中所有单选按钮并通过改变classname从而改变背景颜色,否则取消所有单选按钮//全选 var checkAll = document....原创 2021-10-11 22:21:41 · 976 阅读 · 2 评论 -
js对节点对象的属性操作的方法【2021.10.16】
一、setAttribute()setAttribute()方法添加指定的属性,并为其赋指定的值,如果这个指定的属性已存在,则仅设置或更改值。不能通过document对象调用。语法:element.setAttribute(attributenname,attributevalue)二、getAttribute()getAttribute()方法返回指定属性名的属性值。不能通过document对象调用。语法:element.getAttribute(attributenname)三、原创 2021-10-16 21:33:25 · 666 阅读 · 0 评论 -
js实现简易下拉列表加flex布局【2021.10.8】
一、简单回顾一下flex布局 当一个盒子使用flex布局后,所有的子元素自动变为容器成员,称为flex项目,简称项目,且设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。现在简单说一下容器属性和项目属性,要看更详细的,建议前往菜鸟教程。容器属性: flex-direction属性-决定主轴的方向(即项目的排列方向),默认是从左到右排列row(默认值):主轴为水平方向,从左到右row-reverse:主轴为水平方向,从...原创 2021-10-08 15:15:56 · 628 阅读 · 2 评论 -
js数据类型转换题以及笔记【2021.10.19】
一、先了解一下什么是'NaN'、八进制、十六进制1.NaNNaN意思是“不是数值”(Not a Number),用于表示本来要返回数值的操作失败了(而不是抛出错误)。比如,用0除任意数值在其他语言中通常都会导致错误,从而中止代码执行。NaN,意思是“不是数值”(Not a Number),用于表示本来要返回数值的操作失败了(而不是抛出错误)。比如,用0除任意数值在其他语言中通常都会导致错误,从而中止代码执行。但在ECMAScript中,0、+0或-0相除会返回NaN:console.log(原创 2021-10-19 20:39:47 · 415 阅读 · 1 评论 -
js实现简单轮播图下【2021.10.18】
一、前言 本章是对前一章功能的完善,添加了一个实时进度条,不过代码我写复杂了,博主还是个小白,只能大家参考一二。二、完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view...原创 2021-10-18 23:00:15 · 61 阅读 · 0 评论 -
构造器和操作符“new“【2021.10.7】[JavaScript]
一、如何使用1.通过"new"操作符来执行二、如何工作1.当对一个函数使用new操作符时,一个空对象会被创建并分配给 this2.执行函数体,修改this,为this添加新属性3.返回this三、new的作用1.实现可重用的对象创建代码2.通过new可知道创建了一个新对象...原创 2021-10-07 18:31:06 · 114 阅读 · 1 评论 -
js元素节点笔记【2021.10.12】
一、什么是节点页面中的所有内容都是节点,包括标签、属性、文本、Node二、如何获取xxx.parentNode得到xxx的父元素节点xxx.children得到xxx所有的子元素节点xxx.children[0]得到xxx的第一个子元素节点xxx.children[xxx.children-1]得到xxx的最后一个子元素节点三、创建节点document.createElment(要创建的元素节点,如"div")四、添加节点node.appendChil原创 2021-10-12 19:55:52 · 77 阅读 · 0 评论 -
js实现简单版聊天室【2021.10.8】
一、思路获取标签 绑定点击事件:onclick 先检查是否消息为空,为空显示提示,不为空发送消息 获取text(文本框)的value(消息) 将消息写入展示盒子的HTML里面二、成品展示三、代码部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content.原创 2021-10-08 15:31:57 · 1827 阅读 · 2 评论 -
js实现随机生成十六进制颜色【2021.10.14】
一、math.random和padEnd原创 2021-10-14 21:35:56 · 373 阅读 · 0 评论 -
ES6新增的使用模板字面量笔记【2021.10.20】
一、模板字面量ECMAScript 6新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同,模板字面量保留换行字符,可以跨行定义字符串,也就是可以实现多行字符串,也可以向HTML插入经过安全转换后的字符串——HTML转义。le string = 'first line\nsecond line'; let stringTwo= `first line second line`;上面个代码的结果是一样的模板字面量在定义模板时...原创 2021-10-20 12:28:32 · 124 阅读 · 0 评论