- 博客(41)
- 收藏
- 关注
RSS订阅原创 js流程控制语句
流程控制语句javaScript 中的程序是从上到下一行一行执行的，通过流程控制语句可以控制程序执行的流程，使程序可以根据一定的条件来选择执行。语句的分类：条件判断语句。条件分支语句。循环语句。条件判断语句使用 if 关键字进行条件判断。语法一if (/*条件表达式*/) { // 逻辑语句...}if 语句在执行时，会先对条件表达式进行求值判断。true：执行 if 后的语句。false：不会执行 if 后的语句。if 语句只能控制紧随其后的那条语句。如
2021-06-28 14:57:02
211
原创 js中的常用运算符概述
js中的常用运算符概述运算符也叫操作符。通过运算符可以对一个或多个值进行运算，并获取运算结果。比如：typeof 就是运算符，可以来获取一个值的类型。typeof 0 // numbertypeof '' // stringtypeof true // booleantypeof undefined // undefinedtypeof null // object算数运算符运算符描述+加法运算。-减法运算。*乘法运算。/除法运算。%
2021-05-02 10:55:56
320
原创 js中的8种数据类型
js中的7种数据类型目前 JavaScript 中一共有 7 种数据类型。type描述String字符串。Number数值。Boolean布尔值。Null空值。Undefined未定义。Object对象。Symbol独一无二的值。（ES6 新增）这 7 中数据类型又分为 简单数据类型 和 复杂数据类型。简单数据类型：String、Number、Boolean、Null、Undefined、Symbol。复杂数据类型（
2021-04-25 08:55:04
4907
原创 js数据类型转换
js数据类型转换一般转换 String、Number、Boolean 这 3 种类型。将其他的数据类型转换为String方式一调用被转换数据类型的 toString 方法，该方法不会影响到原变量，它会将转换的结果返回。(1).toString() // "1"(true).toString() // "true"注意：null 和 undefined 没有 toString 方法，如果调用它们的方法会报错。(null).toString() // Cannot read property
2021-04-22 21:30:31
199
4
原创 鼠标滚轮事件（mousewheel / DOMMouseScroll）兼容性处理
滚轮事件非Firefox浏览器中在非 Firefox 浏览器中，使用 mousewheel 事件来监听鼠标的滚轮事件，通过事件对象的 wheelDelta 属性可以判断现在是向下滚动还是向上滚动。// 方式一 DOM0document.documentElement.onmousewheel = function(event) { console.log(event.wheelDelta) // 滚轮信息}// 方式二 DOM2document.documentElement.addEv
2021-04-15 15:17:49
3489
原创 offsetParent、getBoundingClientRect与其他位置相关属性
写在前面：本文章中的代码演示，默认清除的了 body 和 html 的 margin、padding。定位父级Element.offsetParent。定位父级 offsetParent 是一个只读属性。该属性返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body 元素。<div id="box1"> <div id="box2"> <div id="box3"></div>
2021-04-13 21:55:25
419
2
原创 最【通俗易懂】的 canvas 入门教程（多图预警）
canvas画布canvas画布的宽度与高度canvas 标签只有两个常用的标签属性：width 和 height。当没有设置宽度和高度的时候，canvas 会初始化成宽300px，高150px的画布。使用 html 属性设置 width，height 时，只影响画布本身，不影响画布内容。通过 css 样式指定 canvas 的 width，height 时，不但影响画布本身的宽高，还会使画布中的内容等比例缩放（缩放参照画布默认的尺寸）。<!-- 不要通过样式指定宽高 --><
2021-04-11 22:41:10
2080
原创 音视频标签总结
音视频音视频的理解容器大多数人会认为视频文件就是 .avi .mp4，但事实上 avi 和 mp4 仅仅是容器的格式，它只决定怎么将视频存储起来，而不关系存储的内容。有点类似于 .zip。视频文件（视频容器）包含了音频轨道、视频轨道和其他一些元数据。视频播放的时候，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。编解码器音频和视频的编码 / 解码是一组算法，用来对一段特定音频或视频进行编码和解码，一遍音频和视频能够播放。原始的媒体文件体
2021-04-10 21:51:10
660
原创 HTML语义化标签总结
HTML语义化标签总结HTML语义化标签总结语义化的好处hgroup标签header标签nav标签section标签article标签aside标签footer标签details标签datalist标签progress标签time标签mark标签meter标签ruby标签HTML语义化标签总结语义化的好处HTML5可以让很多具有语义化、结构化的代码标签，代替大量无意义的 div 标签。这种语义化的特性提升了网页的质量和语义，对搜索引擎更加的友好。特点：它们这些标签功能就是代替 div 功能中的一部
2021-04-02 22:56:43
233
原创 js网页打印的4种方式和相关内容
js打印的4种方式和相关内容前言注释方式打印id选择打印前言在网页上打印通常都是Ctrl+p，例如百度首页打印预览：我们有时候在项目中也会使用打印的功能，基本上都是打印网页上的一部分内容，比如某块区域的文章、表格或者标签。总的来说就是自定义需要打印的区域，接下来就让我们一起来看一下吧！注释方式打印html代码： <h1>注释区域外不需要打印的内容</h1> ...
2020-03-27 15:11:06
6682
7
原创 js中substr，substring和slice的区别
js中substr，substring和slice的区别相同点：substr，substring，slice都是用来操作字符串的，都有两个参数。操作之后原字符串不会发生变化，必须通过变量接收substr，substring，slice返回的结果。var str = 'abcdefg';//只传一个参数，三者都代表起始位置，结果都一样。console.log(str.substr(2...
2020-03-26 20:03:13
409
原创 js扫描（上传）图片解析二维码
getUserMedia.访问摄像头（扫描以及上传图片）解析二维码1.核心准备工作话不多说先上效果图：1.核心准备工作
2020-03-24 10:44:31
2849
15
原创 css高度塌陷问题以及兼容IE6
css高度塌陷问题以及兼容IE6首先我们要明白什么是高度塌陷：在父元素不设置高度的情况下，其高度是由子元素所撑开的，如果子元素脱离文档流，父元素就会出现高度塌陷的问题。元素未脱离文档流的情况： <div class="box"> <div class="inner"></div> </div> <div class="wrap...
2020-03-14 19:50:23
187
原创 css圆角（border-radius）的深入理解
css圆角（border-radius）的深入理解写在前面：1.介绍： 在border-radius出来之前，传统的生成圆角，必须使用多张图片作为背景图案，浪费很多的时间。 css3圆角的出现，使我们再也不必浪费时间去制作这些图片了，并且可以减少文件维护的工作量、提高网页性能，增加视觉可靠性。2.border-radius: 这是一个简写属性，用来设置： border-top-l...
2020-01-07 16:46:55
3057
原创 css调节和控制元素大小
css调节和控制元素大小1.（resize）调节元素大小2.（box-sizing）控制元素大小写在前面：1.（resize）调节元素大小: none(无法调节). both(允许调节). horizontal(调节宽度). vertical(调节高度). 注意:resize要和overflow:auto搭配使用.2.（box-sizing）控制元素大小: content-bo...
2020-01-07 11:01:51
3017
原创 css使图像模糊
css使图像模糊我们可以使用css中的filter（滤镜）属性使图片呈现出模糊的效果：HTML代码：<img src="img/A.jpg" />页面效果：添加filter属性：img{ filter:blur(5px)}页面效果：以下是filter（滤镜）属性的参数及使用方法：参数呈现效果使用方法默认值none默认值，没有效果...
2020-01-07 10:12:17
327
原创 js得出每个元素在数组中出现的次数
JS得出每个元素在数组中出现的次数举例： //数组数据 var data = ['b','a','c','a','b','b','b','c','c','a','c','a','a','a','b','c']; //空对象 var map = {}; var i = 0, len = data .length; //循环查找 for (; i < len; i++) { ...
2020-01-02 10:37:41
4293
原创 less预处理器相关内容
less预处理器相关内容1.less编译工具2.less中的注释3.less中的变量4.less变量的延迟加载5.less的嵌套规则6.less中的混合7.less中的计算8.less继承（extend）9.less避免编译less官网的简介：less是一种动态样式语言，属于css预处理的范畴，它扩展了css语言，增加了变量、Mixin、函数等特性，使css更易维护和扩展。less即可以在客服端...
2020-01-01 20:28:13
339
原创 less预处理入门
less预处理器1.准备工作2.less.js预处理在一些大型项目中我们会写到很多的css样式代码，好多都是相同的样式，重复性高，还必须写，样式越多的话，后期需要修改或者维护也挺麻烦的，这就大幅度降低了我们的开发效率。这个时候使用less预处理器就可以更高效的改变这一现状。1.准备工作使用less进行预处理可以使用less.js文件或者koala编译工具，这两者它们的官网上都有：推荐大家使...
2020-01-01 15:51:16
413
原创 css3多列布局（分栏布局）
css3多列布局演示模板HTML代码： <div id="box"> 多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br> 多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br> 多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>...
2019-12-27 10:57:31
1209
原创 css3响应式布局核心（@media常用属性）
css3响应式布局核心（@media常用属性）1.媒体类型响应式布局的核心：css3媒体查询选择器。@media相关属性：1.媒体类型： all:所有媒体（默认值）. screen:彩色屏幕. print:打印预览. projection:手持设备. tv:电视. braille:盲文触觉设备. embossed:盲文打印机. speech:屏幕阅读器等发声设备. tty:...
2019-12-26 20:09:52
3102
8
原创 css弹性布局（display:flex）
css弹性布局（display:flex）display:flex相关属性：容器属性1.flex-direction：控制主轴是哪一根，控制主轴的方向2.justify-content：管理主轴富裕空间3.align-items:管理侧轴富裕空间4.flex-wrap:控制的是侧轴的方向5.align-content:多行/列时侧轴富裕空间的管理（把多行/列看成一个整体）6.flex-flow:f...
2019-12-20 20:49:25
477
原创 float:left,display:-webkit-box,display:flex的区别
float:left,display:-webkit-box,display:flex的区别float:left,display:-webkit-box,display:flex都可以实现元素横向排列，但是却存在的一定的区别：HTML代码： <div id="box"> <div class="inner">1</div> <div class...
2019-12-15 18:37:53
1671
原创 css时钟
css时钟css代码： *{ margin:0; padding:0; list-style:none } html,body{ height:100%; overflow:hidden } #box{ width:400px; height:400px; border:1px solid; border-radius:50%...
2019-12-14 14:27:51
195
原创 animation-timing-function:steps的坑
animation-timing-function:steps的坑animation-timing-function:steps(n,[start | end])。传入一到两个参数，第一个参数把一个关键帧周期分成n等分，然后一个关键帧周期里的动画就会平均的运行。第二个参数start表示从动画的开头运行，相反，end（默认）就表示从动画的结尾开始运行。 #box{ position:re...
2019-12-14 14:18:03
644
原创 css倒影（-webkit-box-reflect）
css倒影（-webkit-box-reflect）-webkit-box-reflect属性提供元素倒影：三个参数：参数1：方向：above（向上）below（向下）left（向左）right（向右）。参数2：倒影与元素的间隔（px或者百分比）。参数3：遮盖图片，语法跟background-image差不多。css代码： div{ width:200px; h...
2019-12-11 19:30:54
1247
原创 css文字阴影和盒子阴影
css文字阴影和盒子阴影文字阴影：text-shadow（4个参数：水平阴影位置，垂直阴影位置，阴影模糊距离，阴影颜色）。css代码： h1{ font:bold 80px "微软雅黑"; text-shadow:10px 10px 10px red; }HTML代码：<h1>文字阴影</h1>页面效果：注意：text-shadow的参...
2019-12-10 20:59:52
349
原创 css文字操作
css文字操作文字描边：-webkit-text-stroke（两个参数，文字颜色，描边厚度）：css代码： p{ font:bold 50px/100px "微软雅黑"; color:white; -webkit-text-stroke:2px red; }HTML代码：<p>文字描边</p>页面效果：文字方向：directi...
2019-12-10 19:58:46
205
原创 阿里巴巴矢量图标库的使用
阿里巴巴矢量图标库的使用阿里巴巴矢量图标库地址：https://www.iconfont.cn/。点击右上方登录账号：没有的话就需要自己注册一个账号了。然后选择自己需要的矢量图标：只需要一个的话可以直接下载（点击下载）：根据自己的需求下载：如果需要多个的话就要先添加入库：点击右上方的图标：可以直接下载我们选择的矢量图标：下载下来是一个压缩包：解压后我们可...
2019-12-10 19:11:45
2312
原创 css多棱柱立体旋转
css多棱柱立体旋转css代码： *{ margin:0; padding:0 } html,body{ height:100%; overflow:hidden } #box{ width:450px; height:450px; border:1px solid; position:absolute; left:0; ...
2019-12-09 19:48:38
519
原创 css声明的优先级
css声明的优先级1.css样式的三种表示方式2.css中的重要声明3.css的权重1.css样式的三种表示方式内联式（行内、行级）：<div style="width:100px;height:100px"></div>嵌入式(内部head标签里的style)：<style> div{ width:100px; heig...
2019-12-09 19:36:17
337
原创 js中的debugger调试
JS中的debugger调试debugger：停止JS的执行，相当于设置断点。在JS代码编写的过程中，我们都会通过浏览器的调试模式（F12）来检查代码是否正确，大多数我们都是通过设置断点来进行调试。打开浏览器按F12：在12行设置断点（鼠标点击12）：按F5刷新界面（当前浏览器会执行你设置断点的位置的时候）：然后按F10一步一步执行下去，这是我们传统的JS调试方法，但是如果遇见J...
2019-12-08 15:09:38
11979
原创 css立体旋转及注意事项
css立体旋转及注意事项运用transform、transition、perspective相关的css属性，实现简单的立体旋转：HTML代码： <div id="box"> <div id="cube"> <div>前</div> <div>后</div> <div>左</div>...
2019-12-08 11:34:31
254
原创 css伪元素
css伪元素::after伪元素在元素之后添加的内容。::before伪元素在元素之前添加的内容。注意：::after ::before每个元素值存在一个多次设置会覆盖上一次的样式，必须存在content属性，个别样式可能还要display:block才能显示。<!doctype html><html lang="en"> <hea...
2019-12-07 11:15:56
155
原创 纯css自定义单选按钮
纯css自定义单选按钮<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>单选按钮</title> <style> label{position:relative;float:left;width:100px;...
2019-12-06 15:16:20
399
原创 css伪类nth-child和nth-of-type的区别
css伪类nth-child和nth-of-type的区别<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <style> #aa .aa:nth-child(1){border:1px solid red} #bb .bb:nth-of-type...
2019-12-06 15:05:30
189
原创 css伪类
css伪类1.链接伪类2.表单伪类1.链接伪类:link 表示作为超链接,并指向一个未访问的地址的所有锚。:visited 表示作为超链接,并指向一个已访问的地址的所有锚。<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Doc...
2019-12-06 14:52:11
295
原创 css选择器
CSS选择器1.基本选择器2.基本选择器扩展3.属性选择器1.基本选择器通配符选择器（*）。* {margin:0;padding:0}元素选择器（元素名/标签名）。div{background:red}类选择器（.class）。.inner{color:red}id选择器（#id）。#box{border:1px solid}后代选择器（元素下面的子...
2019-12-05 16:52:24
216
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人