- 博客(40)
- 收藏
- 关注
RSS订阅原创 前端常见的加密与解密方法
npm 方式$ npm install --save js-base64使用方式import { Base64 } from 'js-base64';import { encode, decode } from 'js-base64';var str = "加密内容123";var after = encode(str); // 加密的数据var before = decode(after); // 解密的数据console.log(after, before); // 5Yqg5a+.
2020-11-13 14:57:57
1043
原创 Vue父子组件生命周期执行顺序
Vue父子组件生命周期执行顺序1. 加载渲染过程父组件的beforeCreate、created、beforeMount --> 所有子组件的beforeCreate、created、beforeMount --> 所有子组件的mounted --> 父组件的mounted如果子组件下面包含子组件，亦满足此过程2. 子组件更新过程父组件beforeUpdate --> 子组件beforeUpdate --> 子组件updated --> 父组件updat
2020-11-13 14:56:49
178
原创 js根据日期或时间戳获取年月日时分秒
js根据时间戳获取年月日时分秒function formatTime(time){ var date = new Date(time) var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate(); var hour = date.getHours(); var minutes = date.getMinutes(); var second
2020-11-13 14:55:53
6249
原创 JS获取当前时间戳的方法
js获取当前时间戳的方法第一种方法（只能精确到秒）var timestamp = Date.parse(new Date()); // 1604297892000第二种方法（获取到具体的毫秒值）var timestamp = (new Date()).valueOf(); // 1604297892942第二种方法（获取到具体的毫秒值）var timestamp=new Date().getTime(); // 1604297892942...
2020-11-02 14:49:41
12362
原创 css3新增伪类选择器
1.css3新增属性选择器e[type="text"]{} 选择名字完全匹配的这个标签,eg:div[class="box"]{width:100px;}div中class等于box的宽度改为100px。e[type*=""] {}*号选择的是包含的属性值e[type^=""] {}^号选择是以“”里面开头的标签e[type&=""]{}&号：以“”里内容结尾的标签2.结构性伪类选择器E:first-child选择第一个子元素E （ E...
2020-07-06 17:14:04
640
原创 css3新增的属性有哪些
1.border-radius 圆角边框2.背景background-size： 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。几个常用的属性值 background-size：cover | contain | auto | 具体像素px | 百分比 % background-ori...
2020-07-06 16:44:53
374
原创 JavaScript 计算任意数字的阶乘
function jc(n){//编程阶乘函数 for(var i = 1,jc = 1;i <= n;i++){ jc *= i; } return jc;}console.log(jc(4));//控制台打印,验证结果
2020-07-06 16:12:25
1760
原创 javascript 分别计算1~n 之间的奇数和偶数的倒数和
（当n为奇数：1+1/3+··+1/n）（当n为偶数：1/2+1/4+···+1/n）<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> /*编写一个函数，输入n为偶数时，调用函数求1/2+1/4+
2020-07-06 15:55:31
2414
原创 js函数的构造方式，参数（arguments），return以及函数的作用域
函数的定义函数是由事件驱动或者当被调用时可重复执行的代码块好处：减少代码冗余 增加灵活性 便于维护 提高可扩展性定义函数三种方式：1）函数声明function name(){//具体的语句}2）函数表达式：var functionName = function(){//具体的语句}3)借助内置一个方法（Function），构造函数方式var functionName = ne...
2020-07-06 15:29:08
413
原创 javascript程序结构（顺序、分支、循环）
顺序结构代码从上到下依次执行 var a = 100; var b = 200; var c = a; a = b; b = c; console.log(a,b);//20 10分支结构单分支，双分支，多分支单分支：if(条件){ //可执行语句 在条件为真（true或者能转换为true）时执行 }双分支:if(条件){ //...
2020-07-06 15:28:22
238
原创 JavaScript判断数据类型的方法
判断数据类型的方法 typeofconsole.log(typeof 10,typeof "10",typeof true,typeof undefined,typeof null,typeof {});//结果（Number String Boolean underfined null object）...
2020-07-06 15:27:25
97
原创 JavaScript自增自减
var a = 1;var b = a++;//先赋值，再加1console.log(a,b);//结果为（2,1）var b = ++a;//先加1，再赋值 console.log(a,b);//结果为（2,2）
2020-07-06 15:26:49
560
原创 JavaScript逻辑运算符 与（&&）或（||）非（!）
逻辑与：（&&）1）如果第一个操作数为true或者能隐式转换为true，则运算结果为第二个操作数2）如果第一个操作数为false或者能隐式转换为false，则运算结果为第一个操作数eg：console.log(2&&6,2&&-10,0&&10,false&&20,true&&0);//结果（6...
2020-04-01 20:22:38
484
原创 JavaScript数据类型及变量声明方式
JavaScript数据类型包括 数值（number）字符串（string） 布尔（boolean） undefined null 对象（object）var a = 10;//数值类型var a = "abc";//用成对的引号引起来的字符，都成为字符串var a = true;//布尔类型只有两个值 true falsevar a = undefined...
2020-04-01 20:11:20
451
原创 JavaScript注释方式、命名规则以及运算符
1.js注释1.//单行注释.2./* 多行注释*/2.js命名规则变量名命名规则：字母，数字，下划线，$组成，不能以数字开头，区分大小写，不能是关键字和保留字。1.驼峰式命名法 eg：oddTxt()2.匈牙利命名法 eg：odd_txt()3.js运算符三种：一元运算符、二元运算符、三元运算符基本运算符：+ - * / %...
2020-04-01 20:08:31
235
原创 JavaScript的概念、组成以及写法
1.概念基于对象和事件驱动，并具有安全性能的客户端（浏览器）脚本语言。2.组成js组成：ECMAScript、DOM(文档对象模型)、BOM（浏览器对象模型）3.写法js三种写法和css样式类似，分为以下三种内联：写在普通标签中（不推荐）<input type="button" value="" οnclick="alert('点击按钮弹出了我')">内部：写...
2020-04-01 20:03:03
144
原创 移动端适配之viewport + rem布局
html头部添加meta标签<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>引入rem.js(在这里设计稿尺寸为750px，可自行根据设计稿尺寸设置对应的值)varfn...
2020-04-01 20:00:09
571
原创 flex弹性布局
1.dispiay：flex;//设置为弹性盒子2.flex-direction()主轴的方向row默认一行/row-revers:反转/column:纵向排列/column-reverse:反转。3.justify-content(主轴对齐方式):flex-start(默认，左对齐)/flex-end(右对齐)/center(居中)/space-between(两端对齐，中间自动分配)/s...
2020-04-01 19:56:06
121
原创 HTML常见bug以及解决方案
1.图片间隙div中的图片间隙bug：在块元素中插入图片时，有时图片会将块元素下方撑大三个像素。hack：给<img>添加声明：display：block；vertical-align：middle2.css兼容问题1）表单元素行高不一致（IE,MOZ,C,O,S）BUG:表单元素行高对齐方式不一致hack：给表单元素添加声明：flo...
2020-04-01 19:54:52
1022
原创 常用浏览器内核
1）Trident :IE、Maxthon（遨游）、腾讯、Theworld世界之窗、360浏览器代表作品IE，因为Ie捆绑在Windows中，所有占有极高的市场份额，又称IE内核或MSHTML,此内核只能应用于windows平台，且是不开源的。2）Gecko:代表作品Mozilla Firefox是开源的，它的最大优势是跨平台，能在Microsoft Windows、Linus和MacOS...
2020-04-01 19:53:29
132
原创 HTML5新增标签
<header>写网页头部区域</header><nav>写导航区域</nav><article>写独立版块区域</article><aside>写与article相关联的一些板块</aside><section>写网页大块区域的</sectio...
2020-04-01 19:51:29
91
原创 javascript 获取后台返回时间，并以xxxx年xx月xx日的形式显示
functionformatTime(time){vardate=newDate(time)varyear=date.getFullYear()varmonth=date.getMonth()+1varday=date.ge...
2020-04-01 15:59:44
1503
原创 link 标签导入样式和 import 标签导入样式的区别
link 属于html 标签，而 @import 是 css 提供的； 页面被加载时，link 会同时被加载，而 @import 引用的 css 会等到页面加载结束后加载； link 方式样式的权重高于 @import 的； link 可以使用 js 动态引入，@import不行； link 此没有兼容性要求，而 @import IE低版本浏览器不支持。...
2019-10-07 12:02:08
632
原创 文本显示行数控制
1.单行文本溢出显示省略号overflow:hidden; //溢出隐藏text-overflow:ellipsis;//超出显示省略号white-space:nowrap;//强制文本在一行内显示2.文本显示行数控制overflow: hidden;text-overflow: ellipsis; // 超出显示'...'display: -webkit-box; /...
2019-10-07 11:56:43
634
原创 常用的 meta 标签？
charset，用于描述 HTML 文档的编码形式<meta charset="UTF-8" >viewport，控制视口的大小和比例<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">...
2019-10-06 15:13:23
112
原创 HTML 语义化的理解？
语义化：指使用恰当语义的 html 标签，如 header 标签 代表头部，article 标签代表正文等好处：增强了可读性、有利于SEO优化
2019-10-06 15:09:06
90
原创 HTML、XHTML、XML 有什么区别？
HTML(超文本标记语言): 在 html4.0 之前 HTML 先有实现再有标准，导致 HTML 非常混乱和松散XML(可扩展标记语言): 主要用于存储数据和结构，JSON作用类似，但更加轻量高效XHTML(可扩展超文本标记语言): 基于以上两者而来...
2019-10-06 15:07:21
215
原创 doctype 的作用是什么？
DOCTYPE 是 html5 标准网页声明，必须声明在HTML文档的第一行。是用来告知浏览器的解析器用什么文档标准解析这个文档，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析。...
2019-10-06 14:57:48
3347
原创 单行文本溢出显示省略号
单行文本溢出显示省略号的写法1.容器宽度：width：value；2.强制文本在一行内显示：white-space：nowrap；3.溢出内容隐藏：overflow：hidden；4.溢出文本显示省略号：text-overflow：ellipsis；...
2019-06-22 09:56:39
167
原创 css盒模型的组成（margin、padding）
1.盒模型的概念和组成 1）盒模型的概念：css定义的所有元素都可以拥有像盒子一样的外形和平面空间，它是css布局的基石，它规定了网页元素如何显示以及元素间的相互关系。 2)css盒子模型都具备这些属性：内容（content）、填充（padding）、边框（border）、边界（margin）2.padding定义：padding是元素内容到元素边框之间的距离，叫内填充、补白或内边距；...
2019-06-22 09:44:11
1211
原创 css背景属性
css背景 1）背景颜色 background-color：颜色值； 如background-color：#f00; 2）background-image：url(背景图片的路径及全称); 如background-image：url(image/1.jpg);(在设置css背景图片的时候要注意css文件与背景图片文件的相对路径)网页上有两种图片形式：插入图片、背景图；插入图片：属于网...
2019-06-22 09:34:58
267
原创 css文本属性
css属性值：属性值包括法定属性值和常规的数值加单位或颜色值。css文本属性1）文本大小：font-size:value; 如：font-size:12px;说明：属性值为数值型时，必须给属性值加单位，属性值为0时除外 单位还可以是pt,9pt=12px 默认情况下，1em=16px,0.75em=12px; 使用绝对大小关键字：xx-small=9px;x...
2019-06-22 09:23:24
267
原创 css特性
CSS三大特性：特殊性、继承性、层叠性特殊性：即权重继承性：子元素会继承父元素的一些属性层叠性：样式产生冲突时，会如何加载 1）.选择器权重大的优先加载 2）权重一样时，按照文件的读写顺序，后写的会覆盖先写的样式。...
2019-06-22 09:09:35
69
原创 css选择器以及权重
css选择器选择器表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。 css选择器常用的有3大类：标签选择器，id选择器，类选择器 1）标签选择器：标签名{属性名：属性值；属性名：属性值} 例如div{width:200px;height:100px;} 2）id选择器：给标签一个id 例如<div id="one"></div> 使...
2019-06-22 08:57:04
306
原创 CSS样式表及优先级
css样式表 1）内部样式表<style type="text/css"> /*css语句*/ </style> 2）内联样式 (行内样式)<标签 style="属性:属性值;属性:属性值;" ></标签> 3）引用外部样式表文件 ...
2019-06-13 10:49:36
5372
原创 CSS简介及语法
1.css简介 cascading style sheets 层叠样式表 WEB标准中的表现标准语言，在网页中主要对网页信息的显示进行控制，简单来说就是修饰网页信息的显示样式。2.css语法 选择符 {属性:属性值;属性:属性值;} 说明：css语法由两部分组成：选择符、声明说明：1）每个css样式由两部分组成，即选择符和声明，声明又分为属性和属性值； 2）属性必须放在...
2019-06-13 08:50:45
128
原创 HTML中div和span的用法
1.div的用法 <div id="id名" class="class名"></div> 文档区域，文档布局对象2.span的用法<span></span>文本节点，内容可以是一段文字或者一个字。...
2019-06-13 08:41:18
3594
原创 HTML列表、表格、表单
1.无序列表<ul><li></li>...</ul>有序列表<ol><li></li>...</ol> (type来规定有序列表的是以数字还是字母等排序，start来表示从第几个开始)自定义列表<dl><dt></dt><dd></dd>...
2019-06-13 08:38:32
398
原创 HTML初识以及一些基本标签
1.web标准包含三部分：结构（html）、表现(css)、行为(js).万维网联盟（w3c）制定了结构和表现的标准，欧洲电脑厂商联合会(ECMA)制定了行为标准.2.html:超文本标记语言 xhtml:可扩展超文本标记语言（标识语言） html5是html的第五次重大修改3.html的结构：<!doctype html>声明文档类型<html> 说明我们写的标...
2019-06-13 08:33:18
83
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人