HTML+css+js基本知识
文章平均质量分 62
HTML+css基本知识
陌~上花开
好好学习,天天向上。
展开
-
正则表达式中匹配一个动态的字符串、使用模版字符串例如:密码不能包含全部用户名正则
比如动态匹配一个字符串。原创 2023-06-08 23:16:23 · 334 阅读 · 0 评论 -
使用grid快速布局,左侧一个元素右侧两个元素。上面一个元素下面两个元素。
【代码】使用grid快速布局,左侧一个元素右侧两个元素。上面一个元素下面两个元素。原创 2023-05-17 10:35:27 · 749 阅读 · 0 评论 -
scrollIntoView的基本定义、以及Vue3、vue2中使用: 点击导航滚动到对应区域。
MDN 关于scorllIntoView的介绍Element接口的方法会滚动元素的父容器,使被调用的元素对用户可见。原创 2023-05-15 17:58:54 · 8049 阅读 · 1 评论 -
css中常用伪类表单验证:invalid、:valid、:required、以及:not 、:lang、:empty的使用
CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。CSS 伪类表示内容验证正确的 或其他 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。CSS 伪类用于选择不包含任何子元素的元素。子元素可以是元素节点或文本(包括空格)。CSS 伪类表示任何设置了 required 属性的。是 CSS 伪类选择器,用来选择任何未通过验证的。CSS 伪类基于元素语言来匹配页面元素。原创 2023-05-09 15:15:44 · 1713 阅读 · 0 评论 -
js中数组逆序输出
js中数组逆序输出(一)<script> function reverse(array) { var newArray = [];//定义的新数组是为了接收翻转之后的数组的 for (var i = 0; i < array.length; i++) { // unshift 是让数据插入到数组的前面 newArray.unshift(array[i]);//原创 2020-07-25 17:41:42 · 6995 阅读 · 0 评论 -
背景色高斯模糊的使用、filter:blur()、以及消除周围模糊和白边的问题、backdrop-filter使用
还有高级的是背景色的高斯模糊。这个比较麻烦点。改天来记录下。原创 2022-08-17 10:07:10 · 1633 阅读 · 0 评论 -
display:grid的基本使用、行和列的基本设置、间距、行列宽高
宫格化布局的基本使用原创 2022-08-02 15:50:26 · 24925 阅读 · 2 评论 -
JavaScript中Null和undefined类型
1. Undefined类型Undefined类型只有一个值,就是特殊值undefined,当使用了var或let声明了变量但是没有初始化时,就相当于给变量赋予了undefined值let message=undefinedconsole.log(message==undefined);//true对未声明的变量,使用typeof的时候,返回结果也"undefined"因为未初始化的变量会被自动赋予undefined值(没看懂……) console.log(typeof age);/原创 2021-08-31 11:54:49 · 209 阅读 · 0 评论 -
JavaScript中判断对象是否为空、保存属性值不为空的对象
1、空对象 // 1、判断一个空对象 Object.keys(obj) 返回结果是一个数组 var obj = {} console.log(Object.keys(obj));//[] if (Object.keys(obj).length == 0) { console.log('这是一个空对象!'); } 2、保存值不为空的对象 /* 2、遍历对象.原创 2020-11-11 18:00:11 · 1647 阅读 · 0 评论 -
JavaScript中的递归、作用域链、闭包、和闭包中的this指向
1.递归递归阶乘 // 递归阶乘函数 function factorial(num){ if(num<=1){ return 1 }else{ return num*factorial(num-1) } } console.log(factorial(5));递归斐波那契数列,第n项的值是第n-1和第n-原创 2021-08-16 10:23:35 · 214 阅读 · 0 评论 -
JavaScript中的apply、call、bind
这两个方法都会以指定的this值来调用函数,即会设置调用函数时函数体内this对象的值。1. apply()apply()方法接收两个参数:函数内的this的值和一个参数数组。第二个参数可以是Array的实例。 function sum(num1,num2){ return num1+num2 } function callSum(num1,num2){ // arguments对象指的是num1和.原创 2021-08-13 17:19:36 · 103 阅读 · 0 评论 -
JavaScript中的函数中arguments、参数、默认值和表达式以及箭头函数
箭头函数:箭头函数虽然语法简洁、但也有很多场合不适用。箭头函数不能使用arguments、super和new.target,也不能用作构造函数。此外箭头函数也没有prototype属性。1. 函数中的argumentsarguments对象是一个类数组对象,因此可以使用中括号语法访问其中的元素。而要确定传进来多少个参数们可以访问arguments.length属性。 function say(name,message){ console.log(arguments.原创 2021-08-13 14:27:42 · 929 阅读 · 0 评论 -
JavaScript中的构造函数、原型和实例
1.原型模式:每个函数都会创建一个prototype属性,这个属性是一个对象,包含应该由特定引用类型的实例共享的属性和方法。实际上,这个对象就是通过构造函数创建的对象的原型。使用原型对象的好处是,在它上面定义的的属性和方法可以被对象实例共享。原来在构造函数中直接赋给对象实例的值,可以直接赋值给它们的原型,如下所示: function Person(){} // 原型上创建的属性和方法,可以被对象实例共享 Person.prototype.name='maria原创 2021-08-11 14:39:54 · 1625 阅读 · 0 评论 -
JavaScript中数据属性和访问器属性Object.defineProperty
es6介绍属性分为两种:数据属性和访问器属性。1.数据属性数据属性包含一个保存数据值的位置,值会从这个位置读取,也会写入到这个位置,数据属性又4个特性描述它们的行为。Configurable:表示属性是否可以通过delete删除并重新定义,是否可以修改它的特性,以及是否可以把它改为访问器属性。默认情况下,所有直接定义在对象上的属性这个特性都是true。Enumberable:表示属性是否可以通过for-in循环返回。默认情况下,所有直接定义在对象上的属性这个特性都是true。Writa原创 2021-08-09 15:46:19 · 243 阅读 · 0 评论 -
JavaScript中将对象按照某个属性排序
一直没弄明白 a[value]这种访问对象的方式……今天懂了对象字面量直接访问的形式比如obj.name指的是访问obj对象上的name属性啊,但是此时对象上要有这个name属性,否则访问到的就是undefined。使用中括号来存取属性,这两种存取属性的方式没有区别,使用中括号就是可以通过变量访问属性。 var obj={name:'test'} let propertyName='name' console.log(obj[propertyName],原创 2021-08-05 17:29:39 · 10155 阅读 · 0 评论 -
JavaScript中检测是否是数组
判断一个对象是不是数组,在只有一个全局作用域的情况下,使用instanceof操作符就足矣。如果网页里又多个框架,可能涉及两个不同的全局执行上下文,就会有两个不同版本的Array构造函数,为了解决这个问题可以使用Array.isArray()方法。这个方法的确定一个值是否为数组instanceofisArray()...原创 2021-08-05 14:14:19 · 129 阅读 · 0 评论 -
css写一个加号+
参考的这篇文章又修改了下:<view class="icon"></view> .icon{ width: 24rpx; height: 24rpx; color: #475EFD; position: relative; /* border: solid 1px blue; 添加边框可以看到加号的位置在哪里*/ } .icon::before{ content: ''.转载 2021-07-15 14:03:31 · 776 阅读 · 0 评论 -
css中文字渐变和背景渐变中的方向
css background: linear-gradient(180deg, #00A1FF 0%, #00F3F9 100%);; -webkit-background-clip: text; -webkit-text-fill-color: transparent;转载 2021-06-23 10:44:17 · 254 阅读 · 0 评论 -
javascript中常见的数据类型Boolean、String、Number、Object、Undefined
Undefined类型原创 2021-06-07 13:50:27 · 150 阅读 · 0 评论 -
CSS零碎知识点扩大可点击区域和半透明边框
半透明边框 .box{ width: 200px; height: 200px; background-color: rgb(122, 116, 117); background: yellowgreen; display: flex; align-items: center; justify-content: center; .原创 2021-06-04 14:08:15 · 299 阅读 · 0 评论 -
javascript中变量let var const
var关键字var声明作用域使用var操作定义的变量会成为包含它的函数的局部变量,在函数内部定义一个变量,就意味着该变量将在函数退出时被销毁。 (function test(){ var x='hello' y='how are you?'// 全局变量y })() //y未使用var定义,全局可访问 console.log(y);//how are you? //在函数外部打印x原创 2021-06-04 13:56:01 · 104 阅读 · 1 评论 -
flex布局垂直居中并换行展示内容
display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: wrap;原创 2020-10-10 15:39:35 · 1113 阅读 · 0 评论 -
input输入框中有个小图标
input { width: 220px; height: 40px; box-sizing: border-box; border: solid 2px #ccc; border-radius: 4px; background: #fff url('https://static.runoob.com/images/mix/searchicon.png') n...原创 2020-09-12 11:20:55 · 1821 阅读 · 0 评论 -
CSS中使用伪类清除浮动的影响
清除谁的浮动添加对应的类名 .clear::after{ content: ''; display: block; clear: both; } <!-- 清除ul的浮动影响添加类名clear --> <ul class="clear"> <li></li> <li></li>原创 2020-09-12 11:04:55 · 187 阅读 · 0 评论 -
flex布局写简单的左logo、右导航
justify-content 属性内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。justify-content 语法如下:justify-content: flex-start | flex-end | center | space-between | space-aroundspace-between:弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start。否则,第1个弹性项的外.原创 2020-09-08 19:23:20 · 875 阅读 · 0 评论 -
盒子阴影box-shadow用法
width: 100px; height: 100px; background-color:lightcoral; box-shadow: 10px 10px 5px #888888;原创 2020-09-04 18:59:33 · 352 阅读 · 0 评论 -
CSS中单行文本和多行文本溢出显示
文字不换行的时候<div> <p>你好啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p> </div> div { width: 100px; height: 100px; border: solid pink 2px; } p { /* 文字不换行,默认是换行的wrap */ whi.转载 2020-08-15 16:55:43 · 175 阅读 · 0 评论 -
CSS中写个三角形
利用边框的性质.box{ width: 0; height:0; border: 60px solid; /*彩色的四种颜色的边框*/ /*border-color:red pink yellowgreen cyan ;*/ border-color: red transparent transparent transparent ;原创 2020-08-03 20:50:41 · 293 阅读 · 0 评论