- 博客(37)
- 收藏
- 关注
RSS订阅原创 微信小程序动画库
在pc端和移动端有很多方便使用的动画库，比较出名的是 Animate.css今天给大家介绍一个小程序端的动画库，使用起来非常方便，效果也还不错其中大部分动画的来源于Animate.css首先安装如果你的微信小程序项目基于 nodejs 开发，你可以使用 npm 安装，并拷贝到相关目录后 @importnpm install ripples.wxss --save直接 clone 或 download 仓库https://github.com/jeasonstudio/Ripples.wxs
2020-09-14 10:39:10
3040
2
原创 记录vue中使用echarts的一些问题
VUE使用Echarts的一些问题 <div :id="id" :class="className" style="width: 100%; height: 100%;"></div>1.另外需要用到的一些参数也可以通过props接收到以后绑定上去2.initChart()函数一定要在mounted中因为这个时候才可以获取到DOM节点，如果表格的数据是动态请求回来的，再绘制前一定要清除一次以前的数据，echarts有可能会一直累加这个数据3.如果你是有tab切换或者自适应的
2020-08-01 14:17:37
430
1
原创 JavaScript 节流，防抖函数
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时// 防抖function debounce(fn, wait) { var timeout = null; return function() { if(timeout !...
2020-04-12 15:48:51
220
1
原创 Ajax Promise Generator 对比封装异步请求
第一种是我们使用jQuery中ajax方法就是经典的回调方法$.ajax({ url: '/path/to/file', dataType: 'json', data: { param1: 'value1' }, success(data1) { $.ajax({ url: '/path/to/file', dataType: 'json', data: {...
2020-04-04 16:28:32
319
原创 ES6 Promise理解
首先我们要清楚在JavaScript中所有的代码执行都是单线程的这就导致所有网络操作，浏览器事件等都是异步进行的 我们一般通过回调函数callback来实现异步 但是回调过多会产生回调地狱比如我们常使用的Ajax就是一个典型的异步操作我们在success和fail中去实现异步的函数request.onreadystatechange = function () { if (reque...
2020-04-01 17:29:06
133
原创 5个常用的CSS单位
我们在很多时候都需要用到CSS的尺寸 ， 字体大小，段落行距 ， 高度，margin等等那这一篇文章主要讲解CSS常用的5个单位{01} pxpx是一个绝对单位，他代表你现在使用的屏幕的像素比例中的一个光点 例如1920*1080就代表横屏幕由1920个像素光点组成 那1px就是 1/1920个距离但他是一个绝对单位在很多时候会不容易更改,比如我们在设定文字大小时通常还会设置行高，那我们...
2020-03-26 15:46:01
241
原创 CSS制作舞台聚光灯效果
今天依靠纯CSS来制作一个舞台聚光灯效果，先看效果图 html{ font-size: 15px; } body{ background-color: #222; /* 为body设置使我们的h1垂直水平居中 */ display: flex; justify-content: center; align-items: cente...
2020-03-22 17:05:50
1094
3
原创 原生JS实现Promise解决ajax回调地狱
这里对于Promise的介绍及用法 还有关于回调地狱（一个函数作为参数需要依赖另一个函数执行调用）的解决方案有很多就不介绍了今天主要实现的功能是原生的Ajax请求通过Promise包装function AjaxPromise(url) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpReq...
2020-03-18 18:21:24
404
原创 ES6 class类深入理解
ES6中很多的新特性值得我们去学习，今天主要围绕最值得我们学习的class（类）来展开类的概念一提出就使得我们JavaScript面向对象的编程更贴切，在以往我们通过构造函数来实例化对象总给人怪怪的感觉，我们会觉得对象为什么是从函数new出来的 而且构造函数的缺点也非常明显比如：他可以不通过 new关键字来使用再比如子类实例共享了父类构造函数的引用数据类型属性。但这里说明一点class（类）的...
2020-03-14 14:44:07
352
原创 Ajax 从json文件获取数据
今天的代码主要是说一下前端部分通过Ajax来请求JSON数据先来看一下在jQuery中ajax的基本用法： $.ajax({ type:'POST', // 规定请求的类型（GET 或 POST） url: // 请求的url地址 一般是服务端语言 这里我们选择php dataType:'json', //预期的服务器响应的数据类型 这里我们选择json data:{},//规...
2020-03-10 20:30:15
704
原创 sublime自定义html格式模板
有关于sublime的插件就不做多介绍了有很多优质的推荐文章 这篇文章主要想介绍自定义格式的html模板 ， 这对于我们使用不同的工具或者框架比如（jquery , boot-strap )等可以方便很多首先我们在 工具 ——> 选择 插件开发 ——> 选择 新建代码片段然后我们点击打开后会进入如下界面这里注意 我们在 < ! [ CDATA ] [ …] ] &g...
2020-01-07 19:38:42
606
原创 制作立方体相册
主要实现的功能是一个正方体的六个面为六张照片 利用CSS3中的动画属性来让他旋转，下面上代码 <body> <div class="box"> <div class="photo1"></div> <div class="photo2"></div> <div class="photo3">...
2020-01-04 16:09:50
684
原创 JS关于触摸事件及简易移动端阅读器
制作一个移动端的阅读器首先第一点就是我们需要理解触摸事件在我们简易阅读器中需要用到的是起始触摸位置和结束触摸位置 这两个事件都会触发产生对应的对象下面放一张图来看看它包含什么 上面一张图是开始触摸事件 下面一张是结束触摸我们可以发现这个对象的名字是TouchList ， 里面只有一项Touch 又包含了identifier：标识触摸的唯一IDtarget ： 触发的DOM元素scr...
2019-12-26 20:24:17
182
原创 CSS3中关于background一些属性及连写
background-image它允许为背景添加一个图片或者一个渐变颜色 这里注意渐变色属于image 而不是color下面我们写一个渐变色的div看看实际用法.main{ width: 200px; height: 200px; border: 1px solid #333; border-radius: 50%; background-image: linear-gradien...
2019-12-26 17:17:41
2217
原创 CSS3关于伪类效果修改CheckBox默认样式
我们在使用input中的CheckBox时总会觉得默认的样式很丑 可是它本身能修改的样式又甚少 ， 今天给大家介绍几个例子关于修改他的样式首先我们需要知道的是我们是无法修改它本身的样式但是有两种常用的方法实现同样的功能通过两张或多张图片来覆盖CheckBox点击切换不同的图片来实现 这个方法兼容性比较好但是需要额外引入图片 增大加载量通过lable标签来实现与CheckBox联动 ，我们...
2019-12-24 20:51:59
394
原创 JavaScript制作简易单词测试题库
使用sessionStorage和localStorage制作一个英语单词题库由于一共有三个页面 所以html代码和css代码只展示部分作参考<div class="main"> <h1>单词录入</h2> <hr><br> <span>English:</span><input type=...
2019-12-23 20:52:44
1226
2
原创 SVG小图标
我们现在使用SVG更多是在绘制小图片icon 因为它强大的功能以及不失真的特点 下面上代码画一个导航栏和小信封导航栏for(var i=1; i<4; i++){ //循环三次分别画三个圆和三个圆角矩形 var circle = document.createElementNS('http://www.w3.org/2000/svg','circle'); circl...
2019-12-16 20:42:47
684
原创 SVG 柱状图
SVG早在XML中就已经有了，但今天在我们使用H5的过程中仍然用到很多关于SVG画图的地方 这里带来一个小的案例便于理解SVG中的参数及属性柱状图<h3>编程语言热度</h3> <svg id="s1"> <g stroke="#555" stroke-width="2"> <line x1="50" y1="45...
2019-12-16 20:35:31
475
原创 JavaScript事件委托 单元素多种变化
这篇文章主要介绍事件委托 及元素的多种样式改变 <div class="main"> <span class="block0"></span> <span class="block1"></span> <span class="block2"></span> </div>下面是CS...
2019-12-09 20:46:51
171
原创 JavaScript倒计时
做一个简易的倒计时界面下面先直接上代码 放在一个HTML页面上<style type="text/css"> body{ background: url('timg.jpg') no-repeat center center fixed; width:100%; height:100%; background-size: c...
2019-12-04 19:52:36
215
原创 JavaScript关于BOM
BOM （Browser Object Model）浏览器对象模型简单说一下JavaScript的三大组成部分：ECMAScript (核心) ： JS的语法和基本对象。文档对象模型 （DOM） ： 处理网页内容的方法和接口浏览器对象模型（BOM） ： 与浏览器交互的方法和接口关于DOM部分可以参考之前的一篇文章 ：JavaScript DOM基础今天主要讲的是BOM...
2019-12-02 15:36:19
201
原创 JavaScript自动/点击轮播图
自动/点击轮播图轮播图有很多实现的方法 这里给大家带来一种通过改变图片地址的方法 复用性很高只需要改变图片地址对象的名字就行 下面上代码由于用到的代码和样式不多 全部放在一个页面了HTML 部分 <div class="picture"> <div class="img"> <img src="01.jpg" id="pic"> <...
2019-11-27 20:50:23
1429
原创 DOM及常用操作
DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 以树结构表达 HTML 文档。下面介绍一些 DOM 中常见常用的API方法 以及带来个小例子DOM查找 document.getElementById() 通过元素的ID查找 doc...
2019-11-23 11:47:26
101
原创 JavaScript前端 制作2048游戏
2048是非常经典的数字游戏 今天给大家带来JavaScript版本下面直接上代码重点位置在单独拿出来说 ， 一共分为三部分HTML部分<div class = 'contain'> <div class = 'hearder'> <h1 class = 'title'> <a href="#">2048</a>...
2019-11-20 20:26:56
962
原创 如何理解JavaScript闭包
不管你是学习JavaScript还是其他编程语言可能都对闭包这个概念有所理解，今天给大家分享的是在JavaScript中我对闭包的理解以及一些实例和闭包的作用闭包的概念在了解闭包之前你需要了解一些和它有关的概念如 ： 作用域 ， 作用域链 ， 执行上下文有关这一部分内容在我前面的一篇文章有提到过 JavaScript理解作用域下面我们创建两个最简单的闭包 大家通过他的输出来看看能否理...
2019-11-12 20:48:08
154
原创 JavaScript理解作用域
JavaScript作用域及作用域链这篇文章主要谈谈我自己对作用域以及作用域链的一些理解什么是作用域和作用域链？作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种，局部作用域又称为函数作用域。为了方便理解我们先看一个例子来解释作用域的范围 console.log(scope); ...
2019-11-11 21:01:14
247
2
原创 JavaScript表单验证及注册界面
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。表单数据经常需要使用 JavaScript 来验证其正确性下面是今天这个界面的 HTML CSS JavaScript 部分关键代码 <div class="form-body"> <div class="input"> <div class="typ...
2019-11-07 19:52:19
3070
原创 JavaScript关于String对象以及生成随机验证码
String 生成随机不重复验证码这里主要介绍一些关于string的属性以及一些String对象方法 ， 最后带来一个验证码的例子。String 对象用于处理文本（字符串）。String 对象创建方法： new String()。var a = new String("string");或者直接以字符串赋值var b = 'string';String对象同数组一样有这些属性...
2019-11-05 20:39:06
277
原创 JaveScript中关于随机数
Math.random()在我们JavaScript中生成随机数的函数是这个Math.random() ， 它在官方文档中只是简单说明了Math.random() 方法可返回介于 0（包含） ~ 1（不包含） 之间的一个伪随机数，用我们熟悉的数学来说就是 [ ) 。那这里我们举一些实用的例子来详细说明我们在说随机数之前先说一下关于取整问题Math.round() 四舍五入Math....
2019-11-05 17:22:18
249
原创 JavaScript关于一维和二维数组
关于数组的一些简介和内置API以及包括数组的分类这里就不做多介绍了大家可以在w3school看到非常详细的介绍 这里主要通过下面的两个小例子来便于理解一维数组和二维数组！我们看一下第一题1.编写一个程序，用于产生20个0-10之间的随机数，将这20个随机数存入数组，并通过函数统计这些随机数中某个数出现的次数var arr = [20]; var count = 0; for(var...
2019-11-02 12:54:21
293
原创 JavaScript循环
浅谈JavaScript循环同其他编程语言一样，JavaScript提供了许多通过LOOPS迭代的方法。也就是我们所说的循环。这里也是为大家简单介绍一下他们的用法及适用场合。1. Switch 语句switch 不是 LOOP 迭代 ， 但是放在这里讲解一下因为他也是可以让语句用于基于不同条件执行不同动作。先来介绍一下基本格式：switch(表达式) { case n: ...
2019-10-28 18:34:08
119
原创 Javascript基础语法及注意
Javascript语法基础今天的内容主要是以JavaScript的基础语法以及围绕一些JavaScript里的关键词和保留字展开1. JavaScript里的数据类型：分为基本类型和引用类型基本类型包括：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）引用类型有 ： 对象(Object)、数组(Array)、函数(...
2019-10-26 12:38:17
148
原创 5G时代对前端开发的改变
5G时代对前端开发的影响这里我们就不过多的介绍5g了 ， 因为我觉得这是大家都有关注过的话题但我相信一句话：过去和现在所经历的互联网繁荣都是4G对3G的颠覆！那今天主要谈谈5g的来临对于我们从事前端开发的人员有什么影响和改变！我觉得可以从以下几点出发：1. 新的开发场景，需求更多更大 我们的机会也就越多平台也越广。伴随着5G时代的来临，在移动互联网领域以及物联网领域都会有更多场景和...
2019-10-21 18:14:42
677
原创 关于hover伪类选择器浅谈
关于hover伪类选择器浅谈伪类选择器的语法和目标我们在网页制作的过程中很多地方会遇到鼠标触碰的动画效果，那这就需要用到:hover伪类选择器 这里简单说明一下：定义:hover指在鼠标移到链接上时添加的特殊样式。:link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式 :active选择器设置当你点击链接时的样式。为了产生预期的效果，在 ...
2019-10-19 14:03:16
630
1
原创 音乐播放器界面设计
音乐播放器界面简单制作这个音乐播放器界面的设计主要涉及到div对整个页面的布局分层想法 然后涉及到 定位； 浮动 ； 精灵图 以及伪类选择器的样式用法 下面我们进入正题吧首先我们搭建整体的布局具体的css样式参数我们在代码中讲解 我们分析一下这个整体的div布局最外围是<body>给它设置宽高，<warpper>作为播放器页面的主体我们让它居中显示并带上上边距...
2019-10-15 13:23:37
5579
原创 HTML首周学习分享
HTML首周学习分享 这篇文章是第一次分享博客也是学习html第一周的一些心得和分享，希望没有了解过或者也是正在学习的同行们可以给与支持和帮助1. html基础及标签的属性和用法<head>刚开始理解仅为页面的标签标题显示，作为网页的头部，后面发现有很多会把本页面的一些基础样式和资源都写在这里<body>是页面的最主要模块，编写页面所有样式，交互的模块，页面你所...
2019-10-13 22:07:21
132
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人