js、html、css
javascript,html css
Shimmer-612
这个作者很懒,什么都没留下…
展开
-
css显示隐藏元素
css显示隐藏元素1、display:none元素在页面不显示但是在dom结构上能看到触发回流和重绘1、其余属性block: 块元素inline: 行内元素(默认值)inline-block:行内块元素inherit:继承父元素的display属性2、opacity:0透明度为0只是看不到,但是还存在,点击事件可以触发会触发页面的重绘,不会触发重排3、visibility:hidden元素不可见,但是会占据空间不会触发事件会触发页面的重绘,不会触发重排1、其余属性v原创 2022-04-07 15:26:05 · 835 阅读 · 0 评论 -
虚拟Dom
虚拟Dom一直以来都知道虚拟dom这个概念就是用代码来生成Dom,可以用diff算法今天自己来实现一下,如下创建一个对象,包含元素的各种属性,我这里就写了标签名和文字。嵌套的加个个Child然后循环数组创建元素插入到body中,如果有child就插入到父元素中。因为是一个数组,每次改变的时候就可以对比上次和本次dom数组判断哪里变化了,变化了才修改这就是diff算法<!DOCTYPE html><html lang="en"> <head> &原创 2022-04-07 15:22:40 · 313 阅读 · 0 评论 -
记录月经周期的微信小程序
写了一个记录月经的微信小程序,名字叫姨妈早知道小程序码1、首页2、设置页面3、个人页面4、名词解释页面点击日历下方各名词切换刚开始想逻辑的时候,我只是存了一个选择的日期数,1号就存1持续5天就1-5号,下次就是5号加上周期数减去了当前月的月份。然后下月显示。可是当周期少的时候,一个月中含有两个经期。于是我改变了思路。把当月的天数当成一个数组数组里面是天数的false,例如当天有30天,数组里就有30个false,1号开始持续5天,数组的1-5项变为true。逻辑是对了,但是不原创 2021-03-10 17:01:59 · 10647 阅读 · 7 评论 -
点击按钮访问接口返回的url,进行下载文件与跳转操作
点击按钮访问接口返回的url,进行下载文件与跳转操作点击调用download()方法就是创建a标签设置a标签属性添加a标签到页面中点击a标签移除a标签下载示例 //res 是接口返回的数据download = (res) => { let eleLink = document.createElement("a"); //设置样式为不可见 eleLink.style.display = "none"; //_blank表示在原创 2021-06-17 09:42:38 · 1379 阅读 · 0 评论 -
递归把多层嵌套的一层数据结构转换成原本的多层
背景一个多层嵌套评论回复的场景,但是孤儿后端,把所有的回复数据,放到一个数组里返回给我,只有一层,我要给数据转换成原先的多层嵌套的模式。数据结构如下://commitId是最外层的评论ID//id是每条回复自己的ID//replyId是回复父级的IdreplyMsg表示回复内容这里我表示层级//现在要把每个子级回复放到父级回复的child里面//commitId是最外层的评论ID//id是每条回复自己的ID//replyId是回复父级的Id//现在要把每个子级回复放到父级回复的chil原创 2021-04-21 08:42:53 · 360 阅读 · 0 评论 -
JavaScript关于数组
判断一个数组是否为空const arr = []if(arr.length===0) { console.log("该数组是空数组")}判断一个数组里是否有重复值//循环添加到一个对象里,判断对象里是否有这个值var arr = ["a", "b", "c", "d", "a"]function isRepeat(arr) { var obj= {}; for (var i in arr) { if (obj[arr[i]]) {原创 2021-04-08 09:38:35 · 62 阅读 · 0 评论 -
简单实现打字效果
自己的博客主页,有个打字的效果,就简单的自己动手实现了下。思路就是,添加数组里的字,删除数组里的字。不多说,直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w原创 2021-03-17 15:12:10 · 134 阅读 · 0 评论 -
从数组中取出随机几个数组成新数组(不重复取)
要给自己的商城,加一个推荐商品的功能。想让他随机从商品表中取出4个数据。 一开始我用Math.random()*arr.length但是会取出相同的。这样就不太对,哪有推荐两个相同的商品呢。 然后想到获取当前选择的下标,把选择的那个删除。下一次随机,就随机不到那个数了。//前台传来的当前商品的idconst nowGoodsIndex = req.query.goods_id-1 const goods = await Goods.find() le原创 2021-03-11 17:48:40 · 1240 阅读 · 0 评论 -
前端面试二——HTML
前端面试二——HTML1、什么是标签语义化1、语义化的标签就是让标签有自己的含意例如 <header></header>表示头部 <footer></footer> 表示尾部 <main></main> 表示页面主体等。2、语义化标签的优点代码结构清晰,有利于搜索引擎优化(SEO)便于团队开发和维护,可读性更高。2、H5有哪些新特性语义化标签 、表单新特性、视频(video)和音频(audio)、canvas画布、svg原创 2020-08-24 20:50:50 · 141 阅读 · 0 评论 -
前端面试一 CSS
前端面试一 CSS1、盒模型盒模型有两种一种是W3C的标准盒模型,一种是IE的怪异盒模型。标准盒模型标准盒模型的width和height指的是内容区域也就是content区域的宽度和高度。标准盒模型的大小 = content + border + padding + margin怪异盒模型怪异盒模型的width和height指的是内容,边框,内边距这三个的总和。也就是(content+border+padding)怪异盒模型的大小 = width(content+border+padding原创 2020-08-24 20:00:49 · 94 阅读 · 1 评论 -
JavaScript完整的原型链
原创 2020-04-07 09:23:05 · 93 阅读 · 0 评论 -
Js中this的指向问题
函数的四种调用 模式 ==> this的指向 // this的指向 是灵活的 每一个函数 都有自己的this 指向 // this的指向和函数的调用模式相关 // 1.this的指向只有 在函数调用的时候才能确定下来 // 声明函数 并不能确定函数的this指向 // 2.this的指向 ...原创 2020-03-05 16:26:44 · 61 阅读 · 0 评论 -
JavaScript中伪数组借用数组的方法call()
<script>// 伪数组 有数字下标 有length 能for循环遍历 不能使用数组的方法var obj = { 0:"zs", 1:15, 2:"sing", length:3}// 给obj数组添加其他属性// 可以用call()方法借用 数组的push方法// Array.prototype.push....原创 2020-03-05 16:11:50 · 901 阅读 · 0 评论 -
JS继承的方法
混入式继承 // var zz={ // money : "10000000", // skill : "撩妹", // height:"181cm", // width:"75kg" // } // var wkl = { ...原创 2020-03-04 18:07:41 · 80 阅读 · 0 评论 -
js原型相关内容
prototype属性 <script> // 任何函数 都有prototype属性 // 函数的prototype属性值 是一个对象 我们把这个对象叫做原型 也叫做原型对象 // 通过构造函数创建的实例对象,可以直接访问构造函数的prototype属性上的任意成员 function Person() { ...原创 2020-03-04 11:34:03 · 73 阅读 · 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&l...原创 2020-03-04 09:20:16 · 197 阅读 · 0 评论 -
js手风琴
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>海贼王悬赏</t...原创 2020-02-28 23:59:15 · 119 阅读 · 0 评论 -
js轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>完全体轮播图&...原创 2020-02-28 23:55:27 · 83 阅读 · 0 评论 -
javascript 的预编译过程
javascript 的预编译过程JS 运行三部曲1、语法解析 (分析是否有语法错误)2、预编译(全局 和 函数体内)3、解释运行(除了预编译过的,一行一行运行)预编译前奏1、暗示全局变量(任何变量,如果未经声明就赋值,此变量就是全局变量,函数体内也不例外)例如:a=123; 这个变量a就是全局变量一切声明的全局变量,全是window的属性例如:a=123;就等于window.a...原创 2019-11-25 14:14:27 · 157 阅读 · 0 评论